mcpField
F
figma-swiftui

figma-swiftui

github.com/figmaデザイン・UI2.1k1.3k 回インストール今日更新
リポジトリ

figma-swiftui について

Figma デザインと SwiftUI コードの双方向変換を扱うルーティングスキルです。作業の方向に応じたリファレンスへ案内し、Figma コンテキストの読み取りや iOS デザインパターンの対応付けに共通の指針を示します。

主な機能

  1. 01デザインからコード／コードからデザインへの振り分け
  2. 02方向が曖昧な変換依頼の確認
  3. 03`get_design_context` による Figma 構造の取得
  4. 04iOS のセマンティックカラーと SF Symbols の対応
  5. 05一般的な iOS インターフェースパターンの認識

活用シーン

  1. 01Figma フレームから SwiftUI 画面を作成
  2. 02SwiftUI のビューやトークンを Figma に反映
  3. 03Figma と Swift ファイルが混在する依頼の方向確認

MCP 対応

Figma MCP の `get_design_context` を使い、クライアント言語に Swift、フレームワークに SwiftUI を指定してデザイン構造を読み取ります。コードからデザインへの作業では、指定スキルを読み込んでから `use_figma` を使います。

インストール

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

$npx skills add https://github.com/figma/mcp-server-guide --skill figma-swiftui

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

同梱ファイルreferences/code-to-design.mdreferences/design-to-code.md

詳細

Figma ↔ SwiftUI

Figma のデザインと SwiftUI コードを双方向に変換します。このファイルはルーターです。実際のガイダンスは以下のリファレンスに記載されています。

方向を選択する

方向トリガーリファレンス
デザイン → コードFigma ファイル／フレームをもとに、iOS プロジェクトで SwiftUI を使いたいreferences/design-to-code.md
コード → デザインSwiftUI のビュー／画面／トークンを Figma ファイルに反映したいreferences/code-to-design.md

依頼の方向が曖昧な場合（Figma の URL と .swift ファイルが両方あり、どちらの方向かを示す動詞がない場合）は、リファレンスを読み込む前に、どちらの方向を希望するかユーザーに確認してください。

共通コンテキスト（両方向に適用）

方向にかかわらず、次の点が当てはまります。方向別のリファレンスでは、これらを前提としています。

  1. get_design_context は Figma の読み取りツールです。 応答を Swift 向けにするため、clientLanguages: "swift" と clientFrameworks: "swiftui" を渡してください。URL → ツール引数：figma.com/design/:fileKey/:fileName?node-id=:nodeId → fileKey を使用し、nodeId の - を : に置き換えます。figma.com/design/:fileKey/branch/:branchKey/:fileName の場合は、branchKey を fileKey として使用します。
  2. get_design_context の出力に含まれる React+Tailwind は、構造を把握するための参考であり、そのまま使えるソースではありません。 ビジュアルを近似的に表現したものです。position: absolute／ピクセル単位のフレーム／mix-blend-mode の重ね合わせを SwiftUI や Figma にそのまま置き換えてはいけません。どちらの方向でも、スクリーンショットが信頼できる唯一の情報源です。
  3. iOS HIG のセマンティックカラーは、16 進数ではなくトークンです。 var(--backgrounds/primary, …)、var(--labels/secondary, …)、var(--separators/non-opaque, …) などは、SwiftUI では Color(.systemBackground)、Color.secondary、Color(.separator) に、Figma ではセマンティックコレクション内の変数に対応します。この対応関係を維持し、RGBA のリテラル値は使用しないでください。
  4. SF Symbols は、どちらの方向でも名前を使って往復変換します。コードポイントは使いません。 デザイン → コード：get_design_context は、応答内で Figma の SF Symbol グリフの実行を <SFSymbol>{Image(systemName: "...")}</SFSymbol> のラッパーに戻します。これらの名前をそのまま使用してください。コード → デザイン：use_figma 内で figma.util.getSfSymbolCharacter(name) を呼び出し、シンボル名を対応する文字に変換します。コードポイントを手動で調べてはいけません。
  5. ノード／ビューの名前をそのまま見るのではなく、基盤となる iOS のパターンを認識してください。 同じパターンが両方向で繰り返し登場します。大きなタイトル＋戻るシェブロン＋末尾のアクションは NavigationStack のクローム、アイコンとラベルのペアが並ぶ下部の行は TabView、先頭と末尾にクロームがある高さのそろった行の繰り返しは List です。プリミティブから作り直すのではなく、こうしたシステムパターンに合わせてください。
  6. コード → デザインでは、API として use_figma を使用します。 use_figma を呼び出す前に、必ず figma-use を読み込んでください。画面全体の構築が含まれる場合は figma-generate-design も読み込みます。コンポーネントやデザインシステムの構築が含まれる場合は figma-generate-library も読み込みます。

リファレンス

ドキュメント読み込むタイミング
references/design-to-code.mdFigma のデザイン／フレームを SwiftUI に変換するとき
references/code-to-design.mdSwiftUI のビュー／画面／トークンを Figma に反映するとき

コメント

Markdown 対応