implementing-figma-designs

Focus on UI First, Data Later

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

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

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

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)

How to Look Up a Component

1. Read the source to understand props and structure:

```text

Read: packages/components/src/{category}/{ComponentName}/index.tsx

```

1. Read the demo for usage examples:

```text

Glob: packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx

```

All imports 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

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:

```tsx

Regular text

Medium weight text

Small heading

```

Common Patterns

Layout with Stack:

```tsx

{/ Vertical /}

{/ Horizontal /}

{/ 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

console.log('clicked')}>Action

```

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