techlist.io
KREN
figma

8 Essential Tips for Using Figma Make | Figma Blog (opens in new tab)

figmaprototypinggen-aifigma-makeprompt-engineeringui-ux-designprompt-to-codeclaude-sonnet

Figma Make works best when users provide clear context, prepare clean design files, and refine complex projects incrementally. Detailed initial prompts reduce revisions, while organized Figma layers and Auto Layout help designs translate into functional prototypes. For ambitious builds, breaking work into focused prompts and separate code folders improves control, maintainability, and debugging.

Provide Detailed Initial Prompts

  • Include:
    • The task Figma Make should perform
    • Product or flow context
    • Essential design elements
    • Expected interactions and behaviors
    • Device, layout, and visual constraints
  • Front-loading requirements helps produce a stronger first version with fewer follow-up prompts.
  • Use precise, measurable instructions instead of vague requests:
    • “Move this element down 20 pixels”
    • “Add 16px of space between these buttons”
  • If repeated adjustments are not working, restart with a new file and use lessons from the first attempt.
  • Effective project prompts can include an overview, platform, purpose, features, visual direction, technical details, and an explicit first implementation step.

Clean Up Figma Files Before Importing Them

  • Figma Make can either create new designs or turn existing Figma frames into interactive prototypes.
  • Before copying a frame into Figma Make:
    • Organize the file
    • Apply appropriate constraints
    • Use Auto Layout correctly
    • Name layers according to their purpose
  • Figma tools such as Suggest Auto Layout and Rename Layers with AI, along with plugins like Clean Document, can help prepare files.
  • If the result is too large or not responsive, use prompts such as:
    • “Scale this to the size of my screen and make it responsive.”
    • “Keep this mobile-sized.”
  • A well-structured Auto Layout design can enable complex interactions from a single prompt, such as making a CD spin when a music player starts.

Build Complex Projects Incrementally

  • Use a detailed first prompt to establish the overall foundation, then make smaller, focused changes.
  • Smaller requests allow the model to respond more precisely and reduce the risk of unwanted changes elsewhere.
  • Incremental prompting is useful for:
    • Building complex interfaces
    • Creating multi-page flows
    • Adding individual features
    • Maintaining the intended visual direction
  • Ask Figma Make to place separate elements in separate code folders to improve organization, maintainability, and error isolation.
  • Large projects may require many prompts; one financial dashboard and onboarding flow took more than 150 focused iterations.
  • Example follow-ups included adding journal post-its, inserting a detailed finance table, and adding a currency-selection checkbox.
  • Separating 3D landmarks into individual coded files similarly makes it easier to refine components without affecting the wider environment.

Use Figma Make as an iterative design-and-development tool: prepare the source file carefully, describe the desired result precisely, and make complex changes one manageable step at a time.