mcpField
I
implementing-figma-designs

implementing-figma-designs

github.com/onekeyhqデザイン・UI2.5k77 回インストール今日更新
リポジトリ

implementing-figma-designs について

Implementing Figma Designsは、OneKeyコンポーネントライブラリを使ってFigmaの画面をピクセル単位で実装するスキルです。APIやローカライズより先に、モックデータでレイアウトとスタイルを合わせます。

主な機能

  1. 01OneKeyコンポーネントでFigmaデザインを実装
  2. 02データ連携より視覚的な精度を優先
  3. 03モックデータと固定テキストを使用
  4. 04コンポーネントのソースとデモを確認
  5. 05スペーシング、色、文字のトークンを適用

活用シーン

  1. 01FigmaデザインからUIを構築
  2. 02デザインに合わせてコンポーネントを調整
  3. 03API連携前に画面を試作

MCP 対応

ワークフローでは、まずFigma MCPでデザインを分析し、必要なコンポーネントを特定して確認します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onekeyhq/app-monorepo --skill implementing-figma-designs

インストール後、Claude Code で/implementing-figma-designsを入力して読み込まれたか確認します。

詳細

Figma デザインの実装

このスキルを使うと、OneKey コンポーネントライブラリを使用して、Figma デザインを 1:1 で実装できます。

基本原則

まず UI に集中し、データは後から対応する

Figma デザインを実装する際は、データ連携よりもピクセル単位で正確な UIを優先してください。

  1. モックデータを使用する - デザインに完全に一致するデータをハードコードします
  2. i18n は省略する - デザインの文字列をそのまま使用し、intl.formatMessage は使いません
  3. API 呼び出しは省略する - この段階では実際のデータを取得する必要はありません
  4. デザインに合わせる - 視覚的な正確さ、余白、色、レイアウトに集中します
やってはいけないこと
  • データの取得元を気にしないでください
  • 翻訳キー（ETranslations）を追加しないでください
  • データ取得用の API 連携やフックを作成しないでください
  • 複雑な状態管理を追加しないでください
やるべきこと
  • Figma に表示されているテキストをそのままハードコードします
  • デザインに一致するモックデータの配列やオブジェクトを作成します
  • コンポーネントの構造とスタイルに集中します
  • デザインの余白、色、タイポグラフィに合わせます

コンポーネントの検索（必要に応じて）

コンポーネントを使う場合は、そのソースとデモを確認してください。

ソースコードの場所のパターン
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
デモの場所のパターン
packages/kit/src/views/Developer/pages/Gallery/Components/stories/{ComponentName}.tsx

注：デモによっては、名前が異なるものがあります（例：AccordionGallery.tsx、NewTabsGallery.tsx）。

コンポーネントの検索方法

  1. ソースを読むことで、プロパティと構造を確認します。

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

  2. デモを読むことで、使用例を確認します。

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

クイックリファレンス

すべてのインポート元は @onekeyhq/components
import { Button, Stack, XStack, YStack, Icon, ... } from '@onekeyhq/components';
余白トークン
  • $1 = 4px、$2 = 8px、$3 = 12px、$4 = 16px
  • $5 = 20px、$6 = 24px、$8 = 32px、$10 = 40px
カラートークン
  • テキスト：$text、$textSubdued、$textDisabled
  • 背景：$bg、$bgSubdued、$bgHover、$bgActive
  • 枠線：$border、$borderSubdued、$borderActive
  • アイコン：$icon、$iconSubdued、$iconDisabled
フォントサイズトークン

見出し（大から小）：

  • $headingXxl、$headingXl、$headingLg、$headingMd、$headingSm、$headingXs

本文（大から小）：

  • $bodyLg、$bodyMd、$bodySm、$bodyXs

ミディアムウェイトの場合（末尾に Medium を追加）：

  • $bodyLgMedium、$bodyMdMedium、$bodySmMedium、$bodyXsMedium

SizableText での使用例：

<SizableText size="$bodyMd">Regular text</SizableText>
<SizableText size="$bodyMdMedium">Medium weight text</SizableText>
<SizableText size="$headingSm">Small heading</SizableText>
よく使うパターン

Stack を使ったレイアウト：

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

ワークフロー

  1. Figma MCP を使って Figma デザインを分析します
  2. 必要なコンポーネントを特定します
  3. 各コンポーネントを確認します - 必要に応じてソースとデモを読みます
  4. デザインに一致するモックデータを作成します
  5. 値をハードコードして UI を実装します

コメント

Markdown 対応