Figmaでデザインするのをやめよう

あなたのFigmaファイルは、存在しないプロダクトを写した静止写真です。エンジニアが出荷する頃には、もう間違っています。フォントの描画は違い、無視したブレークポイントが表面化し、忘れていた空の状態が現れ、コメントで描いたホバーは、あなたではない誰かに解釈されます。解決策はFigmaプラグインを増やすことではありません。Figmaをデザインツールとして使うのをやめ、コードベースを使い始めることです。

これはFigma批判ではありません。システム設計、ブランド探索、FigJamでの図解では、Figmaは今も勝ちます。主張はもっと狭く、もっと厳しいものです。2026年、プロダクトデザインはコードの中で行われます。 v0、Cursor、Lovable、Vercel UIレジストリが、画面が実際にデザインされる場所としてアートボードに取って代わりました。エンジニアに「実装」してもらうためにピクセルパーフェクトなFigmaフレームを作り続けるデザイナーは、二つの仕事を半分の速度でこなしています。

実際に何が変わったのか

Figmaは、制作がボトルネックだった時代のために作られました。2018年、動くReactコンポーネントを作るのにエンジニアは3日かかり、その間にデザイナーは高忠実度フレームを20枚出せました。平らなアートボードを成果物として納めるのは合理的な選択でした。アートボードはパイプラインで最も速い部分だったのです。

その計算は2026年に逆転しました。v0は一文を30秒で動くコンポーネントに変えます。Cursorは実際のリポジトリを、実際のdiffで編集します。Lovableは一つのプロンプトからデプロイ可能なアプリを立ち上げます。アートボードは今やパイプラインで最も遅い部分であり、その差は四半期ごとに広がっています。成果物レベルの変化の詳しい分解はモックアップの死にあります。この記事は、その成果物を生み出すツールの話です。

平らなフレームが悪くなったのではありません。作業台が良くなったのです。

Figmaが今も役に立つ場面

正直にいきましょう。Figmaは4つの仕事で優れています。そうでないふりをすると、残りの議論まで退けられてしまいます。

Figmaが今も勝つのは**ブランドアイデンティティの探索です。コードベースが存在する前に、ロゴ、書体の検討、カラーシステムが置かれる場所です。デザインシステムの棚卸しでも勝ちます。すべてのトークン、バリアント、状態を一覧にする単一ファイルで、マルチプレイヤーのモデルは他に再現できません。FigJamでの図解とチームの認識合わせでも勝ちます。ホワイトボード作業やジャーニーマップなど、画面そのものが会話になる場面です。そして本当にコードが読めないデザイナー**にも有効です。2026年にはこの役割は業界が言うほど多くありませんが、まだ実在します。

それ以外、つまり実際のユーザーに届くすべてのプロダクト画面は、コードに属します。

5つの違い

Figmaでのデザインとコードでのデザインは、同じ仕事を違う速度でやっているのではありません。別の仕事です。

忠実度。 Figmaのフレームは文字組みを近似し、ホバーを無視し、スクロールを偽装し、ブラウザが同じようには読み込まないフォントで描画します。コードの画面は、実際のフォント、実際のボタンコンポーネント、実際のブレークポイント、実際のフォーカスリングを使います。近似と現実の差は、かつては許容できました。読み込み中、空、長文コンテンツの状態がデザインの半分を占めるプロダクトでは、もう許容できません。

速度。 Figmaのループは、フレームを編集し、エンジニアにコメントし、待ち、ビルドを確認し、再びコメントし、また待ちます。コードのループは、編集、リロード、確認です。前者は日単位、後者は秒単位で回ります。反復の速さが、ローンチ前にチームが試せるアイデアの数を決めます。

コラボレーションのモデル。 FigmaのコメントとPRのコメントは別の場です。Figmaのコメントは、デザイナーからステークホルダーへ、そして仕様としてデザイナーからエンジニアへ向かいます。PRのコメントは、デザイナーとエンジニアが対等な仲間として一つの成果物に向き合います。後者がデザインエンジニアリングチームの動き方であり、構造的に速いのです。

引き継ぎが消える。 引き継ぎは、従来のパイプラインで最もコストの高い瞬間です。コードでデザインすれば、それが消えます。デザインが実装そのものなので、変換の工程がありません。

エッジケースがすぐに姿を現す。 空、読み込み中、長文、モバイル、エラー、低速ネットワーク。Figmaでは、デザイナーが描き忘れなければ存在します。コードでは、デザイナーが覚えていようがいまいが存在します。描画するにはコンポーネントがそれらに対応しなければならないからです。コードは正直さを強制します。

v0、Cursor、Lovable、Vercel UIが新しいデザインの場

新しいデザイン環境は一つのツールではなく、同時に臨界点を迎えたスタックです。それぞれがかつてFigmaが一手に担っていた層の一部を受け持ちます。

Vercelのv0は、プロンプトを約30秒で動くReactとTailwindのコンポーネントに変えます。結果をフォークし、プロンプトか手作業で反復し、コードベースに出荷します。このフォークして反復するモデルは、Figmaの複製して微調整するやり方に取って代わります。ただし複製されるのは本物のコードです。

Cursorは、コードが読めるプロダクトデザイナーのためのデザインの場です。実際のリポジトリを開き、実際の描画を見て、プロンプトか手作業でコンポーネントを編集し、同じ分のうちにブラウザで変化を確認します。

Lovableは、創業者とソロデザイナーのための場です。一つのプロンプトで動くWebアプリができ、動いているものをそのまま反復します。意図から公開URLまでの最短経路で、Figmaファイルは要りません。

Vercel UIとshadcnレジストリはコンポーネントの棚です。本物のコンポーネントを取り出し、コードベース内でカスタマイズして出荷します。shadcnはコンポーネントを自分のものになるコードとして提供するので、デザインシステムもデザインと同じ場で編集できます。

ツールの形は違っても、考え方は同じです。動いている画面こそが成果物です。アートボードは、存在するとしても下書きです。さらに実践的なパターンはデザイナーのためのバイブコーディングとデザイナーのためのClaude Codeをご覧ください。

Linear、Stripe、Anthropicの実際の動き方

2026年に最高のプロダクトUIを出荷しているチームは、ワークフローの形が共通していて、最終成果物としてFigmaを出荷しているところはありません。

Linearは、コードベースを唯一の正とします。デザインエンジニアリングチームは、デザインをFigmaフレームではなく、動いているアプリへのプルリクエストとして反映します。Stripeのデザインシステムは、コードから構築され、コードから出荷されます。Figmaはコードの下流にあるドキュメントとして存在し、上流の源ではありません。システムを編集するとは、コードを編集することです。Anthropicは、ReactコンポーネントとClaudeアーティファクトの中でClaudeのプロダクト画面をインラインでデザインし、デザイナーは毎リリースで実際のアプリを読み、編集しています。

このパターンは、プレミアムな速度で出荷するあらゆるプロダクトチームで繰り返されます。トークンは上流に、キャンバスとしてのコード、制作レイヤーとしてのAI、diffの中にいるデザイナー。平らなフレームのパイプラインは、彼らの誰の働き方でもなく、その計算がようやく業界全体に追いついたのです。

コードでデザインする前に問う5つの質問

すべてのデザイナーが明日Figmaを手放すべきではありません。誠実なテストは5つの質問です。3つ以上がイエスなら、次のプロジェクトはコードでデザインするのが正解です。

1. 作品を出荷しますか、それとも引き継ぎますか? 出荷するならコードが勝ちます。引き継ぐ場合もコードが勝ちますが、文化的な落差は大きくなります。
2. コードベースを読めますか? 本番のReactをゼロから書く必要はありません。コンポーネントを読み、propsを理解し、デザイントークンを見分け、ビルドを壊さずに値を編集できれば十分です。
3. デザインは静的な仕様ですか、インタラクティブな画面ですか? 仕様はFigmaに属します。ホバー、フォーカス、スクロール、モーション、エッジの状態を持つ画面はコードに属します。
4. チームに拡張すべきデザインシステムはありますか? 本物のコンポーネントライブラリがあれば、shadcnのベースラインでも、コードファーストデザインはFigmaより2桁速くなります。
5. 反復の速さがボトルネックですか? 引き継ぎのサイクルでスプリントを失っているなら、コードファーストがそのボトルネックを潰します。ブランド戦略でスプリントを失っているなら、コードファーストは何もしません。正しい問題を解きましょう。

5つ中4つに当てはまるチームは、コードの中で生きています。5つ中2つのチームは、FigmaとコードでFigmaとコードに作業を分けつつ、新規プロジェクトごとにやや コード寄りにするのがよいでしょう。

捨てるべきアンチパターン

どのツール選択よりも多く、出荷されたプロダクトのUIを殺す4つのパターンがあります。チームがこのどれかをやっているなら、ツールの変更よりワークフローの変更のほうが重要です。

Dev Modeを引き継ぎとみなす幻想。 デザイナーが赤線だらけのFigmaファイルを出荷します。エンジニアは「Dev Modeを使って」翻訳します。双方が、その翻訳は忠実だというふりをします。決して忠実ではありません。Dev Modeは便利ですが、新しい包装紙に包まれた同じ引き継ぎの幻想です。本当の解決策は、エンジニアとデザイナーが同じ成果物を編集することで、それをコードの画面が可能にします。接続レイヤーについてはFigma MCPガイドをご覧ください。

実際のフォントとブレークポイントを無視したピクセルパーフェクトなモック。 Lorem Ipsumと、本番アプリが読み込まないフォントで作られた1440pxのフレーム。モックはピクセルパーフェクトに見えますが、出荷されたプロダクトは似ても似つかず、全員がその嘘に承認印を押しました。

Figmaに置かれ、静かにコードと乖離していくデザインシステム。 Figmaライブラリではボタンのパディングは12px。コードでは14px。どちらも更新されていません。半年後、そのFigmaファイルはフィクションです。唯一の正はコードに置き、Figmaはその下流のレンダリングにします。

PDFとして出荷される半年がかりのリデザイン。 100ページのFigmaエクスポートとして納品され、経営陣にプレゼンされ、「フェーズ2」としてエンジニアリングに渡される旗艦リデザイン。エンジニアリングが再構築の見積もりをする頃には会社の戦略が二度変わっているので、フェーズ2は起きません。出荷されないリデザインは、存在しなかったのと同じです。

コードファーストデザイン監査

次のプロジェクトが始まる前に、監査をしましょう。7つの質問、10分、鋭い答え。

1. 成果物はフレームですか、出荷された画面ですか? 出荷された画面なら、成果物はコードです。フレームがプロダクトだというふりはやめましょう。
2. 動いているアプリの責任者は誰で、デザイナーはdiffの中にいますか? いないなら、ツールを変える前にそれを直しましょう。
3. トークンはどこにありますか? 答えがFigmaなら、移しましょう。トークンファイルがFigmaの読む唯一の正であるべきで、その逆ではありません。アップグレードの道筋はAIデザインワークフローの解説で扱っています。
4. 反復サイクルは何時間ですか? 編集から出荷された変更まで4時間を超えるなら、問題はデザインではなくワークフローです。
5. まだ平らなアートボードでデザインしている画面はどれで、コードに移った画面はどれですか? 分担を地図にしましょう。新しい取り組みでは、コード寄りに偏らせるべきです。
6. 引き継ぎの忠実度を偽装するために、チームはどのプラグインに頼っていますか? 答えが「たくさん」なら、残す価値のあるFigmaプラグインを見て、残りを切りましょう。
7. ワークフローが機能すると証明するために、チームは来四半期に何を出荷しますか? スライドではなく、デプロイされた画面です。答えが曖昧なら、ワークフローはまだ実際には変わっていません。

監査を通るワークフローはプロダクトを出荷します。監査に落ちるワークフローはスライドを出荷します。その差は四半期ごとに複利で広がり、ほかの条件がほぼ同じなら、スピードがブランドです。

FAQ

Figmaは死んだのですか?

いいえ。Figmaは死んでいませんし、主張も「Figmaは死んだ」ではありません。Figmaはブランドアイデンティティの仕事、デザインシステムの棚卸し、FigJamでの図解、ステークホルダー向けのプレゼンに優れています。主張はもっと狭いものです。コードベースのほうが速く、忠実度が高く、ユーザーが触れるのと同じ成果物を出荷するため、Figmaはもうプロダクトデザインが行われる場所ではありません。

コードが読めないデザイナーはどうすればいいですか?

そのデザイナーは、コードを書くのではなく読めるようになるべきです。コンポーネントを読み、トークンを見分け、値を編集し、diffをレビューするのは、キャリアチェンジではなく1週間で身につくスキルです。2026年には、本番コードの重労働はAIが担います。デザイナーは構成、判断力、センスを動いている画面にもたらし、制作レイヤーが安いほど、それはより価値を増します。

小さなチームは本当にFigmaを完全にやめるべきですか?

完全にではありません。小さなチームも、ブランド探索、システムの棚卸し、チームの認識合わせにはFigmaを使うべきです。変えるのはプロダクト画面で、v0、Cursor、Lovable、shadcnレジストリは、あらゆる指標でアートボードを上回ります。誠実な分担は、ブランドとシステムはFigma、プロダクト画面はコード、そして新しい取り組みではコード寄りに偏らせることです。

ワークフローの正しい側に立とう

デザインツールとしてのFigmaの時代は15年間正しく、そして終わりました。2026年のデザイン環境はコードベースであり、プロダクトUIをコードで出荷するチームは、より高い料金を取り、より速く学び、かつてFigmaデッキのスタジオが握っていた案件を勝ち取っています。

Figmaデッキを壁の向こうに投げるのではなく、デザイナーがdiffの中にいる形でプロダクトUIをコードで出荷したいなら、Brainyに依頼してください。Brainyは、ブランド、プロダクトエンジニアリング、AIワークフローを三つではなく一つのプロジェクトとして出荷します。Figmaファイルを最終成果物として値付けし続けるスタジオは、来四半期には案件に残っていません。案件に残りましょう。