# Covert Figma to live website | Creght Visual Documentation

> In the previous article , we explored how to create responsive design files in Figma. In this guide, we’ll build on that foundation and show you how to efficien…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/en/help.md)

[Changelog](/en/blogs.md)

[AI](/en/docs/ai/quick-create-first-website.md) [Visual](/en/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/en/docs/get-start.md)
- [How to Register for Creght](/en/docs/signup.md)
- [Creating a Project in Creght](/en/docs/create-site.md)
- [Templates](/en/docs/tpls.md)

Design

- [Using the Editor](/en/docs/editor.md)
- [Basic Operations](/en/docs/operating.md)
- [Layouts in Creght](/en/docs/layout.md)
- [Position in Creght](/en/docs/position.md)
- [Size in Creght](/en/docs/size.md)
- [Breakpoints in Creght](/en/docs/breakpoint.md)
- [Overlays](/en/docs/popover.md)
- [Components in Creght](/en/docs/components.md)
- [Adding Third-Party Fonts](/en/docs/tp-font.md)
- [Duplicate and Deep Copy](/en/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/en/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/en/docs/wxmp.md)

Site Setting

- [Page Settings](/en/docs/page-setting.md)
- [How to Upgrade a Plan](/en/docs/manage-plan.md)
- [SEO Settings](/en/docs/seo-setting.md)
- [Small Files (Site Verification)](/en/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/en/docs/custom-domain.md)
- [How to Complete ICP Filing](/en/docs/beian.md)
- [Server Nodes](/en/docs/website-node.md)
- [How to Switch Sites](/en/docs/pxrp79jqtnyq.md)
- [Localization](/en/docs/localization.md)

AI

- [About Creght AI](/en/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/en/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/en/docs/figma-autolayout.md)
- [Covert Figma to live website](/en/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/en/docs/figma03.md)
- [Compressing Video with FFmpeg](/en/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/en/docs/clarity.md)
- [Creating a Button Hover Effect](/en/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/en/docs/collapse.md)
- [Responsive Navigation Tutorial](/en/docs/nav.md)

Tool/

# Covert Figma to live website

In the [previous article](https://www.creght.com/docs/figma-autolayout), we explored how to create responsive design files in Figma. In this guide, we’ll build on that foundation and show you how to efficiently convert those responsive designs into a fully functional responsive website.

## **Plugin Overview: Figma to Creght**

**「Figma to Creght」** is a productivity plugin designed for both designers and developers. It enables you to convert Figma layouts directly into Creght’s code structure, streamlining the workflow from design to implementation.

🔗 **Plugin link**: [Figma to Creght](https://www.figma.com/community/plugin/1491351514586176743/figma-to-creght?utm_source=chatgpt.com)

## **Step-by-Step Guide**

### **Step 1: Install the Plugin**

1. In Figma, search for **“Figma to Creght”** in the Plugins menu.

![image.png](https://fsu.creght.com/user/3/micJtgIfKFM__image.png)

2. Click **Run** to complete the installation.

![image.png](https://fsu.creght.com/user/3/micJtjfUSoM__image.png)

### **Step 2: Copy Design Layers**

1. In Figma, select the layers you want to export.
2. From the Plugins menu, choose **“Figma to Creght.”**

![image.png](https://fsu.creght.com/user/3/micJtlpEOGC__image.png)

3. Wait for the plugin to parse your selection (this usually takes just a few seconds).
4. Click **Copy to Clipboard** in the popup window.

![image.png](https://fsu.creght.com/user/3/micJtpYaJsH__image.png)


### **Step 3: Paste into Creght**

1. Open the **Desktop Breakpoint** view in the Creght editor.
2. Paste your design using `Ctrl+V` (Windows) or `Cmd+V` (Mac).


> Tip for beginners: Try pasting your design section by section. This makes it easier to locate and fix layout issues.


### **Step 4: Adjust for Responsive Layouts**

After importing, you’ll typically need to fine-tune layouts for different breakpoints. Below are common scenarios and solutions:

**1\. Merged Layers**

- **When to use**: Logos with text, complex illustrations.
- **Solution**: Export as an image and re-upload to Creght.

![image.png](https://fsu.creght.com/user/3/micJtrGFvub__image.png)


**2\. Layout Direction**

- **Mobile view** often requires switching from horizontal to vertical layouts.

![image.png](https://fsu.creght.com/user/3/micJtuGJKvP__image.png)

**3\. Spacing Adjustments**

**Mobile view** usually benefits from reduced padding to maximize space.

![](https://fsu.creght.com/user/3/mhMtxeuPugY__acbe87923265b7fcd52f175c46984066.png)

**4\. Grid System Responsiveness**

Adjust the number of grid columns for each breakpoint.

![image.png](https://fsu.creght.com/user/3/micJtwjlqUD__image.png)

**5\. Font Size Scaling**

**Best practice**: Use text styles to manage font-size changes consistently.

![image.png](https://fsu.creght.com/user/3/micJtyEMVHE__image.png)

**6\. Unit Conversion**

- Convert fixed sizes into percentage or fractional units.

Example: set left card to `2fr` and right card to `1fr`.

![image.png](https://fsu.creght.com/user/3/micJtEnbtSx__image.png)

- Alternatively, define different dimensions per breakpoint (e.g., fixed on desktop, fluid on mobile).

![image.png](https://fsu.creght.com/user/3/micJtJFGkes__image.png)


## **FAQs**

**1\. Why do some images look blurry?**

- **Reason**: The plugin compresses images for faster conversion.
- **Fix**: Re-upload high-resolution images manually.

**2\. Why aren’t all Figma styles replicated?**

Certain Figma features can’t yet be fully translated:

- Multiple fills in Frames (Creght supports only the first).
- New grid layout features (coming soon).
- Gradient angles and advanced effects.

## **Figma vs. Creght Property Mapping**

| **Figma Property** | **Creght Equivalent** |
| --- | --- |
| clipContent | Overflow: hidden |
| Ignore Auto Layout | Set component position to absolute |

## **Conclusion**

By following this tutorial, you’ve converted a Figma design into a responsive web layout in Creght. In the next article, we’ll take it a step further—adding interactivity and animations before publishing your design as a live, responsive website.

On this page

- [Plugin Overview: Figma to Creght](#plugin-overview-figma-to-creght)
- [Step-by-Step Guide](#step-by-step-guide)
- [Step 1: Install the Plugin](#step-1-install-the-plugin)
- [Step 2: Copy Design Layers](#step-2-copy-design-layers)
- [Step 3: Paste into Creght](#step-3-paste-into-creght)
- [Step 4: Adjust for Responsive Layouts](#step-4-adjust-for-responsive-layouts)
- [FAQs](#faqs)
- [Figma vs. Creght Property Mapping](#figma-vs-creght-property-mapping)
- [Conclusion](#conclusion)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)