Rork と Figma をつなぐ

Rork と Figma をつなぐ — デザインからプロトタイプまでの実務フロー

Figmaで作ったUIコンポーネントをRorkのプロトタイプへ落とし込む実務フローです。命名規則の揃え方、コンポーネントライブラリの構築、デザインシステムの維持、大量のコンポーネントを扱うときの注意点まで、デザインと実装の手戻りを減らす手順を解説します。

デザインと実装の間で、いつも同じ場所が詰まる

Figma で整えたデザインを実装に渡す段階で、同じ手戻りが繰り返されることがあります。命名がずれている、コンポーネントの粒度が合わない、余白の値が揃っていない。どれも個別には小さな齟齬ですが、積み上がると無視できない時間になります。

この手戻りは、Figma 側の作り方を Rork での実装を前提に整えておくと、かなりの部分が消えます。準備の仕方からコンポーネント管理まで、順に見ていきます。

準備：Figmaプロジェクトの設定

まず、Figmaでの準備が重要です。RorkでのUIコンポーネント化を念頭に置いたデザイン作成をしましょう。

コンポーネントライブラリの構築

Figmaのコンポーネント機能を活用して、再利用可能なUIパーツをライブラリ化します。以下のポイントに注意します：

命名規則の統一：Button/Primary, Card/Article, Typography/Heading1 などの階層的な命名
プロパティの設定：バリアント（サイズ、状態、カラー）を明確に定義
グリッドとガイドライン：8pxグリッドシステムで統一性を保つ

エクスポート設定

Figmaから効率的にアセットをエクスポートするために：

Frame構造：
├── Components
│   ├── Button
│   │   ├── Primary
│   │   ├── Secondary
│   │   └── Tertiary
│   ├── Card
│   └── Typography
├── Pages
│   ├── HomePage
│   ├── ProductPage
│   └── CheckoutFlow

Rorkでのコンポーネント実装

Figmaから輸出したデザイン仕様をもとに、Rorkのコンポーネントシステムで実装します。

コンポーネントの基本構造

RorkのMaxを使用して、Figmaのバリアントに対応するコンポーネントを作成します：

# rork.config.yml
components:
  button:
    variants:
      - primary
      - secondary
      - tertiary
    properties:
      size: ["sm", "md", "lg"]
      state: ["default", "hover", "active", "disabled"]

スタイリング連携

Figmaで定義したカラー、タイポグラフィ、スペーシングをRorkの設定に反映させます。デザイントークンの一元管理が効率化のカギです。

{
  "colors": {
    "primary": "#0066FF",
    "secondary": "#F0F2F5",
    "text": {
      "primary": "#1A1A1A",
      "secondary": "#666666"
    }
  },
  "typography": {
    "heading1": {
      "size": "32px",
      "weight": 700,
      "lineHeight": 1.2
    },
    "body": {
      "size": "16px",
      "weight": 400,
      "lineHeight": 1.5
    }
  }
}

プロトタイプの構築

Figmaのプロトタイプ情報をRorkに活かすことで、高速なUIプロトタイプ作成が可能になります。

インタラクション設計

Figmaで定義したインタラクション（遷移、アニメーション）をRorkでも再現します：

ページ遷移：Figmaのプロトタイプフロー → Rorkのルーティング設定
マイクロインタラクション：ボタンのホバーアニメーション、ローディング状態など
フィードバック：トースト通知、モーダルダイアログの動作確認

Rork Maxでのダッシュボード作成例

複雑なUIを素早くプロトタイプするために、Rorkのコンポーネント組み合わせ機能を活用：

export const Dashboard = () => {
  return (
    <div className="dashboard">
      <Header />
      <Sidebar />
      <MainContent>
        <CardGrid columns={3}>
          <Card title="ユーザー数" value="1,234" />
          <Card title="アクティビティ" value="+12%" />
          <Card title="コンバージョン" value="8.5%" />
        </CardGrid>
      </MainContent>
    </div>
  );
};

デザインシステムの維持

Figmaとコードの同期を保つことで、デザイン変更が素早くプロトタイプに反映されます。

定期的なアップデート

デザイン変更の追跡：Figmaの更新ログを確認し、定期的に仕様をレビュー
コンポーネントバージョン管理：Rorkプロジェクト内でコンポーネントのバージョンを明記
ドキュメンテーション：コンポーネントの使用方法をREADMEに記載

チーム連携のベストプラクティス

デザイナーとエンジニアの定期ミーティング
Figmaコメント機能での実装上の課題共有
Rorkプロトタイプのデザイナーへのフィードバック共有

よくある課題と解決策

レスポンシブデザイン対応

FigmaのブレークポイントをRorkの設定に反映させます：

breakpoints:
  mobile: 320px
  tablet: 768px
  desktop: 1024px
  wide: 1440px

パフォーマンス最適化

大量のコンポーネントを扱う場合、Rorkの遅延読み込み機能を活用し、プロトタイプの動作を快適に保ちます。

全体を振り返って

Figmaのデザインの正確性とRorkの開発効率を組み合わせることで、プロダクト開発のスピードを大幅に向上させられます。デザインシステムの構築に時間をかけることは、中長期的には大きな投資効果をもたらします。

このワークフローを実践することで、デザイナーとエンジニアの協働がより円滑になり、ユーザーにとって優れたUIコンポーネント体験の提供が可能になります。