# Import from Figma

For teams that design in Figma, CodeWords helps you move from static design to working app much faster. Share a Figma frame, explain the goal, and Cody generates a deployable web app.<br>

### How it works

Instead of manually translating designs into code, Cody reads your Figma frame, extracts visual and structural data, and builds a matching app.

### The process

1. **Connect Figma:** Connect your Figma account through OAuth in CodeWords.
2. **Share a frame link:** Paste a Figma link to a specific frame or component, for example:\
   \&#xNAN;*<mark style="color:blue;"><https://www.figma.com/design/XYZ/File?node-id=123:456></mark>*
3. **Describe what to build:**                                                                                                                                             Tell Cody what you want, such as:                                                                                                      “Build a functional web app from this design. Match layout, colors, and typography.”
4. **Cody extracts design data**\
   Cody analyzes both the rendered frame and the design structure, including:
   * Layout and component hierarchy
   * Colors, typography, and spacing
   * Text content, assets, and design tokens
   * Responsive hints from auto-layout and constraints
5. **Cody builds and deploys**\
   Cody generates a Next.js app with Tailwind CSS, shows a preview, and deploys to <mark style="color:blue;">\*.codewords.run</mark> after confirmation.

#### What gets extracted

* Layout and structure
* Colors, typography, and spacing
* Components, text, and assets
* Auto-layout, constraints, and design tokens (when available)

#### Tips for best results

* Share a specific frame link.
* Use auto-layout in Figma.
* Name layers clearly.
* Share multiple frames for multi-page flows.
* Describe interactions like hover, click, and navigation.

#### Example prompt

> My Figma is connected. Please build an exact web app from this frame: *<mark style="color:blue;"><https://www.figma.com/design/XYZ/My-App?node-id=123:456></mark>* Match colors, typography, and layout closely.Deploy it when ready.

#### Limitations

* Figma variables may require additional scope support; if unavailable, Cody uses fallback extraction.
* Prototype transitions and overlays are not imported automatically.
* External paid fonts may need substitutions.
* Smart Animate does not transfer directly; describe desired animations in your prompt.

<br>


---

# 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.codewords.ai/website-builder/import-from-figma.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.