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: 1k-implementing-figma-designs3description: Implements Figma designs 1:1 using OneKey component library (还原设计稿).4---56# Implementing Figma Designs78This skill helps you implement Figma designs 1:1 using the OneKey component library.910## Core Principles1112### Focus on UI First, Data Later1314When implementing Figma designs, prioritize **pixel-perfect UI** over data integration:15161. **Use mock data** - Hardcode data that matches the design exactly172. **Skip i18n** - Use plain strings directly from the design, no `intl.formatMessage`183. **Skip API calls** - No need to fetch real data at this stage194. **Match the design** - Focus on visual accuracy, spacing, colors, and layout2021### What NOT to do2223- Don't worry about where data comes from24- Don't add translation keys (ETranslations)25- Don't create API integration or hooks for fetching26- Don't add complex state management2728### What TO do2930- Hardcode text exactly as shown in Figma31- Create mock data arrays/objects that match the design32- Focus on component structure and styling33- Match spacing, colors, and typography from design3435## Component Lookup (On-Demand)3637When you need to use a component, look up its source and demo:3839### Source Code Location Pattern4041```text42packages/components/src/{category}/{ComponentName}/43```4445Categories:4647- `primitives/` - Button, Icon, Image, Skeleton, Spinner, Stack, Heading, SizeableText48- `forms/` - Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Form, OTPInput49- `actions/` - IconButton, ActionList, Alert, Toast, Popover, SegmentControl, Pagination, Tooltip50- `composite/` - Dialog, Tabs, Banner, Carousel, Table, Stepper51- `content/` - Badge, Progress, Empty, Divider, QRCode, Markdown, LottieView, LinearGradient, BlurView52- `layouts/` - Page, ScrollView, ListView, SectionList, Accordion, Swiper, SearchBar5354### Demo Location Pattern5556```text57packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx58```5960Note: Some demos have different names (e.g., `AccordionGallery.tsx`, `NewTabsGallery.tsx`)6162### How to Look Up a Component63641. **Read the source** to understand props and structure:6566 ```text67 Read: packages/components/src/{category}/{ComponentName}/index.tsx68 ```69702. **Read the demo** for usage examples:7172 ```text73 Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/*{ComponentName}*.tsx74 ```7576## Quick Reference7778### All imports from `@onekeyhq/components`7980```tsx81import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';82```8384### Spacing Tokens8586- `$1` = 4px, `$2` = 8px, `$3` = 12px, `$4` = 16px87- `$5` = 20px, `$6` = 24px, `$8` = 32px, `$10` = 40px8889### Color Tokens9091- Text: `$text`, `$textSubdued`, `$textDisabled`92- Background: `$bg`, `$bgSubdued`, `$bgHover`, `$bgActive`93- Border: `$border`, `$borderSubdued`, `$borderActive`94- Icon: `$icon`, `$iconSubdued`, `$iconDisabled`9596### Font Size Tokens9798Headings (large to small):99100- `$headingXxl`, `$headingXl`, `$headingLg`, `$headingMd`, `$headingSm`, `$headingXs`101102Body text (large to small):103104- `$bodyLg`, `$bodyMd`, `$bodySm`, `$bodyXs`105106With medium weight (append `Medium`):107108- `$bodyLgMedium`, `$bodyMdMedium`, `$bodySmMedium`, `$bodyXsMedium`109110Usage with SizableText:111112```tsx113<SizableText size="$bodyMd">Regular text</SizableText>114<SizableText size="$bodyMdMedium">Medium weight text</SizableText>115<SizableText size="$headingSm">Small heading</SizableText>116```117118### Common Patterns119120**Layout with Stack:**121122```tsx123<YStack gap="$4"> {/* Vertical */}124<XStack gap="$4"> {/* Horizontal */}125<Stack gap="$4"> {/* Default vertical */}126```127128**Mock Data:**129130```tsx131const mockItems = [132 { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },133 { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },134];135```136137**Button Actions:**138139```tsx140<Button onPress={() => console.log('clicked')}>Action</Button>141```142143## Workflow1441451. Analyze the Figma design using Figma MCP1462. Identify which components are needed1473. **Look up each component** - read source and demo on-demand1484. Create mock data matching the design1495. Implement the UI with hardcoded values
onekeyhq