Import from Figma

With the Figma integration in Portal, you can quickly create interactive prototypes from your existing Figma designs. Attach a Figma frame URL at any point in the prototyping process to build and iterate on testable prototypes as a team.

---

Create a prototype from a Figma frame

You can import Figma frames during initial or subsequent prompts when creating a prototype. There are two methods for importing a Figma frame:

Import from Figma

1. Click the Figma icon in the composer.
2. In the dialog that appears, paste the link to your Figma frame.
3. Click Import.
4. Enter a prompt in the composer and click Create prototype.

 

Paste a Figma URL directly

You can also paste a Figma URL directly into the composer. The file will be added as a mention and as an attachment.

 

Mention a Figma frame

You can mention Figma attachments in your prompt by typing the @ symbol and selecting the frame in the dropdown.

 

Delete a Figma frame

You can delete a Figma frame by clicking the Delete icon that appears over the

 

Preview an imported frame

In the main chat, you can see a larger preview of an imported Figma frame by hovering over the item. You can also click Open in Figma to open that frame.

 

Import more frames

You can import a Figma frame at any point in the prototyping process to provide additional frames to reference. To import additional frames, click the Figma import icon in the composer and add your frame URL.

 

Update an imported frame

When you import a Figma frame, a snapshot of that frame is provided to the AI agent. To make changes to this frame, you need to import the updated frame again.

 

---

Best practices

Structure your Figma frames for AI

AI doesn’t just look at your design like a screenshot — it reads the entire structure behind your Figma frame. The more organized and intentional that structure is, the better the generated code will be.

1. Use clear, semantic layer names

• Layer names are no longer just for organization, they act as instructions for AI.
• For example, names like AlertWarning or ButtonAccent give meaning, while something like Frame 4315 forces the agent to guess.

2. Use Auto Layout

• Without auto layout, AI defaults to fixed pixel positioning, which leads to fragile, non-responsive code.

3. Use components and variants

• Repeated elements should always be components.
• Define different states (like hover, disabled, or error) in variants as part of a single component instead of as separate elements.

4. Align variables and design tokens

• When your Figma variables match your code tokens, the AI can output meaningful values instead of hardcoded hex codes.

5. Keep frames focused and simple

• Work with one frame per screen or component and avoid dumping everything into a single frame.
• Limit nesting to 2–3 levels and remove any hidden or unused layers.