Figma UI 设计自动化
功能说明
此技能专门用于自动化 Figma 设计工作流，包括：
- 设计系统和组件库创建
- 自动化设计稿生成
- 设计资源导出
- 设计规范文档生成
- Figma API 集成
- 设计到代码的转换
使用场景
- "创建一个登录页面的 Figma 设计"
- "生成设计系统组件库"
- "从 Figma 导出所有图标"
- "将 Figma 设计转换为 React 组件"
- "自动化设计审查流程"
- "生成设计规范文档"
核心功能模块
1. 设计系统
- 颜色系统：定义品牌色、语义色、中性色
- 字体系统：字体家族、字号、行高、字重
- 间距系统：统一的间距规范（4px、8px、16px 等）
- 组件库：按钮、表单、卡片等可复用组件
- 图标库：统一的图标集合
2. 页面设计
- 布局设计：响应式布局、栅格系统
- 交互设计：原型和交互流程
- 动效设计：过渡动画和微交互
- 适配设计：多端适配（Web、移动端）
3. 资源导出
- 图片导出：PNG、JPG、SVG 格式
- 图标导出：SVG 图标和图标字体
- 切图导出：@1x、@2x、@3x 倍图
- 样式导出：CSS、SCSS 变量
4. 设计到代码
- 组件生成：React、Vue、Angular 组件
- 样式生成：CSS、Tailwind、Styled Components
- 代码规范：遵循团队代码规范
- 类型定义：TypeScript 类型
设计工作流程
标准设计流程
- 需求分析：理解产品需求和用户场景
- 信息架构：规划页面结构和导航
- 线框图：绘制低保真原型
- 视觉设计：应用设计系统创建高保真稿
- 交互原型：添加交互和动效
- 设计评审：团队审查和反馈
- 开发交付：导出资源和标注
组件库建设流程
- 组件规划：确定需要的组件类型
- 设计规范：定义组件的设计规则
- 组件设计：创建基础组件
- 变体管理：定义组件的不同状态
- 文档编写：使用说明和示例
- 发布更新：版本管理和更新日志
最佳实践
设计规范
- 命名规范：使用清晰的图层命名
- 组织结构：合理的页面和图层组织
- 组件化：最大化组件复用
- 自动布局：使用 Auto Layout 提高效率
- 约束设置：正确设置响应式约束
协作规范
- 文件组织：项目、页面、组件分类清晰
- 版本管理：使用 Figma 版本历史
- 评论反馈：使用评论功能沟通
- 权限管理：合理设置查看和编辑权限
- 团队库：共享设计系统和组件
性能优化
- 图层优化：减少不必要的图层
- 效果使用：谨慎使用阴影和模糊
- 图片优化：压缩大图片
- 组件实例：使用组件实例而非复制
设计系统示例
颜色系统
const colors = {
// 品牌色
primary: {
50: '#E3F2FD',
100: '#BBDEFB',
500: '#2196F3', // 主色
700: '#1976D2',
900: '#0D47A1'
},
// 功能色
success: '#4CAF50',
warning: '#FF9800',
error: '#F44336',
info: '#2196F3',
// 中性色
gray: {
50: '#FAFAFA',
100: '#F5F5F5',
500: '#9E9E9E',
900: '#212121'
}
};字体系统
const typography = {
fontFamily: {
sans: 'Inter, system-ui, sans-serif',
mono: 'Fira Code, monospace'
},
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px'
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75
}
};间距系统
const spacing = {
0: '0',
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
8: '32px',
10: '40px',
12: '48px',
16: '64px',
20: '80px'
};Figma API 使用
获取文件内容
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const data = await response.json();导出图片
const response = await fetch(
'https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=png&scale=2',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const { images } = await response.json();获取样式
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY/styles',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const { meta } = await response.json();设计到代码转换
React 组件生成
// 从 Figma 设计生成的按钮组件
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
padding: 12px 24px;
background: #2196F3;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #1976D2;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
&:active {
transform: translateY(0);
}
&:disabled {
background: #BDBDBD;
cursor: not-allowed;
}
`;
export const Button = ({ children, ...props }) => {
return <StyledButton {...props}>{children}</StyledButton>;
};CSS 变量生成
:root {
/* Colors */
--color-primary: #2196F3;
--color-primary-dark: #1976D2;
--color-success: #4CAF50;
--color-error: #F44336;
/* Typography */
--font-sans: Inter, system-ui, sans-serif;
--font-size-base: 16px;
--font-weight-normal: 400;
--font-weight-bold: 700;
/* Spacing */
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-4: 16px;
--spacing-8: 32px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}常用插件推荐
设计效率
- Autoflow：自动生成流程图连线
- Content Reel：快速填充文本和图片
- Unsplash：免费高质量图片
- Iconify：海量图标库
开发协作
- Figma to Code：设计转代码
- Anima：导出 React/Vue 代码
- Zeplin：设计标注和切图
- Avocode：设计交付平台
设计系统
- Design System Manager：管理设计系统
- Stark：无障碍设计检查
- Contrast：对比度检查
集成场景
1. 自动化设计审查
- 检查设计规范遵循情况
- 验证颜色和字体使用
- 检查组件一致性
- 生成审查报告
2. 设计资源同步
- 自动导出设计资源
- 同步到代码仓库
- 更新组件库
- 通知开发团队
3. 设计文档生成
- 提取设计规范
- 生成组件文档
- 创建使用指南
- 发布到文档站点
4. 原型测试
- 生成可交互原型
- 收集用户反馈
- 分析交互数据
- 迭代设计方案
注意事项
- 保持设计文件整洁有序
- 定期清理未使用的组件和样式
- 使用版本控制管理重要变更
- 与开发团队保持密切沟通
- 遵循无障碍设计原则
- 考虑性能和加载速度