> For the complete documentation index, see [llms.txt](https://docs.jetadmin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jetadmin.io/classic-app-builder/component-designer/import-figma-design.md).

# Import Figma Design

Design in Figma, launch in Jet. Turn your static designs into clean, production-ready web apps with the Figma to Jet plugin.

{% embed url="<https://www.youtube.com/watch?v=F5RYVPibse8>" %}

The Figma to Jet plugin lets you turn your static designs into clean, production-ready Jet components. Add Jet Interactions, wire up content using your data source, and one-click publish your fully functional web apps.

{% @arcade/embed flowId="YjE6uvovuWQ36UpyBO3o" url="<https://app.arcade.software/share/YjE6uvovuWQ36UpyBO3o>" %}

### **Here’s how it works:**

1. **Install + connect.** Pass Figma Plugin key access to the Jet apps you’ll use to transfer designs from Figma to Jet.
2. **Copy + paste.** Design with auto layout in Figma, then easily translate your designs to Jet as responsive components — you can apply pixel-perfect adjustments later.
3. **Polish + publish.** Bring your static designs to Jet, wire content with your data source, and one-click publish your fully functional web apps.

### **Additional features:**

* Auto layout enables responsive across varius devices.
* Your styling, layouts, colors, text, and images will transfer seamlessly when you paste them into Jet.

### What is not supported:

* Masks
* Shapes (import as SVG at the moment)
* Custom border dashes
* Layer/Background blur
* Border join style

### **Workflow tips:**

* Pre-built layout and structure templates are built with auto layout and are fully responsive when pasted into Jet.
* All Vector layers will be exported as SVGs. This can be handy for complex multi-layer graphics.

### **Caveats and future improvements**

* The plugin doesn’t translate prototyping interactions from Figma. Users can apply Jet Interactions after pasting designs over.
* The plugin doesn’t transfer custom fonts. If you’re using custom fonts in Figma, you’ll need to move to Google Fonts before or after importing.

###


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.jetadmin.io/classic-app-builder/component-designer/import-figma-design.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.