figma-ui-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFigma UI 设计自动化
Figma UI Design Automation
功能说明
Feature Description
此技能专门用于自动化 Figma 设计工作流，包括：
- 设计系统和组件库创建
- 自动化设计稿生成
- 设计资源导出
- 设计规范文档生成
- Figma API 集成
- 设计到代码的转换
This skill is specifically designed to automate Figma design workflows, including:
- Design system and component library creation
- Automated design draft generation
- Design resource export
- Design specification document generation
- Figma API integration
- Design-to-code conversion
使用场景
Usage Scenarios
- "创建一个登录页面的 Figma 设计"
- "生成设计系统组件库"
- "从 Figma 导出所有图标"
- "将 Figma 设计转换为 React 组件"
- "自动化设计审查流程"
- "生成设计规范文档"
- "Create a Figma design for a login page"
- "Generate design system component library"
- "Export all icons from Figma"
- "Convert Figma design to React components"
- "Automate design review process"
- "Generate design specification documents"
核心功能模块
Core Function Modules
1. 设计系统
1. Design System
- 颜色系统：定义品牌色、语义色、中性色
- 字体系统：字体家族、字号、行高、字重
- 间距系统：统一的间距规范（4px、8px、16px 等）
- 组件库：按钮、表单、卡片等可复用组件
- 图标库：统一的图标集合
- Color System: Define brand colors, semantic colors, neutral colors
- Typography System: Font families, font sizes, line heights, font weights
- Spacing System: Unified spacing specifications (4px, 8px, 16px, etc.)
- Component Library: Reusable components like buttons, forms, cards
- Icon Library: Unified icon collection
2. 页面设计
2. Page Design
- 布局设计：响应式布局、栅格系统
- 交互设计：原型和交互流程
- 动效设计：过渡动画和微交互
- 适配设计：多端适配（Web、移动端）
- Layout Design: Responsive layout, grid system
- Interaction Design: Prototypes and interaction flows
- Motion Design: Transition animations and micro-interactions
- Adaptation Design: Multi-end adaptation (Web, mobile)
3. 资源导出
3. Resource Export
- 图片导出：PNG、JPG、SVG 格式
- 图标导出：SVG 图标和图标字体
- 切图导出：@1x、@2x、@3x 倍图
- 样式导出：CSS、SCSS 变量
- Image Export: PNG, JPG, SVG formats
- Icon Export: SVG icons and icon fonts
- Slice Export: @1x, @2x, @3x resolution images
- Style Export: CSS, SCSS variables
4. 设计到代码
4. Design to Code
- 组件生成：React、Vue、Angular 组件
- 样式生成：CSS、Tailwind、Styled Components
- 代码规范：遵循团队代码规范
- 类型定义：TypeScript 类型
- Component Generation: React, Vue, Angular components
- Style Generation: CSS, Tailwind, Styled Components
- Code Standards: Follow team code specifications
- Type Definitions: TypeScript types
设计工作流程
Design Workflow
标准设计流程
Standard Design Process
- 需求分析：理解产品需求和用户场景
- 信息架构：规划页面结构和导航
- 线框图：绘制低保真原型
- 视觉设计：应用设计系统创建高保真稿
- 交互原型：添加交互和动效
- 设计评审：团队审查和反馈
- 开发交付：导出资源和标注
- Requirement Analysis: Understand product requirements and user scenarios
- Information Architecture: Plan page structure and navigation
- Wireframing: Create low-fidelity prototypes
- Visual Design: Apply design system to create high-fidelity drafts
- Interactive Prototype: Add interactions and motion effects
- Design Review: Team review and feedback
- Development Delivery: Export resources and annotations
组件库建设流程
Component Library Construction Process
- 组件规划：确定需要的组件类型
- 设计规范：定义组件的设计规则
- 组件设计：创建基础组件
- 变体管理：定义组件的不同状态
- 文档编写：使用说明和示例
- 发布更新：版本管理和更新日志
- Component Planning: Determine required component types
- Design Specifications: Define component design rules
- Component Design: Create base components
- Variant Management: Define different states of components
- Documentation Writing: Usage instructions and examples
- Release Updates: Version management and change logs
最佳实践
Best Practices
设计规范
Design Specifications
- 命名规范：使用清晰的图层命名
- 组织结构：合理的页面和图层组织
- 组件化：最大化组件复用
- 自动布局：使用 Auto Layout 提高效率
- 约束设置：正确设置响应式约束
- Naming Conventions: Use clear layer naming
- Organization: Logical page and layer organization
- Componentization: Maximize component reuse
- Auto Layout: Use Auto Layout to improve efficiency
- Constraint Settings: Correctly set responsive constraints
协作规范
Collaboration Specifications
- 文件组织：项目、页面、组件分类清晰
- 版本管理：使用 Figma 版本历史
- 评论反馈：使用评论功能沟通
- 权限管理：合理设置查看和编辑权限
- 团队库：共享设计系统和组件
- File Organization: Clear classification of projects, pages, and components
- Version Management: Use Figma version history
- Comment Feedback: Use comment function for communication
- Permission Management: Set appropriate view and edit permissions
- Team Library: Share design systems and components
性能优化
Performance Optimization
- 图层优化：减少不必要的图层
- 效果使用：谨慎使用阴影和模糊
- 图片优化：压缩大图片
- 组件实例：使用组件实例而非复制
- Layer Optimization: Reduce unnecessary layers
- Effect Usage: Use shadows and blurs cautiously
- Image Optimization: Compress large images
- Component Instances: Use component instances instead of copying
设计系统示例
Design System Examples
颜色系统
Color System
javascript
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'
}
};javascript
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'
}
};字体系统
Typography System
javascript
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
}
};javascript
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
}
};间距系统
Spacing System
javascript
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'
};javascript
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 使用
Figma API Usage
获取文件内容
Get File Content
javascript
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const data = await response.json();javascript
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const data = await response.json();导出图片
Export Images
javascript
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();javascript
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();获取样式
Get Styles
javascript
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY/styles',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const { meta } = await response.json();javascript
const response = await fetch(
'https://api.figma.com/v1/files/FILE_KEY/styles',
{
headers: {
'X-Figma-Token': 'YOUR_TOKEN'
}
}
);
const { meta } = await response.json();设计到代码转换
Design to Code Conversion
React 组件生成
React Component Generation
jsx
// 从 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>;
};jsx
// 从 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 变量生成
CSS Variable Generation
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);
}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);
}常用插件推荐
Recommended Plugins
设计效率
Design Efficiency
- Autoflow：自动生成流程图连线
- Content Reel：快速填充文本和图片
- Unsplash：免费高质量图片
- Iconify：海量图标库
- Autoflow: Automatically generate flowchart connections
- Content Reel: Quickly fill text and images
- Unsplash: Free high-quality images
- Iconify: Massive icon library
开发协作
Development Collaboration
- Figma to Code：设计转代码
- Anima：导出 React/Vue 代码
- Zeplin：设计标注和切图
- Avocode：设计交付平台
- Figma to Code: Design to code conversion
- Anima: Export React/Vue code
- Zeplin: Design annotations and slicing
- Avocode: Design delivery platform
设计系统
Design System
- Design System Manager：管理设计系统
- Stark：无障碍设计检查
- Contrast：对比度检查
- Design System Manager: Manage design systems
- Stark: Accessibility design check
- Contrast: Contrast check
集成场景
Integration Scenarios
1. 自动化设计审查
1. Automated Design Review
- 检查设计规范遵循情况
- 验证颜色和字体使用
- 检查组件一致性
- 生成审查报告
- Check compliance with design specifications
- Verify color and font usage
- Check component consistency
- Generate review reports
2. 设计资源同步
2. Design Resource Synchronization
- 自动导出设计资源
- 同步到代码仓库
- 更新组件库
- 通知开发团队
- Automatically export design resources
- Sync to code repository
- Update component library
- Notify development team
3. 设计文档生成
3. Design Document Generation
- 提取设计规范
- 生成组件文档
- 创建使用指南
- 发布到文档站点
- Extract design specifications
- Generate component documentation
- Create usage guides
- Publish to documentation site
4. 原型测试
4. Prototype Testing
- 生成可交互原型
- 收集用户反馈
- 分析交互数据
- 迭代设计方案
- Generate interactive prototypes
- Collect user feedback
- Analyze interaction data
- Iterate design solutions
注意事项
Notes
- 保持设计文件整洁有序
- 定期清理未使用的组件和样式
- 使用版本控制管理重要变更
- 与开发团队保持密切沟通
- 遵循无障碍设计原则
- 考虑性能和加载速度
- Keep design files clean and organized
- Regularly clean up unused components and styles
- Use version control to manage important changes
- Maintain close communication with the development team
- Follow accessibility design principles
- Consider performance and loading speed