Figma Make Tutorial (No Code AI Prototyping)

Figma Make: Bringing Designs to Life with AI - Detailed Summary

Key Concepts:

• Figma Make: A new Figma tool that uses AI to generate interactive prototypes and designs from text prompts.
• Code Layers: Special layers in Figma sites created by Make, containing code that defines interactive elements and animations.
• Figma Sites: A platform within Figma for creating and hosting simple websites directly from Figma designs.
• Figma Make Files: Dedicated files within Figma specifically for using Make's AI-powered design and prototyping capabilities.
• Prompt-Based Design: The process of using text prompts to instruct Make to create or modify designs and interactions.
• Iteration: The process of refining designs and interactions by repeatedly prompting Make and adjusting the generated code.

I. Introduction to Figma Make

• Figma Make is a new addition to the Figma family, designed to bring flat designs to life through interactive prototypes generated from simple text prompts.
• The video demonstrates how to use Make to add custom animations to a Figma site without coding and how to automatically prototype entire screens and design new ones.

II. Adding Animations to Figma Sites with Make

1. Copying a Figma Design to Figma Sites:
   • The presenter starts with an existing Figma design (a landing page for a YouTube video on Figma grids).
   • The design is copied to Figma Sites by right-clicking on the desktop frame and selecting "Copy to Figma sites."
   • The new file is named "make demo" and moved out of drafts.
2. Accessing Make Features:
   • In Figma Sites, a "make" icon is available in the toolbar (shortcut: E).
   • Hovering over elements reveals a "code layer" option.
3. Generating Code from Design:
   • The presenter selects a text element ("This course will teach you") using command-click for deep selection.
   • The right panel displays a "make code from design" icon, which opens the Make window.
   • The Make window shows the selected text and the corresponding generated code (HTML with font styles, letter spacing, etc.).
4. Using Prompts for Animation:
   • The presenter uses the chat interface to request an animated typewriter transition: "animated type writer transition where each letter comes in one at a time."
   • Make generates code for the animation and provides a preview.
   • The preview can be reloaded to see the animation in action.
5. Editing Generated Code:
   • The code view allows for direct editing of the generated code.
   • Example: Changing the initial opacity of the text from 0 to 0.5 to make it faintly visible before the animation starts.
6. Integrating Code Layers into the Design:
   • Closing the Make window replaces the original text with a code layer (indicated by a green outline and a Make icon in the layers panel).
   • The code layer can be positioned and aligned within the design grid.
7. Previewing the Animated Page:
   • Using the standard Figma preview (Option + Command + Enter), the animated text is displayed on the page.
8. Adding a Delay to the Second Headline:
   • The second part of the headline ("You won't want to wear anything else") is also animated using Make.
   • The code layer for the first headline is duplicated and moved to the second headline's position.
   • The text within the duplicated code layer is changed to "headline part two" using the chat interface.
   • A delay is added to the second headline's animation using the prompt "delay 1.5 seconds before starting," which adds a startDelay property to the code.
9. Addressing Font Rendering Issues:
   • Figma Sites has a known issue where it doesn't render non-default fonts correctly in the preview.
   • The presenter uses Make to inject the desired font (Gist Mono) into the page by writing a prompt: "font used throughout the page is guys mono regular weight. Can you write some code for the head to ensure that this font is rendered in preview/browser?"
   • Make generates code to load the font.
   • Initially, the generated code outputs a visible example layer, which is then hidden using the prompt "Replace the visible demo UI with return null."

III. Creating Figma Make Files

1. Creating a New Make File:
   • A new file is created in Figma and designated as a "make file."
   • The interface prompts the user to paste a Figma frame and write an accompanying prompt.
2. Preparing a Figma Frame for Make:
   • Guidelines for preparing a Figma frame for Make:
     • Remove unnecessary elements.
     • Use auto layout wherever possible.
     • Name layers appropriately.
   • The presenter uses Figma's AI to rename layers in the design.
3. Generating a Location Page:
   • The presenter copies the desktop frame from the original Figma design and pastes it into the Make file.
   • A prompt is used to generate a location page: "design a locations page for this website that links from the pin icon in the top navigation menu and lists all the store locations globally make up five of them. There should be a map with an interactive zip code input to find your closest store. Font is guys mono regular."
   • Make generates a store locations page with a mocked-up map, store locations (Tokyo, New York, London, Paris, Sydney), and interactive elements (zip code input).
4. Editing Within Make:
   • Limitations: Cannot send the generated design back to a Figma design file for further editing.
   • Editing options within Make:
     • Point and Edit Tool: Allows for basic formatting changes (font, color, size, bolding) by selecting elements in the preview.
     • Prompt-Based Editing: Allows for making changes by writing prompts, similar to Figma Sites.
     • Direct Code Editing: Allows for editing the generated code directly, including CSS styles.
5. Iterating and Refining the Design:
   • The presenter demonstrates using the point and edit tool and prompt-based editing to fix issues with the generated location page (e.g., removing the gray background, changing the headline color, centering the top navigation menu).
   • The process requires iteration and can be time-consuming.

IV. Conclusion

• Figma Make is still in beta but has the potential to become a powerful tool for generating interactive prototypes and designs.
• It is particularly helpful for generating ideas and creating realistic-looking mockups with AI-generated content.
• The presenter encourages viewers to experiment with Figma Make and share their experiences in the comments.
• The tool's limitations, particularly the inability to transfer designs back to a standard Figma file, make it somewhat frustrating for detailed design work.