FigmaとStorybook連携でUIレビューを効率化する方法【初心者向けガイド】

この記事の最終更新日: 2025年4月26日

はじめに

UI開発の現場では、デザイナーが作成したFigmaデザインと、エンジニアが実装したStorybookコンポーネントとの間でズレが生じることがよくあります。これを手作業で確認・修正するのは手間も時間もかかり、手戻りや認識ズレが発生しやすくなります。

そこでおすすめしたいのが、FigmaとStorybookの連携です。この記事では、連携によるメリットから導入方法、実際の運用ワークフロー、自動化のテクニックまで、初心者にもわかりやすく解説します。

1. なぜFigmaとStorybookを連携するのか？

デザインと実装の差分チェックが簡単に
Storybook上でFigmaのデザインを直接表示できるため、ズレを視覚的にすぐ発見できます。
コミュニケーションがスムーズに
デザイナーとエンジニアが共通のプラットフォームを見ながらやり取りでき、認識違いが減ります。
レビュー基準を明確にできる
例：2px以内のズレは許容、それ以上は修正依頼など、共通ルールを作りやすくなります。
自動テストと組み合わせられる
視覚回帰テスト（VRT）と連携すれば、UIのズレ検出を自動化可能です。

2. 連携に必要な準備

用意するもの

Node.jsとStorybook環境
Figmaデザインファイルの閲覧権限とURL
Storybook用アドオン storybook-addon-designs

インストール方法

npm install --save-dev storybook-addon-designs

3. StorybookへのFigma連携手順

3-1. アドオンの設定

./storybook/main.js に以下を追加します：

module.exports = {
  addons: [
    'storybook-addon-designs',
  ],
};

3-2. デコレーターの登録

./storybook/preview.js にデコレーターを設定：

import { withDesign } from 'storybook-addon-designs';

export const decorators = [withDesign];

3-3. コンポーネントごとにFigmaリンクを埋め込む

export const PrimaryButton = () => <Button primary>Click me</Button>;

PrimaryButton.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/XXXX/YYYY',
  },
};

これで、Storybook内でFigmaデザインがプレビューできるようになります！

4. 効率的なレビュー方法

左右に並べて比較
差分の基準を決める（例：2px以内は許容、それ以上は修正）
Storybook上でコメントし、共有ツール（Slackなど）に連携
バージョン管理：FigmaとStorybookのリンクをPRに必ず記載

5. 自動化とCIツール連携

視覚回帰テスト (VRT)

ツール例: Chromatic, Percy, Loki

Chromatic導入例：

npx chromatic --project-token=<YOUR_TOKEN>

E2Eテストとの組み合わせ

Storybook環境を使い、CypressやPlaywrightでUIの流れをテスト可能にします。

6. 小規模チーム向け運用例

対象：デザイナー1〜2名、エンジニア2〜5名規模のチーム
運用ルール例：
- 毎週金曜日にFigmaとStorybookの同期レビュー会を30分実施
- 重要画面は必ずStorybookにFigmaリンクを設定
- 差分許容基準（2px以内OK）をチームで合意しドキュメント化
- PRレビュー時は、Storybook＋Figmaスクリーンショットを必ず添付
ポイント：
- 小規模でもルール化すれば確認抜けを防止できる
- ルールは最小限スタート、必要に応じて拡張していくとよい

7. よくあるトラブルとその対策

トラブル	原因	解決策
Figmaリンクが表示されない	URL間違い/権限不足	正しいURL設定とアクセス権の確認
差分許容基準があいまい	ルールが未定義	チームで許容ルールを文書化・共有
VRTで誤検知が多発	小さなスタイル差分を検知	背景やサイズを統一し、許容範囲設定