メインコンテンツへスキップ
リリース前にデザインのずれを検出します。この自動化は、UI の変更を含むすべての PR で実行され、更新されたコンポーネントのスクリーンショットを取得し、Figma MCP 経由で対応する Figma フレームを取得したうえで、余白、色、タイポグラフィ、レイアウトの差分について具体的に指摘するインラインレビューを PR に投稿します。

このテンプレートを利用する

Devin で Figma Design Review on PR を開き、デフォルト設定で自動化を作成します。保存前にカスタマイズすることもできます。
実際に操作しながら進める手順をお探しですか？Figma Design Review on PR については、ステップバイステップのチュートリアルをご覧ください。

​
この自動化でできること

デザインレビューは、フロントエンド エンジニアリングの中でも自動化が特に難しい工程の 1 つです。Figma MCP により、Devin は基準となるデザイン (トークン、コンポーネント仕様、フレーム寸法) にプログラムからアクセスできるため、レンダリングされたコンポーネントをデザイナーが実際に指定した内容と比較し、差異について正確なフィードバックを返せます。

​
仕組み

トリガー: GitHubイベント — pull.request
  • イベント: github:pull_request
    • 条件:
      • action eq opened
      • repository.full_name eq your-org/your-repo
Devinが行うこと: イベントの前提情報をすべて含むセッションを開始し、以下のプロンプトを実行し、必要に応じて失敗時に通知します。

​
前提条件

​
プロンプト例

このテンプレートには、このプロンプトが含まれています。テンプレートを使用をクリックしたあとで編集することも、そのまま使うこともできます。

​
設定する

  1. Devin で Automations → Templates を開きます。
  2. Figma Design Review on PR をクリックします。このテンプレートの内容があらかじめ入力された作成ページが開きます。
  3. 必要な統合を接続し、まだであれば MCP サーバーをインストールします。
  4. トリガー条件内のプレースホルダー値を置き換えます (たとえば、your-org/your-repo を実際のリポジトリに置き換えます) 。
  5. プロンプトを確認し、チームで使っている表現、規約、ガードレールに合わせて調整します。
  6. Create automation をクリックします。
ほとんどの自動化テンプレートには、初期ロールアウト時のコストを抑えるために、推奨される ACU 上限と実行回数の上限が含まれています。自動化の挙動に十分な確信が持てるまではそのままにし、その後でワークロードに合わせて引き上げてください。

​
このテンプレートを利用すべき場合

  • ビジュアルの再現性が重要な、デザインシステムを重視するチーム
  • デザイン感覚がさまざまな多数のコントリビューターが関わる、大規模なフロントエンドコードベース
  • デザインレビューのボトルネックを減らす (すべてのPRをデザイナーがレビューするのを待つのではなく)
  • プロダクト全体で視覚的な一貫性を保つ

​
カスタマイズのアイデア

  • 特定のリポジトリ、ディレクトリ、またはファイルパターンに対象を絞る
  • デザイントークンの許容範囲を設定する (ピクセル単位で完全一致 vs. 「十分に近い」)
  • 各PRテンプレートに必須のFigmaファイルIDを追加する
  • デザインシステムのlintルールと組み合わせて、大きな乖離がある場合はマージをブロックする

​
関連情報