Back to Details

implementing-figma-designs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Figma Designs

实现Figma设计稿

This skill helps you implement Figma designs 1:1 using the OneKey component library.
本技能可帮助你使用OneKey组件库1:1还原Figma设计稿。

Core Principles

核心原则

Focus on UI First, Data Later

先UI，后数据

When implementing Figma designs, prioritize pixel-perfect UI over data integration:
  1. Use mock data - Hardcode data that matches the design exactly
  2. Skip i18n - Use plain strings directly from the design, no 
    intl.formatMessage
  3. Skip API calls - No need to fetch real data at this stage
  4. Match the design - Focus on visual accuracy, spacing, colors, and layout
实现Figma设计稿时，优先保证像素级精准的UI，再考虑数据集成：
  1. 使用模拟数据 - 硬编码与设计稿完全匹配的数据
  2. 跳过i18n - 直接使用设计稿中的纯文本，不使用
    intl.formatMessage
  3. 跳过API调用 - 此阶段无需获取真实数据
  4. 匹配设计稿 - 专注于视觉准确性、间距、颜色和布局

What NOT to do

请勿执行以下操作

  • Don't worry about where data comes from
  • Don't add translation keys (ETranslations)
  • Don't create API integration or hooks for fetching
  • Don't add complex state management
  • 无需关心数据来源
  • 不要添加翻译键（ETranslations）
  • 不要创建API集成或数据获取hooks
  • 不要添加复杂的状态管理

What TO do

需要执行以下操作

  • Hardcode text exactly as shown in Figma
  • Create mock data arrays/objects that match the design
  • Focus on component structure and styling
  • Match spacing, colors, and typography from design
  • 完全按照Figma中的显示硬编码文本
  • 创建与设计稿匹配的模拟数据数组/对象
  • 专注于组件结构和样式
  • 匹配设计稿中的间距、颜色和排版

Component Lookup (On-Demand)

按需查询组件

When you need to use a component, look up its source and demo:
当你需要使用某个组件时，可查询其源代码和示例：

Source Code Location Pattern

源代码位置规则

text
packages/components/src/{category}/{ComponentName}/
Categories:
  • primitives/
    - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableText
  • forms/
    - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInput
  • actions/
    - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltip
  • composite/
    - Dialog, Tabs, Banner, Carousel, Table, Stepper
  • content/
    - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurView
  • layouts/
    - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBar
text
packages/components/src/{category}/{ComponentName}/
分类：
  • primitives/
    - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableText
  • forms/
    - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInput
  • actions/
    - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltip
  • composite/
    - Dialog, Tabs, Banner, Carousel, Table, Stepper
  • content/
    - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurView
  • layouts/
    - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBar

Demo Location Pattern

示例代码位置规则

text
packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
Note: Some demos have different names (e.g., 
AccordionGallery.tsx
, 
NewTabsGallery.tsx
)
text
packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
注意：部分示例的名称有所不同（例如
AccordionGallery.tsx
、
NewTabsGallery.tsx
）

How to Look Up a Component

如何查询组件

  1. Read the source to understand props and structure:
    text
    Read: packages/components/src/{category}/{ComponentName}/index.tsx
  2. Read the demo for usage examples:
    text
    Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx
  1. 阅读源代码以了解props和结构：
    text
    Read: packages/components/src/{category}/{ComponentName}/index.tsx
  2. 阅读示例代码获取使用示例：
    text
    Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx

Quick Reference

快速参考

All imports from 
@onekeyhq/components

从
@onekeyhq/components
导入组件

tsx
import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';
tsx
import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';

Spacing Tokens

间距令牌

  • $1
    = 4px, 
    $2
    = 8px, 
    $3
    = 12px, 
    $4
    = 16px
  • $5
    = 20px, 
    $6
    = 24px, 
    $8
    = 32px, 
    $10
    = 40px
  • $1
    = 4像素, 
    $2
    = 8像素, 
    $3
    = 12像素, 
    $4
    = 16像素
  • $5
    = 20像素, 
    $6
    = 24像素, 
    $8
    = 32像素, 
    $10
    = 40像素

Color Tokens

颜色令牌

  • Text: 
    $text
    , 
    $textSubdued
    , 
    $textDisabled
  • Background: 
    $bg
    , 
    $bgSubdued
    , 
    $bgHover
    , 
    $bgActive
  • Border: 
    $border
    , 
    $borderSubdued
    , 
    $borderActive
  • Icon: 
    $icon
    , 
    $iconSubdued
    , 
    $iconDisabled
  • 文本：
    $text
    , 
    $textSubdued
    , 
    $textDisabled
  • 背景：
    $bg
    , 
    $bgSubdued
    , 
    $bgHover
    , 
    $bgActive
  • 边框：
    $border
    , 
    $borderSubdued
    , 
    $borderActive
  • 图标：
    $icon
    , 
    $iconSubdued
    , 
    $iconDisabled

Font Size Tokens

字体大小令牌

Headings (large to small):
  • $headingXxl
    , 
    $headingXl
    , 
    $headingLg
    , 
    $headingMd
    , 
    $headingSm
    , 
    $headingXs
Body text (large to small):
  • $bodyLg
    , 
    $bodyMd
    , 
    $bodySm
    , 
    $bodyXs
With medium weight (append 
Medium
):
  • $bodyLgMedium
    , 
    $bodyMdMedium
    , 
    $bodySmMedium
    , 
    $bodyXsMedium
Usage with SizableText:
tsx
<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
标题（从大到小）：
  • $headingXxl
    , 
    $headingXl
    , 
    $headingLg
    , 
    $headingMd
    , 
    $headingSm
    , 
    $headingXs
正文字体（从大到小）：
  • $bodyLg
    , 
    $bodyMd
    , 
    $bodySm
    , 
    $bodyXs
中等字重（添加
Medium
后缀）：
  • $bodyLgMedium
    , 
    $bodyMdMedium
    , 
    $bodySmMedium
    , 
    $bodyXsMedium
SizableText组件使用示例：
tsx
<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>

Common Patterns

常见模式

Layout with Stack:
tsx
<YStack gap="$4">        {/* Vertical */}
<XStack gap="$4">        {/* Horizontal */}
<Stack gap="$4">         {/* Default vertical */}
Mock Data:
tsx
const mockItems = [
  { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
  { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];
Button Actions:
tsx
<Button onPress={() => console.log('clicked')}>Action</Button>
使用Stack布局：
tsx
<YStack gap="$4">        {/* 垂直布局 */}
<XStack gap="$4">        {/* 水平布局 */}
<Stack gap="$4">         {/* 默认垂直布局 */}
模拟数据：
tsx
const mockItems = [
  { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
  { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];
按钮操作：
tsx
<Button onPress={() => console.log('clicked')}>Action</Button>

Workflow

工作流程

  1. Analyze the Figma design using Figma MCP
  2. Identify which components are needed
  3. Look up each component - read source and demo on-demand
  4. Create mock data matching the design
  5. Implement the UI with hardcoded values
  1. 使用Figma MCP分析Figma设计稿
  2. 确定所需组件
  3. 查询每个组件 - 按需阅读源代码和示例
  4. 创建与设计稿匹配的模拟数据
  5. 使用硬编码值实现UI