Rork Max で useFigma フックを使ってデザインをコードに落とし込む方法

Rork Max には useFigma という少し特殊なフックがあります。Figma のデザインファイルを参照して、スタイルやレイアウトの情報をコンポーネントに取り込める機能です。

デザイナーとの分業が多いプロジェクトや、既存の Figma 資産をアプリに使いたい場合に特に便利です。ただ、ドキュメントが英語中心で、実際の使い方のイメージがつきにくい部分があったので、実際に試した内容を整理してお伝えします。

useFigma フックの概要

useFigma は Rork Max の AI コーディング機能の一つで、Figma ファイルのデザイントークン（色・スペーシング・フォントサイズ等）や特定フレームのレイアウト情報を参照できます。

基本的な使い方は以下の通りです。

import { useFigma } from 'rork-max';
 
const MyComponent = () => {
  const { styles, layout, isLoading } = useFigma({
    fileId: 'YOUR_FIGMA_FILE_ID',
    nodeId: 'YOUR_NODE_ID',  // 特定フレームのノードID
  });
 
  if (isLoading) return <ActivityIndicator />;
 
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Hello</Text>
    </View>
  );
};

fileId は Figma の URL から取得できます。https://figma.com/file/{fileId}/... の形式です。nodeId は Figma でフレームやコンポーネントを選択したときに右クリックメニューの「Copy link to selection」で確認できます。

Figma 連携の設定

useFigma を使う前に、Rork Max のプロジェクト設定で Figma との連携を有効にする必要があります。

# Rork Max プロジェクトの設定ファイル（rork.config.ts）に追記

// rork.config.ts
import { defineConfig } from 'rork-max';
 
export default defineConfig({
  integrations: {
    figma: {
      accessToken: process.env.FIGMA_ACCESS_TOKEN,
      // デザイントークンを自動同期するファイルID
      designSystemFileId: 'YOUR_DESIGN_SYSTEM_FILE_ID',
    },
  },
});

環境変数 FIGMA_ACCESS_TOKEN には Figma の Personal Access Token を設定します。Figma の Settings → Account → Personal access tokens から発行できます。

デザイントークンの取り込み

useFigma の最も実用的な使い方は、デザイントークン（カラーパレット・タイポグラフィ・スペーシング）を React Native のスタイル定数として取り込むことです。

// デザイントークンを型付きで取り込む
import { useFigma, FigmaTokens } from 'rork-max';
 
const useDesignTokens = () => {
  const { tokens } = useFigma<FigmaTokens>({
    fileId: 'YOUR_DESIGN_SYSTEM_FILE_ID',
    tokenTypes: ['colors', 'spacing', 'typography'],
  });
 
  return {
    colors: {
      primary: tokens?.colors?.brand?.primary ?? '#007AFF',
      background: tokens?.colors?.surface?.default ?? '#FFFFFF',
      text: tokens?.colors?.text?.primary ?? '#000000',
    },
    spacing: {
      sm: tokens?.spacing?.sm ?? 8,
      md: tokens?.spacing?.md ?? 16,
      lg: tokens?.spacing?.lg ?? 24,
    },
    fontSize: {
      body: tokens?.typography?.body?.size ?? 14,
      heading: tokens?.typography?.heading?.size ?? 24,
    },
  };
};

フォールバック値（?? '...'）を設定しておくと、Figma API が応答しない場合でもコンポーネントが正常に表示されます。

特定フレームのレイアウト変換

特定の Figma フレームを React Native コンポーネントに変換する例です。

import { useFigma, convertFigmaToRN } from 'rork-max';
import { View, Text } from 'react-native';
 
const CardComponent = () => {
  const { frameData, isLoading, error } = useFigma({
    fileId: 'YOUR_FIGMA_FILE_ID',
    nodeId: '123:456',  // カードコンポーネントのノードID
    mode: 'layout',     // レイアウト情報を取得
  });
 
  if (isLoading) return null;
  if (error) {
    console.warn('Figma sync failed, using fallback styles');
  }
 
  // Figma のオートレイアウトを React Native の flexbox に変換
  const rnStyles = frameData
    ? convertFigmaToRN(frameData)
    : defaultCardStyles;
 
  return (
    <View style={rnStyles.card}>
      <Text style={rnStyles.title}>Card Title</Text>
      <Text style={rnStyles.body}>Card content here</Text>
    </View>
  );
};
 
const defaultCardStyles = {
  card: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: { fontSize: 18, fontWeight: 'bold' as const },
  body: { fontSize: 14, color: '#666' },
};

実用上の注意点

リアルタイム同期ではない

useFigma はアプリ起動時やキャッシュ期限切れ時に Figma API を呼びます。Figma 上でデザインを変更してもリアルタイムにアプリに反映されるわけではありません。開発中は cacheMaxAge: 0 を設定してキャッシュを無効化しておくと確認しやすいです。

const { styles } = useFigma({
  fileId: 'YOUR_FIGMA_FILE_ID',
  nodeId: 'YOUR_NODE_ID',
  cacheMaxAge: process.env.NODE_ENV === 'development' ? 0 : 3600,
});

本番ビルドではスナップショットを使う

本番アプリが毎回 Figma API を叩くのはパフォーマンス面でも好ましくありません。Rork Max には generateFigmaSnapshot コマンドがあり、ビルド時にスナップショットを生成して組み込む方法が推奨されています。

npx rork-max generate-figma-snapshot

これで figma-snapshot.json が生成され、本番ビルドではこのファイルが使われます。

向いているユースケース

useFigma が特に力を発揮するのは以下のようなケースです。

デザインシステムを Figma で管理しているチーム開発では、カラーパレットやタイポグラフィのスナップショットをアプリに取り込むことで、デザイナーの変更がアプリに反映しやすくなります。また、プロトタイプから本番への移行作業でも、Figma のフレームをベースにコンポーネントを作ると、再現度の高いスタートが切れます。

逆に、デザインが Figma に存在しない個人プロジェクトや、スタイルが頻繁に変わる初期フェーズでは、素直にハードコードしたほうが管理が楽です。

12年の個人開発で見えてきたこと

リリース直後にチェックしているもの

クラッシュレポートの上位エラーを24時間ごとに確認しているか
AdMob/StoreKit の収益ダッシュボードに異常検知が出ていないか
ユーザーレビューに技術的な指摘が含まれていないか