Connect a service·Updated September 19, 2026·5 min read
How to import a Figma design into a working app
The Figma connector lets the agent read your real file — frames, components, variables — instead of guessing from a screenshot. Here is what it can and cannot see.
Reference documentation
You can always paste a screenshot and say "build this". The connector is better, because the agent reads the actual file: real frame geometry, component structure, and the variables behind your design tokens — not pixels it has to infer.
Connect it
- Check your Figma seat first. Dev Mode output needs a Dev or Full seat. A Viewer seat gets you frames but no specs, and the empty measurements look like a broken connector when they are a licence.
- Customize → Connectors → Figma → Connect. Figma's hosted MCP server uses OAuth 2.1 with dynamic client registration, so you authorise in the browser. There is no key to paste.
- Point the agent at a file and ask for what you want.
The connection sees exactly what your Figma account can see — nothing more. Figma bills seats and usage on your Figma plan; Vibely does not resell them.
What to ask for
| Goal | Prompt |
|---|---|
| A screen from a frame | "Build this screen from the Figma frame I have open" |
| Design tokens | "Import the colour and spacing variables from our Figma library into the Tailwind config" |
| Component parity | "Make the Button component match the Figma component, all five variants" |
| A spec check on work you already built | "Compare the header I built against the Figma frame and list the differences" |
| A mobile screen | "Build the Expo settings screen from the mobile frame in this file" — same read, React Native output |
| Assets | "Pull the illustrations from this frame into the project as SVGs" |
The mobile row is the one worth noticing: the same Figma frame becomes a React Native screen in a native app, not a web page in a phone-shaped box.
It is a build-time connector, not a runtime one
Figma is a chat connector: it runs while you build and is never bundled into your published app. Your app cannot call Figma at runtime through this connection. If the shipped product genuinely needs live design data, that is its own integration and its own API key.
A design that imports well
Auto-layout frames convert far better than absolutely positioned ones, named components convert better than detached copies, and variables convert better than hard-coded hexes. None of that is a Vibely constraint — it is what makes the file readable to anything, including the next designer. Import one screen, review the diff, then do the rest.
Build it while it is fresh
Vibely builds web apps and native iOS and Android apps from the same chat — the mobile ones run on a real handset over Expo Go before they ever reach a store.
See the connectors