figma转代码（专业版） Figma to Code Pro

About this plugin

【Introduction】Figma to Code Pro is a powerful developer handoff plugin that converts your Figma designs into production-ready code with a single click. Whether you're building with plain HTML/CSS, React, Vue 3, or Tailwind CSS, this plugin generates all four code formats simultaneously — no switching, no waiting.【Function Description】One-Click Multi-Format Generation — Click "Generate All" to instantly produce HTML/CSS, React TSX, Vue 3 SFC, and Tailwind HTML at the same time, with a real-time progress bar tracking each step.Design Token Extraction — Automatically extracts colors, font sizes, font families, spacings, and border radii from your selection and exports them as CSS variables and a JSON token file.Live Preview — Instantly preview the generated HTML in a sandboxed iframe with a checkerboard transparency background. Use the zoom slider to inspect at any scale.Smart Asset Export — Nodes prefixed with [icon_] are auto-exported as inline SVG; nodes prefixed with [img_] are exported as PNG (2×). Assets are embedded directly in the preview and download files.Per-Tab Download — Download the appropriate file for each tab: .html for HTML, .tsx for React, .vue for Vue, tailwind.html for Tailwind, and tokens.json for design tokens.Copy with Feedback — Every code block has a copy button that switches to a checkmark icon and "copied!" confirmation on success, then restores automatically after 1.5 seconds.21-Language UI — The plugin interface supports English, 简体中文, 繁體中文, 日本語, 한국어, Español, Français, Deutsch, Русский, हिन्दी, العربية, and 11 more languages, including RTL layout for Arabic and Hebrew.【How to Use】Select one or more layers in Figma.Open Figma to Code Pro from the Plugins menu.Click Generate All — the plugin exports assets and generates all code formats in sequence.Switch between the HTML / React / Vue / Tailwind / Tokens / Preview tabs to view each output.Use the Copy button on any code block to copy code to your clipboard.Use the Download button to save the current tab's file locally.Use the zoom slider in the Preview tab to inspect your design at different scales.【Notes】Name icon layers with the prefix icon_ (e.g. icon_arrow) to export them as SVG. Name image layers with img_ to export as PNG.Layers without Auto Layout (NONE layout mode) are rendered with position: relative on the parent and position: absolute on children — this is intentional and matches Figma's free-form layout.The plugin generates code from Figma's layer structure. Complex nested components, masks, and advanced blend modes may not fully translate.The preview uses a sandboxed iframe. External fonts referenced in your design will not load unless embedded.Code generation happens locally in your browser — no data is sent to any server.【介绍】Figma to Code Pro 是一款专为设计师与开发者协作打造的代码导出插件。只需一键，即可将 Figma 设计稿同时转换为 HTML/CSS、React TSX、Vue 3 SFC 和 Tailwind HTML 四种格式的代码，并自动提取设计 Token，显著提升设计到开发的交付效率。【功能说明】一键多格式生成 — 点击"一键生成全部"，同时输出 HTML/CSS、React、Vue 3、Tailwind HTML，进度条实时反馈每个生成步骤的状态。设计 Token 提取 — 自动从选中图层中提取颜色、字号、字体、间距、圆角等 Token，导出为 CSS 变量和 JSON 文件。实时预览 — 在内置沙盒预览框中即时预览生成的 HTML 效果，支持棋盘格透明背景，可通过缩放滑块查看任意比例下的效果。智能素材导出 — 以 [icon_] 为前缀的图层自动导出为内联 SVG；以 [img_] 为前缀的图层导出为 2× PNG，并直接嵌入预览和下载文件中。按 Tab 下载 — 根据当前选中的 Tab 下载对应文件：HTML 下载 .html，React 下载 .tsx，Vue 下载 .vue，Tailwind 下载 .html，Token 下载 tokens.json。复制反馈 — 每个代码块均配有复制按钮，复制成功后图标切换为勾选状态并显示"已复制"，1.5 秒后自动恢复。21 种语言界面 — 插件界面支持简体中文、繁體中文、English、日本語、한국어、Español、Français、Deutsch、Русский、हिन्दी、العربية 等 21 种语言，阿拉伯语和希伯来语支持从右到左（RTL）布局。【使用方法】在 Figma 中选中一个或多个图层。从插件菜单启动 Figma to Code Pro。点击一键生成全部，插件将依次导出素材并生成所有代码格式。切换顶部 HTML / React / Vue / Tailwind / Tokens / Preview Tab 查看对应输出。点击代码块右上角的复制按钮，将代码复制到剪贴板。点击底部下载按钮，将当前 Tab 的文件保存到本地。在 Preview Tab 中使用缩放滑块，以不同比例检查预览效果。【注意事项】图标图层需命名为 icon_ 前缀（如 icon_arrow）以导出 SVG；图片图层需命名为 img_ 前缀以导出 PNG。未启用 Auto Layout 的 Frame，子图层会以 position: absolute 定位，父容器自动设置 position: relative，这与 Figma 自由布局的行为一致。插件基于图层结构生成代码，嵌套组件、蒙版、混合模式等高级效果可能无法完整还原。预览框采用沙盒 iframe，设计稿中引用的外部字体（如非系统字体）在预览中可能不会加载。所有代码均在本地浏览器中生成，不向任何服务器上传数据。