Agent skill

figma

Figmaからデザインデータを取得し、React Nativeコンポーネントやデザイントークンに変換する。「Figmaからデザインを取って」「Figmaのカラーを抽出して」「Figmaのコンポーネントをコードにして」などのリクエストで使用する。

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/figma

SKILL.md

Figma デザイン取得・変換スキル

Figma からデザインデータを取得し、React Native のコードやデザイントークンに変換する。

連携方法

方法 1: Figma REST API

Figma Personal Access Token を使って REST API 経由でデザインデータを取得する。

必要な環境変数:

  • FIGMA_ACCESS_TOKEN — Figma の Personal Access Token（Settings → Account → Personal access tokens で発行）

API エンドポイント:

bash
# ファイル全体の情報を取得
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/{file_key}"

# 特定ノードの情報を取得
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}"

# 画像をエクスポート
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=png&scale=2"

# コンポーネント一覧を取得
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/{file_key}/components"

# スタイル一覧を取得
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/{file_key}/styles"

# ローカル変数（デザイントークン）を取得
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/{file_key}/variables/local"

Figma URL からのキー抽出:

  • ファイル URL: https://www.figma.com/design/{file_key}/{file_name} → {file_key} を取得
  • ノード URL: ?node-id={node_id} クエリパラメータから取得（- を : に変換）

方法 2: Figma MCP Server

Claude の MCP 設定に Figma MCP Server が追加されている場合、MCP ツール経由で直接 Figma にアクセスする。

MCP が利用可能な場合は API より MCP を優先して使う。

操作モード

モード A: デザイントークン抽出

Figma のスタイルや変数からデザイントークン（カラー、タイポグラフィ、スペーシング）を抽出し、TypeScript の定数ファイルに変換する。

出力先: src/constants/

カラートークンの例:

typescript
// src/constants/colors.ts
export const Colors = {
  primary: '#6366F1',
  primaryLight: '#A5B4FC',
  primaryDark: '#4338CA',
  secondary: '#EC4899',
  background: '#FFFFFF',
  surface: '#F9FAFB',
  text: '#111827',
  textSecondary: '#6B7280',
  border: '#E5E7EB',
  error: '#EF4444',
  success: '#22C55E',
  warning: '#F59E0B',
} as const;

export type ColorKey = keyof typeof Colors;

タイポグラフィトークンの例:

typescript
// src/constants/typography.ts
import { TextStyle } from 'react-native';

export const Typography: Record<string, TextStyle> = {
  h1: { fontSize: 32, fontWeight: '700', lineHeight: 40 },
  h2: { fontSize: 24, fontWeight: '700', lineHeight: 32 },
  h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
  body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
  bodySmall: { fontSize: 14, fontWeight: '400', lineHeight: 20 },
  caption: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
} as const;

スペーシングトークンの例:

typescript
// src/constants/spacing.ts
export const Spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
} as const;

export const BorderRadius = {
  sm: 4,
  md: 8,
  lg: 16,
  full: 9999,
} as const;

モード B: コンポーネント変換

Figma のフレームやコンポーネントを React Native コンポーネントコードに変換する。

手順:

  1. Figma API / MCP でノードのデザインデータ（レイアウト、色、フォント、サイズ等）を取得する
  2. Figma の Auto Layout を React Native の flexDirection, gap, padding にマッピングする
  3. デザイントークンが src/constants/ に存在すればそれを参照する
  4. src/components/ にコンポーネントファイルを生成する

Figma → React Native マッピング:

Figma プロパティ React Native スタイル
Auto Layout (horizontal) flexDirection: 'row'
Auto Layout (vertical) flexDirection: 'column'
Spacing between items gap: number
Padding padding, paddingHorizontal, paddingVertical
Fill container flex: 1
Fixed size width / height
Corner radius borderRadius
Fill (solid color) backgroundColor
Stroke borderWidth, borderColor
Drop shadow shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation
Text properties fontSize, fontWeight, lineHeight, color, textAlign
Opacity opacity

手順（共通）

  1. ユーザーから Figma URL またはファイルキーを受け取る
  2. URL から file_key と node_id を抽出する
  3. 環境変数 FIGMA_ACCESS_TOKEN の存在を確認する（なければ設定方法を案内する）
  4. MCP が利用可能か確認し、可能なら MCP を使う
  5. 指定されたモード（トークン抽出 / コンポーネント変換）を実行する
  6. 生成したファイルの内容をユーザーに報告する

ルール

  • Figma の色は RGBA → HEX に変換する（Figma API は 0〜1 の float で返す）
  • フォントファミリーは Expo で利用可能なものに置き換える（expo-font で読み込み前提）
  • px 値はそのまま React Native の数値として使う（React Native は dp ベース）
  • 画像アセットは assets/ ディレクトリにエクスポートする
  • 既存のデザイントークンファイルがあれば上書きではなくマージする
  • FIGMA_ACCESS_TOKEN をコードやログに直接記載しない

Didn't find tool you were looking for?

Be as detailed as possible for better results