Implementing Figma Designs
This skill helps you implement Figma designs 1:1 using the OneKey component library.
Core Principles
Focus on UI First, Data Later
When implementing Figma designs, prioritize pixel-perfect UI over data integration:
- Use mock data - Hardcode data that matches the design exactly
- Skip i18n - Use plain strings directly from the design, no
intl.formatMessage
- Skip API calls - No need to fetch real data at this stage
- Match the design - Focus on visual accuracy, spacing, colors, and layout
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
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
Component Lookup (On-Demand)
When you need to use a component, look up its source and demo:
Source Code Location Pattern
packages/components/src/{category}/{ComponentName}/
Categories:
primitives/ - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableTextforms/ - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInputactions/ - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltipcomposite/ - Dialog, Tabs, Banner, Carousel, Table, Steppercontent/ - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurViewlayouts/ - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBar
Demo Location Pattern
packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
Note: Some demos have different names (e.g., AccordionGallery.tsx, NewTabsGallery.tsx)
How to Look Up a Component
Read the source to understand props and structure:
Read: packages/components/src/{category}/{ComponentName}/index.tsx
Read the demo for usage examples:
Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx
Quick Reference
All imports from @onekeyhq/components
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
Color Tokens
- Text:
$text, $textSubdued, $textDisabled
- Background:
$bg, $bgSubdued, $bgHover, $bgActive
- Border:
$border, $borderSubdued, $borderActive
- Icon:
$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:
<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
Common Patterns
Layout with Stack:
<YStack gap="$4"> {/* Vertical */}
<XStack gap="$4"> {/* Horizontal */}
<Stack gap="$4"> {/* Default vertical */}
Mock Data:
const mockItems = [
{ name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
{ name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];
Button Actions:
<Button => console.log('clicked')}>Action</Button>
Workflow
- Analyze the Figma design using Figma MCP
- Identify which components are needed
- Look up each component - read source and demo on-demand
- Create mock data matching the design
- Implement the UI with hardcoded values
1---2name: implementing-figma-designs3description: Implements Figma designs 1:1 using OneKey component library. Use when implementing UI from Figma, converting designs to code, or building pages/components from design specs. Triggers on figma, design, UI, 还原设计稿, 切图, 页面, 组件, implementation, Button, Input, Badge, Icon, Stack, XStack, YStack, Dialog, Toast, Alert, Form, Select, Switch, Checkbox, Radio, Tabs, Popover, ActionList, Progress, Skeleton, Image, Avatar, Banner, Carousel, Table, Accordion, ScrollView, ListView, SectionList, Page, Divider, Empty, QRCode, Markdown, Spinner.4---5
6# Implementing Figma Designs
7
8This skill helps you implement Figma designs 1:1 using the OneKey component library.
9
10## Core Principles
11
12### Focus on UI First, Data Later
13
14When implementing Figma designs, prioritize **pixel-perfect UI** over data integration:
15
161. **Use mock data** - Hardcode data that matches the design exactly
172. **Skip i18n** - Use plain strings directly from the design, no `intl.formatMessage`
183. **Skip API calls** - No need to fetch real data at this stage
194. **Match the design** - Focus on visual accuracy, spacing, colors, and layout
20
21### What NOT to do
22
23- Don't worry about where data comes from
24- Don't add translation keys (ETranslations)
25- Don't create API integration or hooks for fetching
26- Don't add complex state management
27
28### What TO do
29
30- Hardcode text exactly as shown in Figma
31- Create mock data arrays/objects that match the design
32- Focus on component structure and styling
33- Match spacing, colors, and typography from design
34
35## Component Lookup (On-Demand)
36
37When you need to use a component, look up its source and demo:
38
39### Source Code Location Pattern
40
41```text
42packages/components/src/{category}/{ComponentName}/
43```
44
45Categories:
46
47- `primitives/` - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableText
48- `forms/` - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInput
49- `actions/` - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltip
50- `composite/` - Dialog, Tabs, Banner, Carousel, Table, Stepper
51- `content/` - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurView
52- `layouts/` - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBar
53
54### Demo Location Pattern
55
56```text
57packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx
58```
59
60Note: Some demos have different names (e.g., `AccordionGallery.tsx`, `NewTabsGallery.tsx`)
61
62### How to Look Up a Component
63
641. **Read the source** to understand props and structure:
65
66 ```text
67 Read: packages/components/src/{category}/{ComponentName}/index.tsx
68 ```
69
702. **Read the demo** for usage examples:
71
72 ```text
73 Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx
74 ```
75
76## Quick Reference
77
78### All imports from `@onekeyhq/components`
79
80```tsx
81import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';
82```
83
84### Spacing Tokens
85
86- `$1` = 4px, `$2` = 8px, `$3` = 12px, `$4` = 16px
87- `$5` = 20px, `$6` = 24px, `$8` = 32px, `$10` = 40px
88
89### Color Tokens
90
91- Text: `$text`, `$textSubdued`, `$textDisabled`
92- Background: `$bg`, `$bgSubdued`, `$bgHover`, `$bgActive`
93- Border: `$border`, `$borderSubdued`, `$borderActive`
94- Icon: `$icon`, `$iconSubdued`, `$iconDisabled`
95
96### Font Size Tokens
97
98Headings (large to small):
99
100- `$headingXxl`, `$headingXl`, `$headingLg`, `$headingMd`, `$headingSm`, `$headingXs`
101
102Body text (large to small):
103
104- `$bodyLg`, `$bodyMd`, `$bodySm`, `$bodyXs`
105
106With medium weight (append `Medium`):
107
108- `$bodyLgMedium`, `$bodyMdMedium`, `$bodySmMedium`, `$bodyXsMedium`
109
110Usage with SizableText:
111
112```tsx
113<SizableText size="$bodyMd">Regular text</SizableText>
114<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
115<SizableText size="$headingSm">Small heading</SizableText>
116```
117
118### Common Patterns
119
120**Layout with Stack:**
121
122```tsx
123<YStack gap="$4"> {/* Vertical */}
124<XStack gap="$4"> {/* Horizontal */}
125<Stack gap="$4"> {/* Default vertical */}
126```
127
128**Mock Data:**
129
130```tsx
131const mockItems = [
132 { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
133 { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
134];
135```
136
137**Button Actions:**
138
139```tsx
140<Button onPress={() => console.log('clicked')}>Action</Button>
141```
142
143## Workflow
144
1451. Analyze the Figma design using Figma MCP
1462. Identify which components are needed
1473. **Look up each component** - read source and demo on-demand
1484. Create mock data matching the design
1495. Implement the UI with hardcoded values
majiayu000