Figma 前端相关使用

Figma 前端相关使用

Figma 导出 icon

方法一：

• 双击选中需要导出的 icon 群组（group）
• 右键 => 复制为 => png / svg(根据需要复制)

方法二：

• 双击选中需要导出的 icon 群组（group）
• 点击右下角的 export 导出 （点击 + 号），可同时导出 png svg 文件
• 根据自己的需要导出

前端使用 Figma 提效技巧

1. 导出资源更高效

• 导出 SVG / PNG
  • 右键图层 → Copy as SVG → 粘贴到代码中（适合 icon）。
  • 图片 Export 可选择 @2x / @3x，避免失真。
• 组件图标用 Outline stroke，避免 SVG 带冗余 stroke 属性。

---

2. 快速查看和复制样式

• 使用 Inspect 面板 获取：
  • 颜色（hex/rgb/rgba）
  • 字体大小、行高、字重
  • 边距 / padding / border-radius
  • 阴影（box-shadow）
• 可以直接复制 CSS，或使用插件导出 TailwindCSS / JSX。

👉 常用插件：

• CSS to Tailwind：转换为 Tailwind 类名。
• HTML to JSX：快速导出 JSX。

---

3. 尺寸和对齐

• Alt（或 Option）+ hover → 快速查看间距。
• 使用 Shift 对齐 → 读出相对定位。
• 注意 Layout Grid（8px/4px） → 避免“像素跑偏”。

---

4. 组件化思维

• Figma 中的 Component / Variant → 对应前端 React/Vue 组件。
• 命名规范（Button / Input / Card） → 方便映射到组件库（antd、MUI 等）。

---

5. 响应式信息

• Inspect 面板中的 Constraints → 表示元素的自适应方式。
• Auto layout → 对应前端的 flex 布局。
• 示例：

  display: flex;
  gap: 8px;
  padding: 16px;