Figma Makeを使用してデザインチームが新しい領域に進むための4つの方法

Figma Makeを使用することで、デザイナーはイマジネーションから現実への新しい方法を見つけています。コンセンサスを得ること、異なる方向性を探ること、クロスファンクショナルパートナーと協力することなど、プロンプトからアプリへのツールは、デザイナーが確立されたデザインシステムと一貫性を保ちながらアイデアを検証し、伝えるのを助けます。それは、冗長なレイアウトを構築し、ヌードルを接続する時間を節約し、味、戦略、ビジョンに時間をかけることを意味します。独自のワークフローのアイデアのインスピレーションを得るために、Maven Clinic、Pendo、ServiceNow、LinkedIn のデザインチームがFigma Makeをどのようにデザインパートナーとして使用しているか紹介します。

1. アイデアをロードマップに戻す

女性と家族のためのヘルスケアプラットフォームであるMaven Clinicは、不妊治療や妊娠から、親子関係や小児科、さらには更年期や中年期の健康に至るまで、メンバーがさまざまな問題をナビゲートするのをサポートします。2024年初頭、彼らは雇用主提供型のMaven Managed Benefitプログラムを立ち上げ、会員を審査済みの不妊治療クリニックによるクローズドなネットワークにつなげました。締め切りが厳しいため、チームは、地図ベースの不妊治療クリニックファインダーを含む、特定の機能をローンチのために遅らせる必要がありました。アイデアを再検討する時期が来たとき、MavenのプロダクトデザインマネージャーであるLoric Avanessianは、支持を集めるためにモックアップ以上のものが必要であることを知っていました。そこで彼女はFigma Makeに目を向けました。

「デザイナーの最大の強みは、アイデアや会話を、人々が新機能にワクワクできる形あるものへと変えられることです」とLoricは語ります。彼女は初期デザインの一部をFigma Makeに取り込み、人々が実際に操作できる高忠実度のプロトタイプを作成しました。「それはまるで私たちの製品の一部のように見え、リアルに感じました」と彼女は続けます。「それはSlackで広く共有され、CEOがコメントし、今年優先する機能のカットラインの下に来ることがあり得たところを、再び我々のロードマップに戻すことができました。」

Loricはそのプロトタイプを別のデザイナーに送り、デザインを反復・改善した後、再びFigma Makeに取り込みました。そのプロトタイプは、より深い部門間の同意を得て、迅速でより集中したフィードバックを得るのに役立ちました。「それにより、細部のインタラクションを特定することができました。構築を開始するまで気づかないものです」とLoricは言います。「私たちはゼロではなく45％から始めたので、Design、開発、テスト、ローンチを4回のスプリント未満で行い、クリニックファインダーMVPをリリースすることができました。それは2年もバックログにあったのです。」

Loricによれば、Figma Makeを使うことで、デザイナーの役割は実行からテイスト、戦略、ビジョンへと重心が移っていると言います。彼女は最近のプロジェクトについて語ります。そこではFigma Makeがプロダクト要件文書(PRD)に先行しました。実際、チームは初期プロトタイプで機能している点と不足している点に基づいて要件を書きました。「Figma Makeは、空白のキャンバス問題を解決し、そこからアイデアを膨らませる手助けをしてくれます」と彼女は言います。「また、たくさんのアイデアを素早く試し、その後にデザイナーとしての本来のスキルセットである精緻化と洗練を加えることができます。」

2. 未知を探求する時間を作る

場合によっては、新しい製品には明確な前例があり、それをDrawから得られることもあれば、設計図がそれほど明確でないこともあります。AIプラットフォーム企業ServiceNowは、異なるAIエージェントのROIの概要を顧客に提供するダッシュボードを設計するにあたり、後者の状況にありました。「Figma Makeは、この特定の分野でとても良かったです。というのも、非常に調査が難しい未知の要素がたくさんあるからです」と、ServiceNowのシニアスタッフプロダクトデザイナーであるGuy Meyerは述べています。

さらに、ServiceNowの別々のチームは、ダッシュボード上の情報の階層構造に対するアプローチに関して異なる考えを持っていました。「Figma Makeは、ダッシュボードで人々が何を見たいのか理解するための地図を提供してくれました」とGuyは語ります。「わずか5分で、いくつかのアイデアを検証することができました。」何が機能しているかを理解することを明確化する一方で、最初のプロトタイプがどこで不十分だったかを見ることは、さらに有益でした。例えば、Guyは、Figma Makeが提示したAIエージェントのマトリクスは拡張できないと言います。それはあまりにも大きなグリッドになってしまうからです。「現時点で、多くの企業がAIの旅を始めたばかりの時期には良い解決策でしたが、将来的に何千ものシステムで顧客が働くかもしれないときに備えて、基盤を築こうとしています。」それで、よりカスタムなソリューションを検討し始めました。

人々が新しいアイデアへの道筋を促すのがどれほど容易になったかについて「Designが民主化された」とGuyは言います。「誰でも自分のバージョンを促すことができ、私たちは好きな部分を選ぶことができるのです。」それはまた、アイデアに縛られるエゴや時間のコミットメントを取り除きます。チームが異なる方向性をDesignしフィードバックを得るのに数週間かかっていたのに対して、Figma Makeはそのループを2、3日まで短縮します。「Figma Makeは、クロス ファンクショナルなパートナーを調整するツールです。なぜなら、それがアーティファクトを素早く実行し、私たちが議論するためのものを提供できるからです。」とGuyは言います。「それにより、デザイナーの役割が単なる実行から、AIが構築する質をレベルアップすることに進化します。」

3. 新しいインターフェースでコラボレーションして改良する

行動アナリティクスと主体的アナリティクスの活用、アプリ内ガイドの作成、質的フィードバックの収集のためのツールを使って、Pendoは製品チームがより情報に基づいた意思決定を行うのを助けます。シニアスタッフプロダクトデザイナーのブライアン・グリーンバウムが、Pendoのための会話型UI、現在はAgentモードと呼ばれるものを作成する任務を課せられたとき、彼はFigma Makeを手に取りました。「これは適切なツールでした。理由は3つあります。A: Pendoらしく見せたかったこと、B: 複数のバリエーションを作りたかったこと、そしてC: 体験型のデザインだったことです。」私は閲覧されるメッセージのタイミングやどのようにして現れるか消えるかを実験したいと思いました」と彼は言います。

Figma Designのフレームから始めて、BrianはFigma Makeで、理由メッセージとツールの応答がどのようにストリームされるかを反復するインターフェースを作成しました。さまざまなバリエーションを試すために、彼はよりミニマルな閲覧と詳細な閲覧、シングルラインテキストとスタックテキストを選ぶことができるドロップダウンメニューを追加しました。誰でもファイルに入り、クリックして、UI がどのように見えて感じるかを理解することができました。最終的に、チームはユーザーがツール内の方向性を把握できるように、メッセージのより持続的な痕跡を維持することを決定しました。「デザインの成果物がなければ、人の頭の中にあるイメージについて議論することになります」とBrianは言います。「私が何かを説明すると、あなたの中にもそのイメージが浮かび、私の中にも別のイメージがありますが、それらは必ずしも一致していません。」

具体的なデザインがあるということは、他の人々がブライアンの仕事を基にアイデアを広げることができるということでもありました。コラボレーターが円形のローディングアイコンをアニメーション化されたPendoのロゴに置き換えることを提案したとき、彼はすぐにそれを切り替える方法を提示しました。「以前は、これらのバリエーションが多いのでプロトタイプが価値がないかもしれないため、静的デザインをモックアップしていたでしょう」とBrianは言います。「でも、コードを使えばより早くそれを実現できます。」

4. 初期の探求にデザインシステムを組み込む

LinkedInでは、デザインシステムチームは、その他のプラットフォームと視覚的に一致した体験を作成するために必要なスタイル、データ、ツールをデザイナーに提供することに焦点を当てています。LinkedInのスタッフデザインエンジニア、Grant Blakemanは言います。「彼らはアプリのこの部分にどんなパターンが必要かと聞いてくるのと同じように、ツールについても質問してきます。」

そのために、チームは Figma Makeでスターターテンプレートを作成しました。これにより、最初のプロンプトの実行から任意のデザインの3つのバリエーションが自動的に生成され、デザイナーはウェブ、モバイル、タブレット向けのレイアウトを簡単に作成し、ライトモードとダークモードを切り替えることができます。「私たちは、コンポーネントやスタイルだけでなく、製品のパターンにも正確に従うより決定論的な出力を得ようとしていました」と、プロダクトデザイナーのCherin Yooは言います。また、頻繁に使用されるコンポーネントや内部CSSのカラースロープのガイドラインもテンプレートに追加しました。「LLMは我々が与える制限の中で選択を行います」とCherinは説明します。「そして、このテンプレートはその制限を狭めるのに役立ちます。」最近、チームはテンプレートを使用して、リーダーシップチームにプレミアムプランのサインアップページをデモしました。

プレゼンテーション中にユーザー情報をプライベートに保つために、プロダクトデザイナーのRay Sunはコードをカスタマイズし、架空の企業や人物からのモックコンテンツをデザインに組み込むメタデータを統合しました。このようにして、デザイナーはFigma Makeのフローを維持しながら、法的に精査されたデータをテンプレートに取り込んでいることを知ることができます。

2003年、Design Councilはデザインプロセスを示すDouble Diamondモデルを開発しました。このモデルは、Discover、Define、Develop、Deliverという4つの明確なフェーズを定義しています。

ワークフローの観点から言えば、Figma Makeはデザイナーが広く探求するだけでなく、より効果的にコミュニケーションを図ることができると、LinkedInのデザインシステムディレクターであるジュリアーノ・マンノは言います。「クラシックなダブルダイヤモンドデザイン思考パターンにおいて、Figma Makeは、ダイヤモンドの2つの頂点を広げることができ、より速い発散と探査作業を可能にします」と彼は言います。「エンジニアやプロダクトマネージャーとの会話において、UXパターンに関するメンタルモデルを伝える際にも非常に優れています。」「Figma Makeを使ってわずか5分で、誰もがそのアイデアにピンとくる何かを生成することができるのです。」

Figma Makeのようなツールは、これまでの他のプロトタイプの種類では得られなかった忠実さと使いやすさの組み合わせを持つコミュニケーションツールだとGrantは同意します。これにより、デザイナーがコードを使って実験することのハードルが下がっています。「私はデザイナーがより技術的に進化し、Figma Makeを使用するデザイナーがコードをいじることに対して恐れを抱くことが減るのを目の当たりにしています。彼らは、エンジニアにとって多くの時間を要する、あるいはそもそもリソースが割り当てられなかったであろうデモを今や作成できます。」

Figma Makeはベータ版を終了し、現在はすべてのユーザーが試せる形で提供されています。