Figma Community 150,000+ 用户 · 2,300+ 次点赞
Figma 转代码：把设计稿导出为 React、HTML、Flutter 等代码
在 Figma 中选中画板并运行免费的 Codia 插件，或在浏览器上传截图、PDF 或 Figma 文件，即可得到 React、Vue、HTML、Flutter、SwiftUI 或 Android 代码，支持预览、复制和下载。
免费开始 · 无需信用卡 · Figma 免费版也能用
全新 Figma 插件
一份 Figma 文件，直接出一整个应用
重做后的 Codia 插件读取真实的图层、图片和矢量，交回一个能跑起来的项目。
多个画板，一个带路由的应用
最多勾选 20 个画板，每个都会成为一个页面。生成前可以改页面名和路由。
快速转换，不耗模型 token
直接根据布局生成 HTML、React 或 Vue + CSS。需要更多时切换到 AI Agent。
用你的真实素材生成
图片填充和 SVG 矢量按原样从 Figma 导出，代码贴合设计，而不是靠猜。
在 Figma 里预览、复制、下载 ZIP
不离开插件就能看运行效果、逐个文件看代码、复制或下载 ZIP。历史记录保留每个版本。
Dev Mode 里直接可用
开发打开 Dev Mode 就能看到这份设计已生成的代码，不会重新生成，也不额外扣积分。
在网页上继续开发
一键在 Codia Code 打开项目，让 agent 继续完善，还能发布成线上网址。
八种目标平台
Web 预览直接在插件里运行，原生平台提供源码和运行说明。
- HTML
- React
- Vue
- iOS
- Android
- Flutter
- React Native
- macOS
从上传到代码库， 三步到位.
无需手动打标签、调插件或写 Prompt。
导入设计
拖入 PNG、JPG、PDF，或粘贴 Figma 链接。Codia 插件也可直接读取你在 Figma 中选中的画布。
拖入设计稿，或粘贴 Figma 链接
选择目标
选定 React、Vue、HTML、SwiftUI、Flutter 或 Android，并挑一种样式方案（Tailwind、CSS、styled-components、Swift styles、Compose）。
交付代码
预览生成结果，然后复制代码或下载项目，在你自己的编辑器里继续开发。
一份设计， 六种框架原生 产出
同一个组件，在每个框架里都是惯用写法。可点击切换，也可让它自动轮播。
1import { CheckIcon } from 'lucide-react'
2
3export function PricingCard() {
4 return (
5 <div className="rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
6 <h3 className="text-sm font-medium text-zinc-500">Pro</h3>
7 <div className="mt-3 flex items-baseline gap-1">
8 <span className="text-4xl font-semibold tracking-tight">$29</span>
9 <span className="text-zinc-500">/mo</span>
10 </div>
11 <p className="mt-3 text-sm text-zinc-600">
12 Everything you need to ship production UIs, faster.
13 </p>
14 <button className="mt-6 w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white hover:bg-zinc-800">
15 Start free trial
16 </button>
17 <ul className="mt-6 space-y-2 text-sm text-zinc-700">
18 {['Unlimited projects', '6 framework targets', 'Priority support'].map((f) => (
19 <li key={f} className="flex items-center gap-2">
20 <CheckIcon className="h-4 w-4 text-emerald-500" />
21 {f}
22 </li>
23 ))}
24 </ul>
25 </div>
26 )
27}Figma 用户怎么说
评论逐字摘自插件的 Figma Community 页面，保留原文。
I am very impressed by this tool!! it does 75% of the job. Of course, it needs adjustments and cleanup as individual classes are created for every element and it better to consolidate that. But, it would have taken me hours to get even closer to that 75%. … I will be using this tool a lot! Thanks!I checked out a few code generators for Vue.js in the community, and Codia is hands down the best one I've come acrossoh my god, is this perfect plugin. For me, it's the best Android export plug-in in history产品定价
所有产品透明定价，免费开始，按需升级。
Figma 转代码常见问题
关于把 Figma 设计稿转换为 React、HTML、Flutter 和移动端 App 代码的解答。