Figma (design-to-app)

Overview

Connect your Figma account once, then paste a Figma design link into chat and ask the agent to build a site from it. Pentoggle reads your frames, colors, typography, and components directly from Figma and generates a matching React + Tailwind app — no exporting, no copy-pasting hex codes, no rebuilding by hand.

What it supports

• Design-to-app generation — paste a Figma file URL into chat with a prompt like "build a site from this design", and the agent pulls the frame, extracts layout, colors, typography, and components, and generates a matching app
• Per-section updates — paste a specific frame URL to update just one part of your app ("match the pricing section from this frame")
• Re-sync after design changes — share the same Figma link later and the agent picks up your latest edits and applies them to the existing app
• Asset extraction — images, icons, and logos placed in your Figma frames are downloaded and added to your app's file storage automatically
• Auto Layout & components — Figma Auto Layout maps to Flexbox/Grid, and Figma components/variants map to reusable React components in the generated code
• Figma Variables — color, typography, spacing, and radius variables (including light/dark modes) are imported as Tailwind tokens

Example prompts

"Build a site from this Figma design:
https://www.figma.com/design/abc123/My-Landing"

"Match the pricing section from frame 'Pricing v3':
https://www.figma.com/design/abc123/My-Landing?node-id=12-34"

"Sync the latest changes from my Figma file."

Connecting your Figma account

Figma is connected directly from the chat using OAuth — no tokens or secrets to paste. Once connected, the connection is reused across every app you build.

1. Click the Figma icon at the bottom of chat
   • Open any app and look at the row of integration icons at the bottom of the chat panel
   • Click the Figma icon to start the connection
2. Authorize on Figma
   • You'll be redirected to Figma, which shows the permissions Pentoggle is requesting — read-only access to your files and the design assets inside them
   • Click Allow to approve, or Deny to cancel
3. Look for the green dot
   • You're redirected back to chat. The Figma icon at the bottom now shows a small green dot, indicating your account is connected
   • You can now paste any Figma file URL into chat in any of your apps

How it works

1. You paste a Figma file or frame URL into chat with a prompt (e.g., "build a site from this design")
2. Pentoggle uses your Figma connection to fetch the frame, design tokens, components, and asset metadata from Figma
3. The agent maps layout to Flexbox/Grid, colors and fonts to Tailwind tokens, and Figma components to React components
4. Images and icons referenced in the frame are downloaded into your app's built-in file storage
5. A matching site (or section) is generated and deployed to the staging environment — just like any other feature change
6. You preview, iterate in chat, and publish when ready

Disconnecting

Click the Figma icon at the bottom of chat (the one with the green dot) and choose Disconnect. The green dot disappears and Pentoggle immediately loses access to your Figma files. Existing apps keep the design they were built from; only new Figma link prompts will stop working until you reconnect.

Limitations

• Read-only — Pentoggle reads from Figma; it never writes back to your design files
• Interactive prototypes — transitions, smart-animate, and prototype flows are not imported; describe the behaviour you want in chat instead
• Plugin-rendered content — frames produced by third-party Figma plugins are imported as static images rather than editable components
• Enterprise SSO files — files behind an organisation's SSO policy require an admin to authorise the connection for your workspace
• Very large files — files with hundreds of frames may be processed in chunks; the agent will tell you in chat which sections it deferred

Troubleshooting

• "File not found" — your connected Figma account doesn't have access to that file. Open the file in Figma and confirm it's visible there, or ask the owner to share it with you
• "Connection expired" — the green dot on the Figma icon at the bottom of chat will be gone; click the icon and reconnect
• "Rate limited" — Figma briefly throttled the request; the agent retries automatically and tells you if it had to wait
• Wrong account connected — disconnect and reconnect using the correct Figma account; Pentoggle stores one Figma identity per Pentoggle account