Figma、Claude の活用で アイデアをインタラクティブな ソフトウェアに変換

Figma は、チームが初期コンセプトから出荷体験までのデジタルプロダクトを制作するコラボレーティブなデザイン＆開発プラットフォームです。Claude が Figma Make を支えることで、チームはアイデアや静的なモックアップを完全に機能するインタラクティブなソフトウェアに迅速に変換し、想像から現実へのプロセスを加速できます。

Claude による主な成果

• デザイナー、開発者、プロダクトマネージャーがコードを書かずに数分で動作するプロトタイプやアプリを作成
• 時間のかかるタスクを自動化することで、チームがより多くのデザインやプロダクトのアイデアを探索
• デザイナーでない人もアイデアをビジュアライズできるようになり、より多くの人がデザインプロセスに参加可能に
• Claude Sonnet がコード品質、デザイン意図、スピードの面で一貫して優れた成果を発揮

デザインの進化

Figma は、AI によりデザインの役割が急速に進化していることを認識していました。リーディングデザインプラットフォームとして、デザイナーがクリエイティブな影響力を拡大し、デザインに命を吹き込むことを可能にしながら、より多くの人をデザインプロセスに招く機会を見出しました。

AI は、デザインアイデアを素早くビジュアライズし、シンプルなプロンプトで静的なモックをインタラクティブな体験に変える新しい方法を提供します。この機能を Figma に導入することで、チームは手動でプロトタイプを作成したりコードを書いたりすることなく、さまざまな方向性を探索できます。

この進化は、より広範な業界の変化とも一致していました。Figma のプロダクトマネージャーである Alex Mullans 氏は次のように述べています。「デザインと開発の間の従来のハンドオフは摩擦を生みます。開発者が『これが作ったものです』と戻ってきても、元のビジョンと一致しないというやり取りが発生します」Figma のコラボレーティブプラットフォームは、プロセス全体を通じてクラフトと品質を維持するために、デザインと開発をより密接に結びつけます。

技術力とデザインセンスで Claude を選択

AI モデルを評価する際、Figma はデザインの意図や美学を理解しながら高品質なコードを生成できるソリューションを求めていました。

Mullans 氏は評価プロセスについて次のように述べています。「私たちは定期的にさまざまなモデルを評価しています。Claude は一貫して、スピード、精度、ユーザーの意図の理解の適切な組み合わせを提供してくれます」

Claude のデザインセンスも差別化要因であるとチームは述べています。Figma Make のエンジニアは次のように説明しています。「Anthropic が登場する前は、AI モデルは知的であっても、センスや個性に欠けていました。デザインの生成を依頼しても、平坦な結果が出てきていました。そして Anthropic が登場し、知的でありながらセンスも備えたモデルが実現しました」

Figma Make のプロダクトマネージャーである Holly Li 氏は、Claude の能力を直接体験しています。「私は React を独学して自分のウェブサイトを作るのに 30 時間を費やしました。Claude を使えば、そのコードをたった 1 日でリファクタリングして改善し、ずっと実装したかった機能も追加できました」

チームは、Claude Sonnet をブレークスルーの瞬間として認識しました。コード生成が Figma Make のビジョンを実現できるほど十分な品質に達したポイントです。

自然言語によるインタラクティビティ

Figma は Claude を 2 つの革新的なプロダクトに統合し、アイデアをコードベースのソフトウェアに変換します。まず、Figma Sites で作業するデザイナーが、既存のウェブサイトデザインにインタラクティビティを追加できます。要素を選択して「マウスオーバー時に傾くホバーエフェクトを追加して」のような自然言語のプロンプトを入力するだけです。Claude は元のデザインのディテールを保持しながら、高品質なコードを迅速に生成します。

2 つ目のプロダクトである Figma Make は、説明文や既存の Figma デザインからインタラクティブなプロトタイプやアプリを作成します。Li 氏は次のように説明しています。「Figma Make はアイデアから実際のソフトウェアへと導くツールです。ゼロから始めることも、Figma で作成した既存のデザインから始めることもできます」作りたいものを説明するプロンプトを入力するか、Figma Design からピクセルパーフェクトなモックアップをコピーすると、Claude が複雑なロジック、アニメーション、レスポンシブな動作を備えた完全に機能するプロトタイプに変換します。

Li 氏はデザイン哲学について次のように述べています。「AI はデザイナーがいる場所で彼らを支えるべきです。すでに完璧なデザインを作り上げているのであれば、やり直す必要はありません。Claude は配置されたすべてのピクセルを尊重しながら、インタラクティビティを追加します」

チームは Claude のアップデートごとに目覚ましい改善を実感しています。Li 氏は次のように共有しています。「今ではプロンプトからグラデーション、多様なタイポグラフィ、細やかなモーションを備えた洗練されたデザインが生成されす。私たちのデザイナーの一人は『Claude は素晴らしすぎて泣きそう』と言っていました」

新モデルがビジョンを加速

Figma チームは常に最新の Claude モデルをテストし、最先端を走り続けています。

「Sonnet 4.5 は非常に印象的なモデルです」Figma CEO の Dylan Field 氏は述べています。「先を見据えた計画能力と、複雑なコードベースについての推論能力に、これまでのところ非常に感銘を受けています」Field 氏は、このモデルが Figma のデザインを機能的なコードに変換する様子を説明しました。Figma Design と Make の間の改善されたラウンドトリップワークフローを強調しました—デザインをコピーして動作するプロトタイプを生成し、それをデザインキャンバスに戻してさらに反復し、探索結果を並べて比較するというフローです。「Sonnet 4.5 でこのラウンドトリップがどれほど改善されるか、予想もしていませんでした…とても嬉しい驚きでした」と述べています。Field 氏はこの体験を「操作していて楽しい」と表現し、このモデルが「Figma Make の機能においてすでに大きな違いを見せている」と付け加えました。

Figma はまた、実験的なモデル設定を導入し、ユーザーが最新リリースにアクセスできるようにしました。「Claude Opus 4.6は、Figma Make において、印象的な創造性の幅を持つ複雑でインタラクティブなアプリやプロトタイプを生成します」と、Figma のチーフ・デザイン・オフィサーである Loredana Crisan 氏は述べています。「このモデルは、詳細なデザインや多層的なタスクを初回でコードに変換し、チームがアイデアを探求し構築するための強力な出発点となります」。この実験的設定により、Claude が進化し続ける中で、チームは新たな機能を活用しながら限界に挑戦することが可能になります。

モデルが新たにリリースされるたびに、チームが創り出せる可能性はさらに広がります。「AI モデルが進化すればするほど、Figma もより良くなっていきます」と、Dylan Field 氏は述べました。

誰もがデザインとソフトウェア開発を行えるように

技術的なハードルを下げることで、Claude はあらゆるタイプの Figma ユーザーがより迅速にアイデアを検証し、より多様で創造的な方向性を探求し、プロダクト開発プロセスに多様な視点を取り入れることを可能にします。

スピードは「何が可能か」を根本から変えます。Li 氏は自身の体験を次のように語っています。「Figma Makeを使って、新しいプロダクトフローのプロトタイプをわずか5分で作成しました。以前であれば、デザイナーやエンジニアのサポートなしに、プロダクトマネージャーの私一人でそれを行うことは文字どおり不可能でした」

この加速は、まったく新しいワークフローを可能にします。初期ユーザーからは、印象的な事例が共有されています。あるデザイナーは、週末の間に Figma Make を使ってスタートアップのアイデアをプロトタイプ化し、ベンチャーキャピタル（VC）に提案しました。完全に機能するデモを披露したことで、投資家に強い印象を与えました。また別のユーザーは、長らく棚上げされていたコンセプトを Make で形にしました。インタラクティブにしたことで、社内で再びそのアイデアについて議論が始まったのです。

個人の生産性向上を超えて、Claude はプロダクト開発に誰もが参加できる環境を広げています。Mullans 氏は次のように述べています。「スプレッドシートやデータテーブルで考えるプロダクトマネージャーも、今では自分のアイデアを伝えるためのビジュアルプロトタイプを作成できます。エンジニアも、CSS に時間をかけることなく、インターフェースを素早くモックアップできます。組織全体の誰もが、より効果的にデザインプロセスへ貢献できるようになりました」

その変化は単なるツールの進化にとどまりません。チームがプロダクト開発に取り組む姿勢そのものを変えています。今では、エンジニアがデザインを行い、プロダクトマネージャーがプロトタイプを作成し、デザイナーがソフトウェアをリリースすることも可能になっています。Figma Make は職種間の境界を曖昧にし、誰もがアイデアを可視化し、デザインプロセスに参加し、プロダクトを形にできる環境を後押ししています。