# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.