# Figma tutorial: Intro to Figma Make

Source: https://www.youtube.com/watch?v=1PFkmrb4Bqg
Recap page: https://rapidrecap.app/video/1PFkmrb4Bqg
Generated: 2025-12-04T16:10:25.519+00:00

---
## Quick Overview

Figma Make enables users to generate functional prototypes and web apps from text prompts, incorporating existing design assets, community libraries, and external data sources like Notion via MCP connectors, allowing for iterative refinement and easy sharing of the final product.

**Key Points:**
- Figma Make transforms text prompts into interactive prototypes, demonstrated by creating a responsive 'Citizen Science app' and later a 'Priority Todo list app'.
- Users can guide the AI by attaching existing Figma designs (like a wireframe) or referencing community libraries for style consistency.
- The tool supports MCP connectors, allowing integration with external data sources like Notion to pull in project details (e.g., 'Bring in my CoLab membership PRD from Notion').
- Iterative refinement is supported via an editor where users can modify designs directly, use inline prompts, or review generated code in the Code tab (03:40).
- Best practices for attaching designs include naming layers, setting proper frame constraints, and applying Auto Layout (1:17).
- Final products can be published with a dedicated URL, shared via link, or published as templates to the Figma Community (6:56).
- The process allows for continuous iteration, where new requirements (like adding backend support via Supabase) can be prompted against existing versions (08:29).

![Screenshot at 00:07: The interface shows the initial prompt being submitted: "Create an app for citizen scientists to collaborate and learn," immediately followed by the generation of a mobile design preview for the 'Urban Tree Canopy Study' project.](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-00-07.png)

**Context:** This video serves as an introductory tutorial for Figma Make, a feature designed to rapidly generate functional prototypes and web applications directly from natural language prompts. The tutorial walks through the core capabilities of Make, starting with basic prompting, demonstrating how to guide the AI using existing design files or community assets, integrating external data via MCP connectors, and concluding with iteration and sharing features.

## Detailed Analysis

The tutorial introduces Figma Make by showing users how to generate an app prototype from a simple text prompt (0:02). The initial example creates a 'Citizen Science app' (0:07). Users can guide the AI by attaching existing Figma designs as a reference (0:59) or by using community examples found in the Community tab (2:14). For better results, the video advises naming layers, setting proper frame constraints, and applying Auto Layout when preparing design assets (1:17). A key feature demonstrated is the use of MCP connectors, which allow the AI to pull context from external tools like Notion to inform the prototype generation (8:33). For instance, a prompt pulls data from a Notion document to implement an e-commerce checkout phase (8:44). Once generated, the resulting application can be previewed, and the underlying code can be viewed and edited in the Code tab (3:40). The iterative process is emphasized; users can refine the design using inline prompts on selected elements (5:36) or by providing follow-up requests in the chat panel (4:54). Finally, the video covers sharing options, including publishing the resulting app to a live web URL or sharing it as a template within the Figma Community (6:56), enabling team collaboration and feedback loops.

### Initiating Generation

- Prompting with text
- Starting from an example
- Attaching existing designs as guidance

### Guiding the AI

- Tips for design assets include naming layers, setting constraints, and applying Auto Layout
- Using MCP connectors (Notion) to bring in external context
- Iterating using inline prompts on selected elements

### Exploring the Editor

- Preview functionality for testing prototypes on various device sizes
- Code tab for viewing generated code
- Reasoning panel for understanding AI decisions

### Sharing and Collaboration

- Sharing via link for feedback and user testing
- Publishing as a template to the Figma Community
- Using the Publish feature to deploy projects to a live web URL

![Screenshot at 0:08: The initial step of prompting Figma Make to create a 'Citizen Science app' for collaboration and learning.](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-00-08.png)
![Screenshot at 0:10: Visual demonstration of how attaching a Figma design file \(left\) guides the AI in generating a structured mobile UI preview \(right\).](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-00-10.png)
![Screenshot at 1:17: Tips for attaching design assets for optimal AI interpretation: naming layers, setting frame constraints, and applying auto layout.](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-01-17.png)
![Screenshot at 3:40: Switching to the Code tab to review the generated React/TypeScript code structure, showing the separation of concerns like components and logic.](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-03-40.png)
![Screenshot at 8:15: The final publishing dialog, showing options to set the title, URL, visibility, and feature the project in the Figma Community.](https://ss.rapidrecap.app/screens/1PFkmrb4Bqg/00-08-15.png)