# Import Figma Designs into Talizen | Talizen

> Learn how to import a Figma design into Talizen and quickly generate a live, accessible website.

[Talizen Help](/)

[EN](/docs/figma-import-publish.md)/ [中文](/docs/figma-import-publish.md?lang=zh)

### Start

- [Start your first vibe site](/docs/start.md)
- [AI Credits Guide](/docs/ai-credits-guide.md)
- [How to Choose an AI Model](/docs/ai-model-guide.md)
- [Import and Publish AI Studio Projects](/docs/ai-studio-import-publish.md)
- [Import Figma Designs into Talizen](/docs/figma-import-publish.md)

### Common

- [Prompt library](/docs/prompt-lib.md)
- [Talizen Skill](/docs/talizen-skill.md)
- [Operate Form via Prompt](/docs/form.md)
- [Operate CMS via Prompt](/docs/cms.md)
- [FAQ](/docs/faq.md)
- [Prompting Tips](/docs/prompt.md)

### Backend

- [Add Login, Bookings, and Member Features](/docs/backend.md)
- [Configure OAuth Login: Google and GitHub](/docs/backend-auth.md)
- [Take Payments with Alipay](/docs/alipay-payment.md)

### tips

- [How to Install ReactBits Components](/docs/reactbits.md)

### Developers

[API for AI](/api.md)

Implementation reference for AI coding agents.

Quick StartImport Figma Designs into Talizen

# Import Figma Designs into Talizen

This tutorial explains how to import a **Figma design** into Talizen and quickly generate a live, accessible website.

## 1\. Design Preparation Requirements

To get the best import results, follow these guidelines in Figma:

- Use **Auto Layout** to structure your design.

- Use **Fill / Hug** for element sizing whenever possible, and avoid fixed dimensions when they are not necessary.


## 2\. Steps

### 1\. Install the plugin

Install this plugin in Figma:

- **UI to HTML - Talizen**


![](https://ugc.talizen.com/_assets/site/2037420607548690432/1779782989366__image.png?w=3072&fmt=webp)

After installation, you can find it in the Figma plugin panel.

### 2\. Export the design

- Select the frames you want to convert. Multiple frames are supported.

- Open the **UI to HTML - Talizen** plugin.

- Click **Convert to HTML**.
![](https://ugc.talizen.com/_assets/site/2037420607548690432/1779783000191__image.png?w=3072&fmt=webp)

The system will automatically parse the current design structure.

### 3\. Download the HTML file

After parsing is complete:

- Click **Download**.

- Get the exported **HTML ZIP package (.zip)**.
![](https://ugc.talizen.com/_assets/site/2037420607548690432/1779783027120__image.png?w=3072&fmt=webp)

### 4\. Import into Talizen

Complete the import in Talizen:

- Open the Talizen editor.

- Click **Import** below the input box.

- Select the HTML ZIP package you just downloaded.
![](https://ugc.talizen.com/_assets/site/2037420607548690432/1779783049123__image.png?w=3072&fmt=webp)

After importing:

- Click the **Build** button in the bottom right.

- Wait about 1 minute for the build to finish.
![](https://ugc.talizen.com/_assets/site/2037420607548690432/1779783064454__image.png?w=3072&fmt=webp)

Once the build is complete, the page will be generated successfully.

## 3\. Optimization Suggestions After Import

After importing, optimize the page module by module:

### 1\. Complete functionality

- Add a carousel.

- Improve the mobile menu.


### 2\. Connect data

- Add forms.

- Connect CMS content management.


### 3\. Enhance motion

- Add entrance animations for elements.

- Improve interactive motion details.


### 4\. Improve responsive behavior

- Adjust layouts for different device sizes.

- Make sure the mobile experience works well.


## 4\. Publish the Website

After finishing page adjustments:

- Click **Publish** in the top right.

- Generate a live website with one click.


After publishing succeeds, you can access your website through the generated link.

## Summary

With Talizen, you can:

- Automatically convert Figma to HTML.

- Optimize the page visually.

- Publish the website with one click.


This greatly improves the workflow from design to launch.

[Previous\
\
Import and Publish AI Studio Projects](/docs/ai-studio-import-publish.md) [Next\
\
Operate CMS via Prompt](/docs/cms.md)

On this page

- [1\. Design Preparation Requirements](#header-0)
- [2\. Steps](#header-1)
- [1\. Install the plugin](#header-2)
- [2\. Export the design](#header-3)
- [3\. Download the HTML file](#header-4)
- [4\. Import into Talizen](#header-5)
- [3\. Optimization Suggestions After Import](#header-6)
- [1\. Complete functionality](#header-7)
- [2\. Connect data](#header-8)
- [3\. Enhance motion](#header-9)
- [4\. Improve responsive behavior](#header-10)
- [4\. Publish the Website](#header-11)
- [Summary](#header-12)

Need more help?

[Contact Support](/contact.md)

> 全站页面清单：[/llms.txt](/llms.txt)