Figma
Turn a Figma frame into a working React + Tailwind page
Paste a Figma frame link in the import dialog. Swarmz reads the design through the Figma API, exports the assets to your project, and writes a React + Tailwind page that matches the layout, colors, and typography.
Before you start
You need a Figma account on the same email you sign in to Swarmz with, or one you have explicit access to. Free Figma accounts work. The file you want to import must be readable by that account. Public link sharing is not enough on its own (more on that in troubleshooting).
Connect Figma
Open integrations
In the top bar click Settings, then open the Integrations tab. Find Figma in the list and click it.
Authorize Swarmz
Click Connect. A Figma popup opens. Sign in if Figma asks. Pick the workspace that holds the files you want to import, then click Allow access.
The workspace you pick decides which files Swarmz can read. If your designs live in two workspaces, pick the one where most of the work happens. You can disconnect and reconnect later to switch.
Confirm the connection
Back in the integrations panel, Figma shows a green dot and the email of the connected account. You are ready to import.
Prepare your Figma file
A clean file imports better than a messy one. You do not need to refactor everything. Five small habits make a big difference.
Use frames, not pages
Wrap each screen or section in a Frame (shortcut F). Swarmz imports a single frame at a time. A free-floating mockup outside any frame can still work, but a named frame is faster and cleaner.
Turn on auto-layout
Select a group and press Shift + A to convert it to Auto Layout. Swarmz translates auto-layout into flex and grid CSS. Without it, the agent has to guess at spacing and alignment.
Name layers like UI components
Rename layers to match what they are. Header, Pricing card, CTA button, Avatar. Swarmz uses these names to pick semantic roles and to write better component names. A layer called Rectangle 47 gives the agent nothing to work with.
Flatten icons to vectors
Custom icons should be SVG vectors, not rasterized images. Select the icon and check the right panel. If you see Image, the icon is a PNG and will import as a file rather than an inline SVG. Replace it with the original vector or paste the SVG back in.
Keep one frame per screen
If you want a full marketing site, make one frame per page (Home, Pricing, Login). Import them one at a time, or paste several links in one chat message and ask the agent to wire them up with routing.
Import a frame
Copy the frame link
In Figma, click the frame you want. Right-click and choose Copy link to selection. The URL ends with ?node-id=..., which tells Swarmz which exact node to read.
You can also copy the URL straight from the browser address bar after clicking the frame.
Open the import dialog
In Swarmz, click Import from Figma in the prompt box. From the dashboard, the same button creates a new project for you and imports into it.
Paste and import
Paste the URL in the Frame URL field. Leave Send rendered preview on for the best output. Click Import (or Create and import from the dashboard).
The dialog closes. The agent fetches the frame, writes the assets to public/figma-assets/, and starts generating the page. You can watch the run in the chat panel.
Send rendered preview
This toggle is on by default. When on, Swarmz also sends a rendered PNG of the frame to the agent. The agent compares its output to the actual pixels, which catches small things the JSON spec misses (gradients, shadows, custom illustrations).
Cost: about five extra credits per section. For a single-frame import that is a rounding error. For a long page that splits into ten sections, it adds up. Turn it off if you want the cheaper text-only path.
What gets translated
| In Figma | In your project |
|---|---|
| Frame with auto-layout | A React component with flex or grid CSS |
| Text layer | An h1/h2/p with the right Tailwind classes for size, weight, line height |
| Solid fill | Tailwind color, mapped to your theme tokens when one matches |
| Vector layer | An SVG file in public/figma-assets/vectors/ |
| Image fill | A PNG/JPG in public/figma-assets/images/, referenced by path |
| Drop shadow | A shadow-... class or inline style |
| Component instance | A React component named after the Figma component |
The agent maps Figma colors to your existing Tailwind theme when there is a clear match. Tell it directly if you want stricter mapping: "use my existing theme tokens instead of the exact hex values".
Pricing
Two charges land on your account when you import:
- Asset transfer:
1 credit per MBof images and vectors moved into your project. A typical frame ships under five MB. - Generation tokens: the same per-token price as any chat run. A small frame costs around ten credits. A large frame split into sections costs more.
If preview is on, each section adds one image-input charge (roughly five credits). The cost shows in the toast that fires after the import completes.
Troubleshooting
Tips
- Run with Send rendered preview on for a first import, then turn it off on follow-ups where you only want small tweaks.
- Build a Figma file the same way you would build a real page: real text, real images, named layers. The closer the file is to a finished design, the closer the import will be to a finished page.
- For multi-page sites, paste two or three links in one chat message and tell the agent how to route them. It will wire up the routes for you.