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

Figma は、チームが初期のコンセプトからリリースされる体験に至るまで、デジタル製品を作成するためのデザインおよび開発用のコラボレーションプラットフォームです。Claude により Figma Make が強化されたことで、Figma はチームがアイデアや静的モックアップを完全に機能するインタラクティブなソフトウェアへと迅速に変換することを可能にし、想像から現実への移行を加速させることができます。

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 つの革新的な製品に Claude を統合しました。1つ目は、Figma Sites で作業するデザイナーが、要素を選択し、「マウスをその上に置くと傾くホバー効果を追加してください」といった自然言語プロンプトを入力するだけで、既存のウェブサイトデザインにインタラクティブ性を追加できる機能です。Claude は、元のデザインの詳細を維持しながら、高品質なコードを迅速に生成します。

2 つ目の製品である Figma Make は、説明文や既存の Figma デザインからインタラクティブなプロトタイプやアプリを作成します。Li 氏は次のように説明します。「Figma Make はアイデアを実際のソフトウェアへと形にする手段です。ゼロから始めることも、Figma で作成した既存のデザインから始めることもできます」 ユーザーは自分が何をしたいのかを記述したプロンプトを入力するか、Figma Design からピクセル単位で正確なモックアップをコピーするだけで、Claude はそれらを複雑なロジック、アニメーション、レスポンシブな動作を備えた完全に機能するプロトタイプに変換します。

Li 氏は同社の設計思想を明確にし、次のように述べます。「AI はデザイナーの現在のワークフローに合わせて対応すべきです。すでに完璧なデザインを作成している場合は、最初からやり直す必要はありません。Claude は、配置したすべてのピクセルを尊重しながら、インタラクティブ性を追加します」

チームは、Claude のアップデートのたびに目覚ましい改善を実感しました。Li 氏は次のように述べています。「今では、プロンプト 1 つで、グラデーションや多彩なタイポグラフィ、洗練された動きを取り入れた高度なデザインが生成されるようになりました。当社のあるデザイナーは『Claude は優秀すぎて、泣きたくなる』とさえ言っていました」

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

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

Figma の CEO である Dylan Field 氏は次のように述べます。「Sonnet 4.5 は非常に印象的なモデルです。これまでのところ、その先を見据えた計画立案能力や、複雑なコードベースに対する推論能力の高さに非常に感銘を受けています」Field 氏は、このモデルがどのように Figma のデザインを機能するコードへと変換したかを説明しました。同氏は、Figma Design と Make の間のラウンドトリップワークフローの改善点を強調しました。具体的には、デザインをコピーして取り込み、動作するプロトタイプを生成し、それをデザインキャンバスに取り込んでさらに改良を重ね、複数の案を並べて比較できる点です。「Sonnet 4.5 によって、このラウンドトリップワークフローがこれほどまでに改善されるとは思いもしませんでした。非常にうれしい驚きでした」と同氏は述べます。Field 氏はこうした体験を「使って楽しい」と評し、このモデルが Figma Make の機能において「すでに大きな違いを明らかに示している」と付け加えました。

また、Figma は実験的なモデル設定を導入し、ユーザーが、新しい Claude Opus 4.6 を含む最新リリースが Figma Make で利用可能になり次第、すぐにアクセスできるようにしました。Figma のチーフデザインオフィサーである Loredana Crisan 氏は次のように述べます。「Claude Opus 4.6 は、Figma Make において驚くほど幅広い創造性を発揮し、複雑でインタラクティブなアプリやプロトタイプを生成します。このモデルは、最初の試行で詳細なデザインや多層的タスクをコードに変換するため、チームがアイデアを模索し構築するための強力な出発点となります」この実験的な設定により、Claude が進化し続ける中、チームは新しい機能で限界を押し広げることができます。

新しいモデルがリリースされるたびに、チームが創造できるものに対する新しい可能性が広がります。Field 氏は、「AI モデルが進化すればするほど、Figma も進化します」と語ります。

デザインとソフトウェア開発を誰もが利用できるように

技術的な障壁を低くすることで、Claude はあらゆるタイプの Figma ユーザーがアイデアをより迅速に検証し、より創造的な方向性を模索し、製品開発プロセスに多様な視点をもたらすことを可能にします。

スピードは可能性を変えます。Li 氏は自身の経験をもとに次のように説明しました。「Figma Make を用いて、新しい製品フローのプロトタイプを 5 分で作成しました。以前は、デザインとエンジニアリングのサポートなしに、プロダクトマネージャーである私が 1 人でそれを行うことは、文字通り不可能でした」

この高速化により、まったく新しいワークフローが可能になります。初期ユーザーからは、説得力のある事例が寄せられています。あるデザイナーは、スタートアップのアイデアを週末にかけて Figma Make を用いてプロトタイプ化し、それを VC に提案したところ、完全に機能するデモで投資家を感嘆させました。別のユーザーは Make を使用して、長い間棚上げされていたコンセプトを具現化しました。それをインタラクティブに変えたことで、ついに社内で再び議論されるようになりました。

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

この変化は単なるツールの問題にとどまらず、チームが製品開発に取り組む方法そのものを変えつつあります。今や、エンジニアはデザインを行い、プロダクトマネージャーはプロトタイプを作成し、デザイナーはソフトウェアをリリースできるようになりました。Figma Make は、さまざまな役割の境界を曖昧にし、誰もがアイデアを可視化し、デザインプロセスに参加し、製品に命を吹き込めるよう支援します。