簡単なモックアップはもうClaudeのArtifactsでいいと思ってたらFigma AIのほうがいいかもしれない
こんにちは、スクーティーという会社の代表をやっているかけやと申します。
Figmaの新機能発表イベントである「Config 2024」が2024/06/26に開催されました。今回のFigmaの発表、今まででもかなり大きいアップデートでしたが、特にFigma AIが凄いです！「Make Design」で、テキストプロンプトを入力するだけでデザインが自動生成されます。「ピザ検索アプリ」と入力すれば、地図やレストランのカードが瞬時に作成され、テーマや色、フォントもカスタマイズ可能。
「Search for Similar」はスクリーンショットから特定のデザイン要素を簡単に見つけられます。「Make Prototype」ではデザインからプロトタイプを自動生成し、画面遷移やインタラクションを自動設定してくれるので、プロトタイプ作成が劇的にスピードアップします。
先日Anthropicが発表したClaudeのArtifactsがすごく、AIと会話しながらなかなかのHTMLを作ってくるので、とりあえず簡単にモックアップ作って動きを見たい、あるいは誰かに見せたいときはこれでいいなと思っていた矢先のこの発表。もしかしたらFigmaの「Make Design」のほうがすごいかもしれません・・・！
また、Figma AIだけでなく、他の機能も発表されてどれもすごいです。UI3の再設計、Auto Layoutの改善、Dev Modeのアップデート、Code Connectの正式リリース、そしてFigma Slidesが新登場。これでデザインと開発がもっと楽しく、効率的になりますよ！
これを見るだけでもどのような機能がリリースされたか雰囲気はわかると思います。
Figma UIの再設計 (UI3)
Figmaのユーザーインターフェースが全面的に再設計され、ユーザー体験が大幅に向上しました。
新しいUI3では、ツールバーが画面下部に移動し、デザイン作業の中心にコンテンツが配置されます。これにより、ユーザーはデザインに集中しやすくなります。プロパティパネルは選択された要素に応じて動的に変化し、必要な情報を素早く取得できます。
たとえば、フレームを選択するとフレーム特有のプロパティが表示され、コンポーネントを選択するとコンポーネント特有のプロパティが優先されます。さらに、プロパティパネルのリサイズ機能や、位置とサイズのプロパティのクラスター化など、使い勝手が向上しました。ページディバイダーの追加など、小さな改善も多く行われ、全体としてユーザーの作業効率が大幅に向上します。
Auto Layoutの改善
Auto Layoutがさらに強化されました。この機能は、フレーム内の要素を自動的に最適なレイアウトに配置し、手動での調整を減らします。
従来のAuto Layoutでは、ネストされたフレームを作成し、要素を手動で配置する必要がありましたが、Suggest Auto Layoutはワンクリックでこれを自動化します。
たとえば、ボタンやカードなどのコンポーネントをフレームにドラッグすると、自動的に適切な位置に配置されます。また、複雑なデザインや大規模なレイアウトでも、簡単に自動配置できるようになり、デザイン作業の効率が大幅に向上します。これにより、ユーザーはビジュアルの一貫性を保ちながら、迅速かつ効率的にデザインを進めることができます。
Dev Modeのアップデート
Dev Modeに多くの新機能が追加され、デザイナーと開発者の協力がさらにスムーズになりました。
「Ready for Dev」と「Focus View」ビューが新たに導入され、大規模なファイルでも必要な情報を素早く見つけられるようになりました。
Ready for Devビューでは、ファイル内の全ての作業中のコンテンツや開発準備が整ったコンテンツを一覧表示し、開発者が必要な部分に集中できるようにします。
Focus Viewは特定のデザインフレームだけを表示し、他のキャンバスクラッターを排除することで、開発者が必要な情報に即座にアクセスできるようにします。
さらに、「編集済み」や「完了」ステータスの追加により、デザイン変更が発生した際の通知が送信され、デザイナーと開発者のコミュニケーションが円滑になります。これにより、開発プロセス全体の効率が向上し、プロジェクトの一貫性が保たれます。
Code Connectの正式リリース
Code Connectが正式にリリースされ、デザインシステムをDev Modeに直接統合することで、デザイナーと開発者の連携がさらに強化されました。この機能により、React、React Native、iOS、Androidのコードを自動生成し、デザインとコードの一貫性を保つことができます。
たとえば、デザインシステム内のボタンコンポーネントを選択すると、そのボタンのReactコードやSwiftUIコードが即座に表示されます。これにより、開発者は再実装の手間を省き、デザインの細部を正確に反映させることができます。
Code Connectは、コードベースとデザインシステムの間のリンクを作成し、デザイン変更があった場合にも、すぐにコードに反映されるようにします。Spotifyなどの大手企業も、この機能を利用して開発プロセスを効率化しています。
Figma AIの新機能
Make Design: 簡単なプロンプトでデザイン自動生成（ヤバすぎ）
「Make Design」は、テキストプロンプトを入力するだけで、デザインを自動生成する革新的な機能です。
たとえば、「ピザ検索アプリ」を作成したい場合、「ピザ検索アプリ、地図と選択されたレストランのカードを表示」と入力すると、Figma AIがプロンプトに基づいてデザインを生成します。その模様は上記動画で見れます。英語ですが、ものすごくシンプルなテキストのプロンプトで十分過ぎる画面が出来上がっていく様子はわかると思います。ぜひ見てみてください。
この機能は、Figma独自のデザインシステムを利用し、レイアウト、色、フォント、画像を自動的に選定します。生成されたデザインは、テーマや色、フォント、コーナー半径などのカスタマイズが可能で、ユーザーのニーズに合わせて柔軟に変更できます。さらに、プロンプトを追加することで、デザインの細部を調整することもできます。
Search for Similar: 類似デザインコンポーネント検索
「Search for Similar」は、既存のデザイン要素やコンポーネントを迅速に検索する機能です。
たとえば、特定の画面デザインのスクリーンショットをFigmaにアップロードし、「Search for Similar」を使用すると、Figma AIが類似するデザイン要素を自動的に検索して表示します。さらに、特定のテキストを含むデザイン要素を検索することで、必要なコンポーネントをすぐに見つけることができます。
この機能により、ユーザーは大規模なプロジェクトや複数のデザインファイルの中から必要な要素を効率的に見つけることができます。また、コミュニティタブを使用して、Figmaコミュニティ全体からデザイン要素を検索し、他のユーザーが作成したデザインを参考にすることもできます。
Make Prototype: 画面遷移の自動生成
「Make Prototype」は、デザインからプロトタイプを自動生成する機能です。
デザイン要素間の接続を自動的に作成し、インタラクティブなプロトタイプを簡単に構築できます。たとえば、複数の画面間の遷移やインタラクションを設定する際、「Make Prototype」を使用すると、Figma AIが自動的にノードを生成し、スクリーン間の接続を作成します。
この機能により、ユーザーは迅速かつ効率的にプロトタイプを作成し、デザインのインタラクティビティを簡単にテストできます。また、プロトタイプビューアを使用して、プロトタイプがさまざまな画面サイズでどのように表示されるかを確認し、デザインの一貫性を保つことができます。さらに、AIが提案するプロトタイプを基に、自分で細部を調整することで、より高度なインタラクティブデザインを実現できます。
Figma Slides
Figma Slidesは、Figma内でプレゼンテーションスライドを作成・編集できる新しいツールです。このツールは、Figmaの強力なデザイン機能を活かし、プレゼンテーションの作成プロセスを劇的に簡素化します。
たとえば、スライドの背景色を変更すると、テキストの色も自動的に調整されるため、視覚的一貫性が保たれます。また、グリッドモードを使用してスライド全体の構造を視覚的に確認し、スライドの順序を簡単に変更することができます。
さらに、複数のテンプレートを選択してスライドのスタイルを統一し、プレゼンテーション全体の見栄えを整えることができます。インタラクティブデザインやプロトタイプをスライドに埋め込むことも可能で、プレゼンテーションをより動的で魅力的なものにします。
最後に
最後までお読みいただき、ありがとうございます！
弊社では、LLM（大規模言語モデル）やアーキテクチャの選定、技術検証、生成AIを使用したプロトタイピングやシステム開発、お客様社内での啓蒙活動等を対応させていただく「生成AIコンサルティング」サービスを提供しています。
また、業務利用できるChatGPTのような仕組みである「セキュアGAI」や、生成AIとOCRを組み合わせた「AI文書読み取りサービス」といったAIソリューションも提供しています。
ぜひお気軽にお問い合わせください！
この記事が気に入ったらサポートをしてみませんか？