Implementing Figma Designs

Core Principles

Focus on UI First, Data Later

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

Component Lookup (On-Demand)

Source Code Location Pattern

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

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

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

• $headingXxl

  ,

  $headingXl

  ,

  $headingLg

  ,

  $headingMd

  ,

  $headingSm

  ,

  $headingXs

• $bodyLg

  ,

  $bodyMd

  ,

  $bodySm

  ,

  $bodyXs

Medium

• $bodyLgMedium

  ,

  $bodyMdMedium

  ,

  $bodySmMedium

  ,

  $bodyXsMedium

<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>

Common Patterns

<YStack gap="$4">        {/* Vertical */}
<XStack gap="$4">        {/* Horizontal */}
<Stack gap="$4">         {/* Default vertical */}

const mockItems = [
  { name: 'Bitcoin', symbol: 'BTC', value: '$21,432.50' },
  { name: 'Ethereum', symbol: 'ETH', value: '$5,892.30' },
];

<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