从 Figma 迁移

概念几乎一一对应

希爱设计（Penpot）与 Figma 的核心设计概念高度相似：画板对应 Frame，组件对应 Component，变体对应 Variants，自动布局对应 Flex Layout，样式与变量对应设计令牌。熟悉 Figma 的用户通常在一两天内即可完全适应。

概念对照

• Frame → 画板（Board）
• Auto Layout → 弹性布局（Flex Layout，基于真实 CSS Flexbox）
• Components / Variants → 组件 / 变体
• Color & Text Styles → 颜色与字体样式库
• Variables → 设计令牌（Design Tokens）
• Constraints → 约束（Constraints）
• Prototype → 原型模式
• Dev Mode → 检查模式（Inspect）
• Plugins → 插件（Plugins）

建议的迁移步骤

1. 先迁移设计系统：把颜色、字体样式、间距整理为设计令牌
2. 重建核心组件：从最基础的按钮、输入框开始，再用变体整合状态
3. 发布为团队共享库，让所有文件可以统一引用
4. 挑选一个中等规模页面做试点，用 SVG 导入或手工复刻验证流程
5. 确认研发侧能从检查面板顺利取到代码后，再批量迁移其他页面
6. 旧文件保留只读访问，新项目全部在希爱设计中启动

差异需要留意

弹性布局底层使用真实的 CSS Flexbox，行为更接近前端实现；钢笔与路径工具的部分快捷键与 Figma 不同；插件 API 不兼容 Figma 插件，需要按希爱设计/Penpot 的插件规范重新开发。