ユーザーの作業を中心に考えたFigmaのリデザイン

約10年前にFigmaをリリースして以来、多くの変更を実施してきましたが、新機能、特徴、製品の中でも、Figmaのレイアウトの芯は数年に渡って特に変更してきませんでした。これは意図的なもので、1日に多くの時間をFigmaで過ごすユーザーにとって、これまで作り上げてきたワークフローが維持、尊重されつつ、機能が拡張されることがいかに重要であるかを私たちは理解しているからです。しかし、アップデートを重ねるにつれて、これまではシンプルだったものが、不要な複雑さを持つようになります。こういった複雑さを解消し、今後10年に渡るFigmaの基盤を築くため、クローズドベータ版をリリースして以来、Figmaの3度目の大幅なデザイン変更であるUI3をリリースいたします。

もちろん、UI3はインターフェースや視覚的デザインだけの話ではありません。より詳細なワークフローや振る舞いを可能にします。以下の4つの問題を解消することに基づいてこれらの変更を行いました:

• FigmaのUIではなく、ユーザーのアイデアを中心に: 長年にわたり、インタラクティブコンポーネントからAIアシストのデザインに至るまで、Figmaには強力な新しい機能を追加してきたため、これらの機能が浮いて見え、重要なことが不明瞭になる危険性が出てきました。そのため、私たちはキャンバスの焦点が、UIよりもユーザーの作業に当てられることを目指しました。
• 新規ユーザーと経験豊富なデザイナーのニーズのバランスをとる:新鮮な目でFigmaのインターフェースを見てみたときに、新規ユーザーには近寄りがたいものになっていることに気が付きました。そこで私たちが着手したのは、ご愛用いただいているFigmaユーザーの慣れ親しんだエルゴノミクスを維持しつつ、Figmaを直感的かつユーザーフレンドリーに操作できるようにすることでした。Figmaでできることを単純化することなく簡素化したのです。
• 変わりゆくデザインの性質に適応する: 現在、10年前には存在しなかった、デザインを扱うための全く新しい方法がいくつもあります。たとえば、ますます多くの人が、再利用可能なコンポーネントを活用し、生成AIを利用しています。私たちはFigmaがこのような環境に適応し、デザイナーが単なるピクセルではなくビルディングブロックを活用できるよう、より高レベルな抽象表現を提供する必要があると考えています。
• Figmaの今後に向けた基盤を築く: 私たちは開発モードでデザインとコードを緊密にし、Figma AIで効率性を高め、またFigma Slides
  

  Stack the deck with Figma Slides

  Say goodbye to lackluster presentations. Today, we’re announcing the open beta of Figma Slides, here to set a new standard for telling visual stories.

  のような新しい製品を導入しています。Figma全体で、統一されたツールファミリーを可能にする場の提供を考えています。

Figmaインターフェースリデザインの舞台裏

これらを念頭に置きつつ、ここでは私たちが奮闘した質問の一部、下した決定、今後ユーザーが期待できる事柄についてご紹介します。

ユーザーが作業するスペースをすっきりさせる

まず、Figmaキャンバスを再考し、貴重なスペースを最大化することから始めました。これにより、ユーザーの作業にスポットライトを当て、集中したいときに気の散る要素を廃除しつつ、手の届くところにツールを置いておくことができるようになります。もったいないくらいに機能を削ぎ落とし、大胆な変更から始めました。目標は、出来る限り多くのサインを見つけ出し、必要に応じて元に戻すことでした。

私たちは、カーソルを合わせたときだけ姿を現す極小のUIのような、思い切った路線を探りました。パネルもプロパティもなく、あるのはユーザーとその作業だけ。他のバリエーションでは、サイドバーが現れたり消えたりしました。これらのイテレーションで作業環境はかなり不安定でしたが、最終的なソリューションに徐々に近づきました。それがサイズ変更可能なパネルと、キャンバスの下部にあるスリムな新しいツールバーです。これにより上部が解放され、全体的にゆとりのある雰囲気が生まれました。また、Figma全体で標準的な構造を形成し、製品間の切り替えが簡単になりました。UIを完全に隠して、必要なときだけパネルを表示させることもできます。

もっとも重要な機能の優先順位を付ける

もうひとつ鍵となった選択は、重要な制御機能を優先付けるためにプロパティパネルを見直したことです。たとえばコンポーネントで、デザインシステムが軌道に乗り、コンポーネントが中心になるにつれ、バリアントやインスタンスのようなコンポーネント制御は、色やサイズなどの属性よりも優先されるべきだと気づきました。これは、デザイナーの日々の仕事量をますます増大させているタスクに費やされる時間とエネルギーを節約するための小さな変更です。

もうひとつの大きな変化は、幅、高さ、オートレイアウトを含むすべてのレイアウト関連オプションを1つのパネルに統合したことです。これは、多くのツールで一般的な「x、y、w、h」パネルから逸脱するものですが、コードで製品を構築する方法によりうまく合致するものです。私たちは、幅と高さをxとyの位置よりも優先すべきだと理論的に考えていましたが、初期のテストでは、これを逆転することでユーザーの習慣をあまりにも混乱させてしまうことがわかりました。そこで、オートレイアウト、幅、および高さを統合する一方で、長年のユーザーをサポートするために、xとyの下にそれらを残すことにしました。

また、アクションの一つとしてFigma AI

Meet Figma AI: Empowering designers with intelligent tools

We’re introducing a suite of AI-powered features to help you push past creative blocks and bring your best ideas to life.

見た目ではなく、使いやすさを追求したインターフェース

従来、私たちのミニマリストUIは、シャープなエッジ、抽象的なアイコン、微妙なアフォーダンスでFigmaを際立たせてきました。これは一時期はうまくいきましたが、より複雑な制御を追加するにつれ、ビジュアル言語を解析するのが難しくなりました。

UI3は、入力用のバックグラウンド、ドロップダウン周りのボーダー、角丸、そしてデザイナー、Tim Van Dammeによる手描きの表情豊かなアイコンを200個導入しています。これらは、プラットフォームとのインタラクション方法を視覚的に説明する役割を果たします。そして、これらはユーザーニーズに適応します。各制御の意味を素早く理解するためにラベルをオンにしたり、作業に集中するためにラベルをオフにしたりできます。

もちろん、何がユーザーフレンドリーなインターフェースであるかという見方は、人によっても、また私たち自身のデザインチーム内でも(おそらく特に)異なります。デザイナーははっきりとした意見を持っているものですが、Figmaのデザイナーも例外ではありません。

あるイテレーションでは、パネルの全体的な外観を簡素化し、よりアクセスしやすくするために、オートレイアウトのアライメントグリッドを凝縮しました。しかし、なかなかうまくいきませんでした。グリッドが動き過ぎるため、私たちは、パワーユーザー向けに、慣れ親しんだものを維持できるよう元のデザインに戻しましたが、ビジュアル的にはより親しみやすいスタイルに一新しました。

親しみやすさとパワーの間の押し引きは、繰り返し起こる議論のテーマになりました。Figmaを初心者にとって親しみやすいものにするにはどうすればいいのか？それも、経験豊富なデザイナーにとって初歩的すぎることのない程度に、です。とても慎重な作業の結果私たちが導入したのは、新しいユーザーを導き、機能を見つけやすくすると同時に、エキスパートユーザーはスピードとコントロールを維持できる、オプションのラベルでした。

Figmaのツール一式に対応する

また、Figmaの拡張するエコシステム全体を通して、より一貫性を持たせる機会も捉えていました。FigJamでブレインストーミングをするときも、Figmaデザインに改良を加えるときも、Figma Slidesでプレゼンテーションをするときも、滑らかでなじみのあるエクスペリエンスにしたかったのです。スリムなツールバーや折りたたみ可能なパネルなどの一貫したパターンがひとつのテーマを生み出しながらも、各ツールは独自の輝きを放つ柔軟性を持つのです。その結果、個性を犠牲にすることなくニーズに適応するエコシステムが完成しました。

デザインの変化特性をサポートする進化

今回のリデザインのリリースを果たせたことは記念すべきマイルストーンでした。一方、多くの点で、これは終わりというより始まりのように感じています。私たちは新しい基盤を築きましたが、真の魔法は、ユーザーが創造的なプロセスの中でUI3を実際に使うときに起こるでしょう。新しいインターフェースに完全に慣れるまでには時間がかかるかもしれませんが、私たちは皆さんと一緒に乗り出すこのジャーニーにワクワクしています。

デザインと私たちが使うツールは常に進化しています。かつてはピクセルプッシュ型でしたが、これからはますます高い抽象度で作業することが増えていくでしょう。一新したデザインはこの変化を反映し、ワークフローを合理化し、想像と現実の間の矛盾を軽減します。AIやその他のテクノロジーが登場し、私たちのワークフローは大きく変わる可能性を秘めています。また、個人からコラボレーションへ、静的なものからインタラクティブなものへ、ピクセルからパターンへとデザインが革新を続ける中で、私たちはユーザーが最高の仕事をできるよう、適応し進化しながら提供していきます。今回のデザイン変更は、私たちのルーツに忠実でありながら、未来を受け入れるという約束です。

リデザインされたFigmaは今日より徐々にユーザーに提供されます。皆さんがFigmaを使って何を創造するのか、とても楽しみです。