EP06. “Dev Mode、导出素材，与把设计交给 Elementor 制作”

首页 › PC 工具 › Graphic Design · Figma · EP06

约 9 分钟· #EP06#Figma

设计稿确认后，下一步是「做成真的网站」——开发者需要的尺寸、颜色、字体、间距、图片素材，全部可以在 Figma 里直接拿
导出（Export）所有方案都能用；Dev Mode（给开发者看的检视模式，含 CSS 数值、标记「可以开发」）需要 Professional 以上方案的 Full 或 Dev 席位
Figma 设计不会自动变成 WordPress 网站，常见做法是照着设计在 Elementor 里重建；用 EP03 的 Auto Layout 设计，搬到 Elementor Container 时几乎一比一对应
设计文件整理得好（命名、样式、组件），交接时少很多来回确认

重点内容

导出图片与图标（所有方案）

选取要导出的图层（图片、图标、整个 Frame）
右侧 Design 面板最下面 Export → 按 +
选倍数和格式，按 Export 图层名
批量导出：Ctrl+Shift+E，一次导出所有设定过 Export 的图层

格式	适合	备注
PNG	有透明背景的图、截图	网站用可以再转 WebP 压缩
JPG	照片	没有透明背景
SVG	图标、Logo	向量，放大不糊、文件小，WordPress 上传 SVG 要装插件（例如 Safe SVG）
PDF	印刷、交给客户看	—

倍数	用途
1x	原始尺寸
2x	高解析屏幕（手机、Retina 屏）显示较清晰，最常用
自订宽度（例如 `1920w`）	固定输出宽度，例如横幅图

💡 导出网站用的照片，建议 2x 导出后再用压缩工具（或 WordPress 图片压缩插件）转 WebP，兼顾清晰与速度。

Dev Mode（Professional 以上）

右上角切换 Dev Mode，或按 Shift+D
选取任何物件，右侧 Inspect 面板显示：
- 尺寸、位置、间距（鼠标移到别的物件上会显示距离）
- 颜色（HEX、RGB）、字体、字重、行高
- Code 区块：自动产生的 CSS（也可以切换成 iOS、Android 的代码）
Assets：自动侦测图标、图片，可以直接下载
Ready for dev：设计师把完成的 Frame 标记为「可以开发」，开发者在 Dev Mode 首页只看到这些，不会误用还在改的设计
设计有修改时，Dev Mode 可以比较前后差异（Compare changes）
Dev Mode 里也能对选取的图层设定 Export（Inspect 分页的 Export 区块按 +）

📌 Starter 免费方案没有 Dev Mode，不过选取物件后在右侧 Design 面板也能看到基本的尺寸、颜色、字体，搭配导出功能，个人项目通常已经够用。

从 Figma 到 Elementor：对照表

Figma	Elementor
最上层 Frame（Desktop / Phone）	页面 / 响应式模式（Desktop、Tablet、Mobile）
Auto Layout Frame	Container（Flexbox）
Auto Layout 方向 Vertical / Horizontal	Container Direction：Column / Row
Gap / Padding	Container 的 Gap / Padding
Alignment	Justify Content / Align Items
Hug / Fill / Fixed	Width：auto / 100%（或 Grow）/ 固定 px
Grid 方向	Grid Container
Color styles	Site Settings → Global Colors
Text styles	Site Settings → Global Fonts
组件（按钮、卡片）	Global widget / 保存为模板

交接流程

flowchart LR
    subgraph D["设计完成"]
        D1["整理图层命名<br/>建立 Color / Text styles"]
    end
    subgraph H["交接"]
        H1["标记 Ready for dev<br/>或分享 can view 链接"]
        H2["导出图片 / SVG 图标"]
    end
    subgraph E["Elementor 制作"]
        E1["先设 Global Colors / Fonts"]
        E2["用 Container 照 Auto Layout 重建"]
        E3["Device Mode 检查手机版"]
    end
    D --> H --> E

交接前的检查清单：

✅ Desktop 和 Phone 两个版本都有设计（至少首页和主要页面）
✅ 颜色、文字都套了样式，没有「差不多的蓝色」出现三种色码
✅ 图层和 Frame 命名清楚
✅ 按钮 Hover、表单错误提示等状态都有画出来
✅ 图片素材已导出，或标记可在 Dev Mode 下载

插件与自动转换工具

Figma Community 有第三方插件号称可以把 Figma 设计「一键转成 Elementor」或 HTML
转出来的结构、命名、响应式设定品质差异很大，常常要大量修改；先用一个小区块测试，再决定要不要依赖
不管用不用插件，理解上面的对照表，才看得懂转出来的结果、知道哪里要修

学完你会

✅ 用 Export 导出 PNG、JPG、SVG，并选对倍数
✅ 知道 Dev Mode 能提供什么（Inspect、CSS、Assets、Ready for dev）
✅ 把 Figma 的 Auto Layout、样式、组件对应到 Elementor
✅ 按检查清单做好设计交接

常见错误

❌ 以为 Figma 可以直接「发布」成 WordPress 网站：要在 Elementor 或用代码重建。
❌ 图标导出成 JPG：背景会变白、放大会糊，图标用 SVG。
❌ 照片只导出 1x：在手机高解析屏幕上会糊，网站图片通常用 2x。
❌ 只设计 Desktop 版：开发者只能自己猜手机版怎么排。
❌ Elementor 里每个标题各自设颜色：先把 Figma 的样式设成 Global Colors / Fonts，之后改色才方便。

Sources

官方文档：

📝 测验一下共 6 题