Figma
Connect Figma so LaraCopilot can import your design frames as context — reading the rendered frame and its exact styles to generate matching UI.
LaraCopilot can connect to your Figma account so the AI assistant builds UI from your actual designs. You connect Figma once per team, then paste a frame link in the project chat — LaraCopilot imports the rendered frame (as an image) and its exact styles (colors, fonts, layout) as context for generation.
This is a design integration, not version control. It reads frames for design context; it does not push code back to Figma or sync files.
Step 1 — Connect your Figma account
The connection is managed per team from the Integrations hub.
- In LaraCopilot, open Integrations in the sidebar, then choose Figma
- Click Connect Figma
- You're taken to Figma's consent screen — sign in if needed and Allow access
- After approving, you're returned to LaraCopilot with a Connected status showing your Figma handle and the date connected
The connection authorizes LaraCopilot to read file content (rendering frames and reading their nodes) on your behalf. One Figma account is connected per team and shared by all team members.
If the page shows Not configured, the Figma integration hasn't been set up on this instance. The OAuth client credentials are configured by the administrator — contact support if you need it enabled.
Step 2 — Copy a frame link from Figma
LaraCopilot imports a single frame at a time, identified by its link.
- Open your design in Figma
- Right-click a frame → Copy link to selection
- The copied link points to that specific frame
Use Design file links only. The link must point to a specific frame (Copy link to selection), not the whole file. Figma Make links aren't supported.
Step 3 — Import the design in chat
- Open a project's chat (IDE)
- Click the Figma button to open the Import from Figma dialog
- Choose an import mode (see below)
- Paste your Figma frame link
- Click Import Figma frame
The import is attached to your next message as a "Figma design" chip. Type what you want built — for example, "build this screen as a Blade page" — and send. The AI receives the design context along with your prompt.
Import modes
| Mode | What it sends | When to use |
|---|---|---|
| Code | A render of the frame plus its exact styles (colors, fonts, layout) | Default — highest fidelity, best for pixel-accurate UI |
| Screenshot | A rendered image of the frame only | Lighter; fewer Figma API calls and more forgiving of rate limits |
Code mode makes an extra call to Figma to read the frame's structure, so it's more detailed but more likely to hit rate limits on busy or free-tier accounts. Screenshot mode skips that call and just sends the image.
How LaraCopilot uses the import
When you import a frame, LaraCopilot builds the design context and attaches it to the run:
figma-design.png— a render of the frame, sent as a native image (vision) inputfigma-design-spec.txt— a structured spec of the frame's styles and layout, injected into the prompt (Code mode only)
These are stored privately with the run's other attachments and cleaned up when the run finishes. The AI uses them as reference to generate matching UI — it does not modify your Figma file.
Rate limits
Figma's import endpoints are rate-limited by your Figma plan (around 5 requests per minute on the free tier). If an import fails, wait a moment and retry. Using Screenshot mode reduces the number of calls per import.
Disconnecting
To remove the connection, open Integrations → Figma and click Disconnect. The stored authorization is deleted and "Import from Figma" is disabled for the team until you reconnect.
Disconnecting in LaraCopilot does not revoke the app inside Figma. To fully revoke access, go to your Figma account settings (Settings → Security/Connected apps) and remove LaraCopilot.
Troubleshooting
| Problem | Solution |
|---|---|
| "Connect your Figma account before importing a design" | Connect Figma from Integrations → Figma first. |
| "Copy the link to a specific frame in Figma" | The link points to the file, not a frame. Right-click a frame → Copy link to selection. |
| "Could not import that Figma frame" | Confirm the frame is shared with your connected Figma account, then retry. |
| Import fails intermittently | You've likely hit Figma's rate limit — wait a minute and retry, or switch to Screenshot mode. |
| Figma button / dialog says "not configured" | The integration isn't enabled on this instance — contact support. |
| Figma Make link doesn't work | Only Design file frame links are supported. |
Twilio
Connect your Twilio account so the LaraCopilot AI agent and your generated apps can send SMS, WhatsApp, and OTP messages to your users.
Supabase Postgres
Swap the default SQLite database for a Supabase-hosted Postgres database in any LaraCopilot project with a single toggle — no manual config needed.