脚本プランナー▸ 
AIアプリ 
AIニュース Figma Make：Figmaが発表したデザイナー向けの新しいコーディングツール
小编 ·
Figma Make：Figmaが発表したデザイナー向けの新しいコーディングツール
Figma Makeとは？
Figmaは2025年のConfigでFigma Makeを発表しました。これはデザイナーがデザイン案を直接プロダクトに変換できる全く新しいプログラミングツールです。Figmaのデザイン案を直接インポートでき、簡単な指示だけでWebページを生成でき、リアルタイムで編集できるため、従来のコーディングにおける煩雑な手順を省略できます。さらに、Figma MakeはAIと対話でき、デザインと開発の間のコラボレーションをより効率的にします。Figma的这一手不仅拓展了デザイターの役割を拡張しただけでなく、業界により多くの可能性をもたらし、「デザイン即コード」という理念を実現しました。
Figma Makeの主な特徴
デザインからプロトタイプへの迅速な変換：ユーザーはFigma DesignのフレームをAIモデルに直接コピーでき、その構造とメタデータを保持します。その後、「このボタンにアニメーションをトリガーさせる」や「この要素がスクロールに反応するようにする」といった簡単なプロンプトを通じて、インタラクティブなプロトタイプを迅速に生成できます。
正確な編集と反復：デザイナーはデザイン要素をクリックして自然言語で希望の変更を記述することで、デザインシステムのコンポーネント階層と一貫性を維持しながら、正確な編集と反復を実現できます。
ゼロから始める必要なし：ユーザーはプロトタイプをゼロから作成する必要はなく、既存のデザインファイルに基づいて直接操作できます。
チームコラボレーション：Figma Makeはチームコラボレーションをサポートしており、ユーザーはチームメンバーとプロジェクトを共同で編集できます。
コードの生成と修正：ユーザーのプロンプトに基づいてコードを生成できます。また、チーム内に開発者がいれば、コードを変更して調整を行うことも可能です。
Figma Sitesとのシームレスな統合：Figma MakeはFigma Sitesとシームレスに連携でき、ユーザーは生成されたプロトタイプをFigma Sitesで公開されたページに簡単に埋め込むことができ、デザインから公開までの一連のフローを実現します。
Figma Makeの使用シーン
迅速なプロトタイプデザイン：デザイナーはFigma Makeを活用して、デザインアイデアをインタラクティブなプロトタイプに迅速に変換できます。
チームコラボレーションとコミュニケーション：チームプロジェクトでは、デザイナーと開発者が共にFigma Makeを使用し、デザインと機能を迅速に反復できます。
小規模チームまたは個人開発者：Figma Makeは、深いプログラミング知識がなくてもWebアプリケーションを迅速に作成・テストする方法を提供します。
メリット
技術的なハードルの低下：プロンプトとAIにより、複雑なインタラクションデザインの技術的障壁が軽減され、デザイナーや技術のない人でも簡単に使い始めることができます。
デザイン効率の向上：デザインから開発までの時間と労力を節約し、デザイナーがクリエイティブな作業により集中できるようにします。
強力なコラボレーション能力：複数の人が同時に同じプロジェクトを編集することをサポートします。
Figma Makeの使用方法
基本操作
デザイン案のインポート：Figma DesignのフレームをAIモデルに直接コピーし、その構造とメタデータを保持します。これにより、ゼロから始める必要なく、既存のデザインに基づいてインタラクティブなプロトタイプを迅速に生成できます。
インタラクティブプロトタイプの生成：「このボタンにアニメーションをトリガーさせる」や「この要素がスクロールに反応するようにする」といった簡単な自然言語プロンプトを通じて、AIがプロンプトに基づいてインタラクション機能を持つプロトタイプを迅速に生成します。
リアルタイム編集とコラボレーション：ユーザーは右側のプレビューウィンドウで生成されたアプリケーションをリアルタイムで確認し、要素をクリックして正確に編集できます。同時に、Figma Makeは複数人が同じプロジェクトでコラボレーションすることをサポートしており、チームメンバーは共同で編集できます。
高度な機能
動的データテスト：ファイルのアップロードや動的な情報フローの表示など、実際のデータを使用してデザイン機能をテストし、実際のシナリオにおけるデザインのパフォーマンスをチームがよりよく理解できるようにします。
クロスデバイス対応：デザインをあるデバイス形式から別の形式（デスクトップからモバイルなど）に迅速に変換し、クロスプラットフォームテストを行い、さまざまな画面でのデザインのパフォーマンスが一貫していることを確認します。
コードの生成と修正：AIがコードを生成し、開発者が参加する場合は、コードを直接変更して必要な調整を行うことができます。
デザインからコードへのシームレスなワークフロー：Figma Makeは既存のFigmaワークフローに直接統合されており、Figma DesignからFigma Sitesまで、当初のコンセプトからインタラクティブプロトタイプ、そしてWebサイトの公開まで連続的なパスを作成します。
詳細情報：https://www.figma.com/make/
