Figma on Figma: UI3をデザインするための私たちのアプローチ

Figmaの最新インターフェースであるUI3に対する私たちの目標は、デザイナーの注意をそらす要素を最小限に抑え、仕事に焦点を当てることで作業の流れをスムーズに保つことです。この目標を念頭に置いて、当社のチームは2年以上にわたり、さまざまなアプローチを試行錯誤しました。フローティングナビゲーションやプロパティパネルのような中核となる一部のデザイン上の決定を、製品のローンチ後に見直すこともありました。これらはすべて、Figmaを毎日使用する何百万人ものユーザーに次世代のFigma UIを提供するために行われてきました。FigmaのデザインディレクターであるMarcin Wicharyは、「技能やフローには簡単な指標がないため、ユーザーの意見をよく聞き、フィードバックを注意深く処理する必要があります」と述べています。

私たちは、デザイナーのために再設計するというのは、目的地を設定するだけでなく、誰もがそのジャーニーに確実に乗り気であるという意味だと学びました。10月10日にUI3を全ユーザーに公開するにあたって、私たちは技能、指標、直感、フィードバックがこれまでいかに重要な道しるべであったかを共有しています。

ドッキングパネル: 探索の機会を受け入れる

デザイナーにとって、製品の再設計は威圧的に聞こえるかもしれませんが、「再考できないと感じるものを再考する」ためのめったにない機会でもあるとMarcinは語っています。「何が実際に機能するのか、または最初からそれほど良くなかったのか、または奇妙に慣れてしまっているだけなのかなどを熟考できます。簡単な答えは決してありませんが、質問は魅力的です」

FigmaのプロダクトデザイナーであるJoel Millerは、「これは現状に挑戦し、より大胆なアイデアを試し、人々がFigmaと関わり合う方法を再形成するための貴重な機会でした」と加えています。チームは「大胆で面白いコンセプト」、特にインターフェースの基礎部分となるナビゲーションとプロパティパネルに関するものについて議論しました。ある実験では、パネルはカーソルを合わせた場合にのみ表示され、別の実験ではキャンバスの上に浮かんでいました。FigmaのプロダクトマネージャーであるKC Ohは、「安全策を取ると、限界がどこにあるかわからない場合があります」と述べています。私たちはフローティングパネルのアイデアにたどり着き、製品エコシステム全体にわたって持続するシンプルで親しみやすいインターフェースを作成しました。そしてこれが大きく逸脱しすぎているかどうかは、フィードバックが教えてくれると考えました。

UI3をオープンベータ版としてリリースして初めて、機能の採用、パフォーマンス指標、ユーザーからのフィードバックを通じてその影響を完全に測定できるようになりました。フローティングパネルは一部のユーザーには魅力的でしたが、Figmaで1日に何時間も作業するユーザーには邪魔になることが判明しました。特に小さな画面ではキャンバスが窮屈になり、デザインが後ろからちらりと見えて気が散るという意見がありました。また、定規をデザインから遠ざけたことも、効果を低下させました。「Figmaを速くすることを望んでいます。スピードは機能ですが、これがとどめを刺すように人々のペースを落としていることに気づきました」とKCは説明しています。UI3を完全にロールアウトするために、この変更を元に戻してバネルを固定しましたが、より高い柔軟性を確保するために、サイズを変更できるようにしています。

UIの最小化: 単一のビジョンに向かう

「あらゆるクリエイティブなプロジェクトにおいて、世界とその変化に対する信念が必要です。その信念がアプローチを導いてくれます」とFigmaのプロダクトデザイナー、Ryhan Hassanは説明しています。新しいインターフェースに関しては自由にデザインできたものの、私たちには数年分のユーザーからのフィードバックを解析する必要がありました。これらの問題の解決策を模索する中で、重要なインサイトが浮かび上がりました。UIパターンやインタラクションは今後数年で進化するかもしれませんが、仕事がキャンバスの中心であるべきという考えは変わらないということです。

これにより、UIが本当に必要な場所はどこなのかという疑問が生じました。既存の「UIを非表示」機能により作業が中心的な存在になるものの、一部のユーザーはこれがぶっきらぼうで制限するものだと感じていました。新しい「UIの最小化」機能は、サイドパネルを折りたたむことで作業に集中できる柔軟性を提供しますが、ユーザーは必要なときにツールに簡単にアクセスできます。リモートワークやハイブリッドワークでは一般的な小画面や分割画面でのナビゲーションも、よりスムーズに行えます。

UIが実際に動き出す場合に備えて、私たちは一部の機能を再配置して階層をより明確にし、将来の機能を挿入するための合理的な場所も確保しました。「再設計する前は、新機能を組み込みながらテトリスをしているようでした」とRyhanは説明します。現在は、例えば、ナビゲーションパネルにはファイル名、ブランチ名、プロジェクト名が直線的にリストされ、その後にページとレイヤーが続きます。「ファイルの移動方法をさらに増やすことで、これらのファイルを厳しいトレードオフなしに拡張できる合理的な場所を確保しました。全体として、私たちはまだ達成できない目標に向かって前進しているところです」とRyhanは言います。

ブレンドモード: 過去と現在の架け橋

「大雑把に言えば、インターフェースの補助輪の一部を削除したと言えます」とMarcinは述べています。「例えば、Shiftを使ったコマンドショートカットは、キーボードの仕組みを考えると表面上は間違っているにも関わらず、今では当たり前になっており、半透明のスクロールバーも至る所にあります」UI3のために、これらの進化するトレンドや、特にブレンドモードに与える影響について交渉するのは興味深い挑戦だったと彼は述べています。「ブレンドモードには90年代にまでさかのぼるしきたりがあります。Figmaを思いつくよりずっと昔です」

初期段階では、メニューが表示されるように、チームはこのコントロールをアイコンボタンの背後に配置しました。ブレンドモードをデフォルトから変更すると、アイコンも変わります。このアプローチにより、再設計の目的の1つである外観パネルを簡素化できましたが、設定されたブレンドモードをユーザーが知るためにはアイコンの上のツールチップを待たなければならず、ワークフローが遅くなりました。現在は、ユーザーが非標準のブレンドモードを選択すると、設定をインラインドロップダウンで簡単に変更または削除できます。これはUIを最小限に保ちながら、ブレンドモードの黎明期を思い起こさせるソリューションです。

プロパティパネル: ユーザーと共に構築する

「私たちは常にバランスを取り、可能な限り前に進む努力を続けると同時に、古いインターフェースから移行するユーザーにとってUI3が論理的に進化することを確実にしています」とRyhanは述べています。しかし、何かに長年取り組んでいると、自身の観点にとらわれがちになります。「だからこそ、コミュニティから定期的にフィードバックを収集し、それに基づいて行動していると示すことが重要です。最高の製品は、それに携わるチームだけではなく、それを使用するユーザーとの密接なコラボレーションにより構築されるからです」とJoelは語っています。

プロパティパネル全体の進化において、私たちはコンポーネントコントロールを最優先し、新しいレイアウト関連オプションの統一、ヘッダーの見直しに重点を置きました。リリース後のフィードバックを反映し、制約をデフォルトで拡張されるように変更し、コンポーネントのライブラリ情報を追加し、オートレイアウトコントロールを更新して常にピクセル値とサイズ変更モードが表示されるようにしました。「私たちは確実に何かに挑戦し、どのように反復しているかを示し、広範囲の人々の意見に耳を傾けています」とRyhanは説明します。

コンテンツを隠すことについては、チームは更新されたプロパティパネルに適合するためのさまざまな方法や、長年の問題を解決するための方法を調査しました。あるイテレーションでは、「コンテンツを隠す」はアイコン付きのトグルになり、他の場合ではアイコンボタンやメニューになりました。パブリックベータでは「コンテンツを隠す」はドロップダウンオプションでしたが、余分なクリックが増え、ワークフローが遅くなりました。最も明確で効率的なコントロールとしてチェックボックスに戻り、インターフェースの他の部分とのバランスを取るために視覚的に更新しました。「スタート地点とほぼ同じ場所に戻ってきたので、敗北のように感じたかもしれません」とMarcinは述べています。「でもまったくアイデアを出さないより、アイデアを出して失敗した方がいいですよね?」

ユーザーからのフィードバックとデザインに対する直感を調和させようとすると、本質的な疑問が生じます。「例えば、批判的なフィードバックを受け取ったとします」とMarcinは続けます。「それは変化に対する単なる自然な反応でしょうか、それとも長期的に続くものでしょうか?このアイデアに基づいてすでに構築された自己批判につながるものでしょうか?負のフィードバックは正のフィードバックと適切な比率で釣り合っているでしょうか?ある意味親近感がわきます。なぜならデザインの批評

を残すのは各デザイナーの仕事だからです。ですがその量は千倍に及びます」

スライダー: チーム全体を動員する

デザイン批評に関しては、それらもUI3の差し迫ったニーズに対応するために進化する必要がありました。通常の、30分間の個別のデザイン批評の代わりに、チームは個々の作品に対して全員で同時に意見を出し合う60分間の「スピードラウンド」を開発し、UI3のために再考された膨大な量のデザインに対処しました。「これは2か月間の集中的な調査で、チーム全員が動員されました」とKCは説明しています。

スピードラウンドを行うことで、デザイナーは負荷を分散し、自己選択できました。ある人はビジュアルの細部に集中し、他の人はフローや全体像に集中しました。Figmaのプロダクトデザイナー、Wayne Sunにとって、これらの批評はスライダーコンポーネントのようなコアビルディングブロックの再検討に役立ちました。このプロセスにより、動画のスクラブで表示する数値や、バリアブルフォント、色を操作する場合の色相や不透明度プレビューの調整時のノッチなど、適応する必要があったすべてのコンテキストが明らかになりました。さらに、Figma Slides

というまったく新しい製品に適合する必要もあったのです。

ラベル: 確固たる根拠に基づいた意思決定

「これらのツールを日々活用しているデザイナーにとっては、ごく小さな変更でも大きな変化に感じるでしょう」とJoelは述べています。「威圧的に感じ、これが大失敗したら?完全に的を外してしまったら?と不安になるでしょう。だからこそ、すべての変更は、効率性や一貫性を真に向上させる、堅実で賢明な動機に基づいている必要があります」

FigmaのUXライター、Hoi Fung Hoは、明瞭さを損なわないシンプルさを追求して、人々が道を見つけるのに役立つ新しいラベリングシステムを提案する際に、これを経験しました。「オプションのラベルがあるシステムを見たことがなかったので混乱し、自信を失ってしまいました」と彼女は語ります。

特に解決が難しかったのは、新しいラベルと既存のツールチップの交差でした。初期のミニマリスト的なアプローチは有望でしたが、チームは後にそれがアクセシビリティを損なうことを知りました。「これは決定的な瞬間でした。私はすばやくアプローチを元に戻しました。最終的に『これが私たちのやっていることで、疑問が消えたのはこのためだ』と示すことができたので、よかったです」とHoiは振り返ります。現在、すべてのラベルはフルコンテキストを提供しているため、実装がより容易になるという利点があります。

ラベルは、粗雑なものから洗練されたものへと変えるために重要であり、新しいインターフェースの全体的な品質にも重要でした。WayneのUIコントロールへの取り組み、Timの図像のオーバーホール、Joelのプロパティパネル改善への推進、Ryhanの全体的なビジョンへの注力、そしてその他多くのFigmaデザイナーの貢献が統合されました。

変更管理：ユーザーが適応するための時間を確保する

しかし、最終的には、どんな新しいインターフェースも私たちのためのものではありません。「再設計はデザイナーにとっては楽しいことですが、ユーザーにとっては実に恐ろしいことです」とMarcinは述べています。「適切なタイミングなどありえないと感じます」

そのため、UI3がベータ版である間に、ユーザーが自分のペースで新しいインターフェースに慣れることができるように、オプトアウトの方法を提供しました。「水曜日にUI3を入手し、金曜日が仕事の締め切りである場合、古いバージョンに戻って作業を完了することができます」とRyhanは述べています。段階的なロールアウトを行うことで、私たちはユーザーエクスペリエンスから学び、フィードバックを処理する時間を確保し、チュートリアルを構築することができるので、UI3がデフォルトになって古いインターフェースが廃止になった場合に、答えをすぐに入手することができます。

「しかし、私たちは皆さんが戻って来ることを願っています。UI3には多くの魅力があり、まだ完成していないからです」とMarcinは説明します。

「コンテンツを隠す機能は、完成しています」とJoelは加えています。

10月10日からすべてのユーザーに利用可能になるUI3を詳しく調べるとともに、フィードバックを引き続きお寄せください。皆さんのインサイトがデザインツールの未来を1ピクセルずつ形作っています。