Skip to content

Figma to Code

Figma to Code is a powerful Flow tool that allows you to create app components based on your Figma design. Our goal is for all teams to use this tool from the very first sprint, making the development experience even more agile.

How It Works

  1. The developer must follow the instructions to enable Figma to Code in their tenant for Flow Chat: [Figma to Code - DOCS]
  2. Locate a component in Figma that you want to develop.
  3. Copy the component's "selection URL":
  4. Right-click on the desired component.
  5. Click on "Copy as".
  6. Select the "Copy link to selection" option.

Generating the Prompt for Flow Chat

After setting up Figma to Code and copying the desired component's link, simply generate the prompt for Flow Chat. Example:

[PASTE THE LINK] - Create this login form using Next.js, MUI, and TypeScript

Important Considerations

  • Figma to Code is an accelerator for development, but the generated code will not be 100% of the final code. The developer will need to review and adjust it as necessary.
  • For best results, avoid generating entire screens at once.
  • Generate smaller components incrementally for greater accuracy and better componentization.
  • Following the principles of granular componentization is essential. If the AI generates a very large component, it will be necessary to divide it into smaller, logically organized parts.

This approach will ensure more efficient and modular development, facilitating the project's maintenance and scalability.