Figma AI

Create an Interface Draft with First Draft

Use First Draft to quickly create an initial interface layout from text descriptions instead of drawing from scratch.

In a new Figma file, select the First Draft tool, and enter a description of the screen to be created (e.g., 'login screen with email, password, and login button').

The more specific you are about the number of elements and desired layout, the closer the AI-generated result will be to your initial idea.

Review and Edit the Draft

Review the layout, spacing, and colors generated by the AI, and edit them to match the brand guidelines.

Select each group of elements, adjust spacing, font, and colors according to the brand's style guide.

Don’t keep 100% of the AI-generated draft; always add your own highlights to avoid the interface looking templated.

Automatically Name Layers Properly

Use the AI layer rename feature to organize the file neatly for easier handover.

Select all the layers that need renaming, run the 'Rename layers' feature from the AI menu to have Figma auto-name them based on content/function.

Double-check the naming of important layers (e.g., main button, input field) to ensure they align with the team's naming conventions.

Convert to Reusable Components

Transform completed elements into components for reuse across other screens.

Select the group of elements, click on Create Component (Ctrl/Cmd + Alt + K), and then add it to your team's design system library.

Name components using a clear structure (e.g., Button/Primary/Large) to make it easier to search as the library grows.

Test Interaction Flow with Figma Make

Link the screens together to create a prototype that can be click-through tested in real scenarios.

Use Figma Make or the Prototype tab to connect the frames according to the user flow, then share the link with the team for testing.

Collect feedback from at least 2-3 people in the team before handing over this design for official development.