# Convert Figma Designs into Live Websites | Creght Visual Documentation

> We’ve prepared a complete tutorial series that covers the full journey from design optimization to live publishing.…

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

[Changelog](/blogs.md)

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

Basic

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

Design

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

CMS

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

Site Setting

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

AI

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

Tool

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

Tool/

# Convert Figma Designs into Live Websites

We’ve prepared a **complete tutorial series** that covers the full journey from design optimization to live publishing.

📖 **Format**: Video + Step-by-step guides

📂 **Includes**: Figma source files for clear before-and-after comparisons

[➡️ **\[Get File\]**](https://www.figma.com/community/file/1529413044116674277/creght-assets)

## Tutorial Outline

### 1\. Optimize Your Design ✅

Learn the **3 essential principles** for converting your design into a responsive layout.

[➡️ **\[View Tutorial\]**](https://www.creght.com/docs/figma-autolayout)

### 2\. Generate Your Website in One Click ✅

Use the **Figma to Creght plugin** to publish your site instantly.

[➡️ **\[View Tutorial\]**](https://www.creght.com/docs/response-site)

### 3\. Add Interactions & Animations

- Button hover effects ✅

[➡️ **\[View Tutorial\]**](https://www.creght.com/docs/button)
- Responsive navigation bar  ✅

[➡️](https://www.creght.com/docs/button) [**\[View Tutorial\]**](https://www.creght.com/docs/nav)
- Accordion panels ⏳ (In progress)
- Page animations: entry & scroll effects ⏳ (In progress)

✨ By following this series, you’ll master the **end-to-end workflow**:

**Design → Responsive Layout → Interactive Effects → Live Website**

You’ll gain practical skills in:

- Creating responsive designs in Figma
- Converting designs into responsive websites
- Implementing common interactive effects

On this page

- [Tutorial Outline](#tutorial-outline)
- [1\. Optimize Your Design ✅](#1-optimize-your-design)
- [2\. Generate Your Website in One Click ✅](#2-generate-your-website-in-one-click)
- [3\. Add Interactions & Animations](#3-add-interactions-animations)

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

This website is built with [Creght](/)

[Discord](https://discord.gg/Qvq2nmZNnb)

## Links

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

## Resources

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

## Terms

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

## Social Media

- [Twitter](https://twitter.com)
- [Facebook](https://www.facebook.com)
- [LinkedIn](https://www.linkedin.com)

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