Figma Make はついに本物のデザイン→コードツールになった

Figma Make が今やフロントエンドエンジニアが即座に削除しないコードを渡してくれる。それがデザイナーたちがこれを話題にしている唯一の理由であり、もう一つのスピードアップよりもはるかに大きな意味を持つ。

6月18日、Figma はプロダクションレベルの Make アップデートをリリースした。見出しは「速くなった」ではない。見出しは「忠実度」だ。Make は今や、以前のエクスポートが生成していた緩くて使い捨ての一点物のマークアップの代わりに、実際のデザイントークンと Code Connect マッピングに紐付けられたコンポーネントをエクスポートする。

その差が、パーティートリックとツールの境界線だ。捨てるコードは捨てられる。システムを参照するコードはマージされる。

誰もが投稿している diff

figma.com で見る

このアップデートが広まったのは、人々が証拠を見せているからだ。@figma のアナウンススレッドは数日で約9,200件のリポストを超え、返信欄は自社システムで試したチームによる Figma→React の diff の比較で埋め尽くされた。

これが注目すべきサインだ。最も大きなシグナルは Figma のマーケティングコピーではなく、エンジニアたちが before/after の diff を投稿してその結果を嫌がっていないことだ。懐疑論者が静かになったとき、何かが変わっている。

デザイナーたちは10年間「デザイン→コード」の約束を聞いてきた。その約束は常に実際のコードベースに触れた瞬間に死んでいた。なぜなら出力がコードベースの基盤となっているシステムを無視していたからだ。今回は、diff が遭遇を生き延びる。

実際に何が変わったか（生のhexとマークアップではなく、トークンとCode Connect）

figma.com/make で見る

旧 Make はフレームを読み取り、見たものを記述していた。青いボタンを見て #2D7FF9 と書いた。パディングを見てピクセル値を書いた。結果は見た目は正しいが何にも繋がっていなかった。

新しい Make は同じフレームを読み取り、あなたのシステムに照らして解決する。青いボタンは固定されたhex値ではなく、トークン参照にコンパイルされる。コンポーネントは実際の Code Connect マッピングにコンパイルされるため、新しいものを発明する代わりにコードベース内の実際のコンポーネントを参照する。

それが一文で表すシフト全体だ。エクスポートはピクセルを記述することをやめ、ソースオブトゥルースを参照し始めた。

実践的に重要な理由として、トークン参照はコードがテーマの変更を自動的に継承することを意味する。トークンを変更すれば、すべてのエクスポートがそれを追跡する。Code Connect マッピングは、誰かが触れた瞬間にドリフトする近似の複製を生み出す代わりに、チームがすでに管理している Button をエクスポートが再利用することを意味する。

旧Makeの出力 vs. 6月18日のアップデート

比較を示そう。比較こそが論拠だから。

右列だけがプルリクエストに居場所を持つ。左列が今まで誰も「デザイン→コード」を信頼しなかった理由だ。

まだあなたが必要な場所

Make は体を作るが、脳は作らない。その境界を誇張しても誰の得にもならないので、6月18日のアップデートが何をしてくれるかの正直な限界を示そう。

レイアウト、トークン、静的コンポーネントの骨格はきれいに出力される。判断が必要なものはすべてまだあなたが必要だ。エクスポートはローディング状態がどう感じるべきか、エラー時に何が起きるか、空の状態がプッシュすべきか謝罪すべきかを知らない。

アクセシビリティは独立した行に値する。Make は alt 属性やセマンティックっぽいタグをつけることはできるが、フォーカス順序を決定したり、ライブリージョンをアナウンスしたり、モーダルがフォーカスをトラップして返す必要があることを理解したりはできない。それらは人間がインターフェースをどのように移動するかについての判断であり、判断はエクスポートの中にない。

実データはもう一つの静かな破壊者だ。フレームは一つの完璧な行を示す。プロダクションは名前が40文字のユーザー、nullの価格、初日に空のリストを示す。

Make はハッピーパスの骨格を作る。現実を扱うのはあなただ。

今週試せるまともな Figma Make ループワークフロー

プロセスを作り直す必要はない。Make を適切なポイントに組み込み、継ぎ目に人間を置いておく必要がある。今週実際のコンポーネントで実行できるバージョンを示そう。

1. まずトークンと Code Connect を実際にマッピングする。これは地味な前提条件だ。Make は参照するシステムと同じ品質しか持てない。だからトークンの名前が半端で Code Connect のカバレッジが薄いなら、エクスポートを責める前にそれを修正しよう。
2. 画面全体ではなく、一つのよく作られたコンポーネントで Make を実行する。明確な構造とクリーンなトークンストーリーを持つものを選ぼう。奇跡を求めるのではなく、忠実度をテストしている。
3. ファンとしてではなく、コードレビュアーとして diff を読む。トークン参照に解決され、実際のコンポーネントにマッピングされたことを確認しよう。hex 値や重複コンポーネントを発明していたら、そのフレームはシステムクリーンではなかった。ソースを修正しよう。
4. 状態、データ、アクセシビリティの作業を明確に担当として示した上で骨格をエンジニアに渡す。エクスポートは出発点の構造だ。判断が仕事だ。
5. 学んだことをシステムにフィードバックする。Make が推測した場所はすべて、トークンや Code Connect マッピングが曖昧だった場所だ。それらを絞り込むと次のエクスポートが良くなる。システムは複利で成長する。

パターンはヒューマン・イン・ザ・ループであり、ヒューマン・アウト・オブ・ザ・ジョブではない。Make は退屈な翻訳ステップを取り除く。思考は取り除かない。

成果物に何をもたらすか

atlassian.design で見る

これはデザイナーにとって「完成」の意味を静かに変える。長年にわたり、成果物はピクセルパーフェクトなフレームと、エンジニアリングがそれに合わせてくれるという礼儀正しい期待だった。その一致は常に損失を伴っていた。

今やフレームは契約に近い。デザインが実際のトークンを参照し、コンポーネントが Code Connect を通じてマッピングされていれば、エクスポートはドリフトが少ない状態であなたの意図をコードに運ぶ。ハンドオフは翻訳であることをやめ、転送になり始める。

それはシステム作業の価値を高め、きれいなスクリーンショットの価値を下げる。来年勝つデザイナーは、Make がクリーンな出力を生成するほど構造化されたファイルを持つ人たちだ。乱雑なファイルは乱雑なコードをより速く生成し、規律あるシステムは継承可能なコードを生成する。

だから本当のアップグレードは AI ではない。ついにトークンに適切な名前をつけ、コンポーネントをマッピングするプレッシャーだ。Make はその規律が最終的にではなく即座に報われるようにした。

FAQ

6月18日のアップデートは、デザイナーが Figma Make について最もよく聞く質問への実際の回答を変えた。

Figma Make は今やプロダクション対応の React を書くか？

より近くなったが、単独ではない。アップデートは実際のトークンと Code Connect マッピングに紐付けられた React を生成し、これは健全で保持する価値がある。状態、アクセシビリティ、実データはまだあなたに委ねられている。完成した機能としてではなく、強い最初の草稿として扱おう。

Code Connect とは何か、エクスポートにとってなぜ重要か？

Code Connect は Figma ファイル内のコンポーネントをコードベース内の実際のものにマッピングする。Make が新しいボタンを発明することと、チームがすでに管理している Button を Make が再利用することの違いだ。エクスポートが複製を生み出す代わりにソースオブトゥルースを参照する。

Make は私のデザイントークンを使うか、独自の値を発明するか？

あなたのトークンを使う。それが6月18日の変更の核心だ。旧エクスポートは生のhexをマークアップに直接焼き込んでいた。アップデートは値をトークン参照に解決するため、コードはスナップショットを固定する代わりにテーマの変更を継承する。出力に生のhexがあれば、そのフレームはトークンにマッピングされていなかったことを意味する。

Make がまだ不十分な箇所は？

5つの場所がまだ人間を必要とする。上のテーブルと同じものだ：

• 状態ロジック：ローディング、エラー、空、成功
• インタラクションとモーションの挙動
• 明らかでないアクセシビリティ
• 実データ、エッジケース、長い文字列
• コンポーネントを再利用するか新規作成するかの判断

Make はレイアウト、トークンマッピングされたスタイリング、静的な骨格を扱う。判断が必要な箇所に本当の仕事がある。

今週ワークフローを変えるべきか？

はい、小さな一点で。単一のクリーンなコンポーネントで Make を実行し、エンジニアのように diff をレビューし、それが明らかにしたことを使ってトークンと Code Connect のカバレッジを絞り込もう。チーム全体を一夜にして AI ハンドオフに切り替えてはいけない。

まとめ

Figma Make は6月18日にデモからツールへの線を越えた。証拠は @figma のアナウンススレッドの約9,200件のリポストではなく、エンジニアたちがその下に投稿して削除しなかったプロダクションの diff だ。

メカニズムはシンプルだ。Make は生のhexと一点物のマークアップでピクセルを記述することをやめ、実際のトークンと Code Connect マッピングを参照し始めた。それが捨てるコードとマージするコードの違いだ。

チームに誇張して伝えてはいけない。Make は骨格を作る。状態、インタラクション、アクセシビリティ、エッジケースはまだあなたの仕事であり、常にそうだろう。今週の最も賢い行動は、このアップデートをついにトークンと Code Connect を正しくする理由として使うことだ。なぜならクリーンなシステムこそが、この機能をおもちゃから実際に使えるツールへと変えるものだからだ。