> For the complete documentation index, see [llms.txt](https://docs.genvibe.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.genvibe.pro/features/figma-import.md).

# Figma to code

Turn a Figma design into a working app. GenVibe reads your design and builds matching, functional UI in real code.

## Connect Figma

1. In GenVibe, open the Figma connection and authorize your Figma account.
2. Once connected, GenVibe can access the designs you choose to share.

## Import a design

1. Select the Figma design or frame you want to build.
2. Describe what you want done with it, for example:

> Build this screen as a responsive React page, and make the buttons functional.

GenVibe converts the design into components and styles, then renders it live in the preview.

## Tips for better results

* **Clean, well-structured frames** convert best — use clear layers, auto-layout, and named components.
* **Tell GenVibe what's interactive.** A design is static; describe the behavior you want ("the menu should open when the avatar is clicked").
* **Iterate after import.** Treat the imported screen as a starting point and refine it by chatting, just like any other build.

## What to expect

GenVibe aims to faithfully reproduce layout, spacing, colors, and typography, then wires up the interactions you describe. Pixel-for-pixel results depend on how the design is structured — a little refinement afterward is normal.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.genvibe.pro/features/figma-import.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.