機能誕生の背景: 何度も生き返ったマルチ編集
プロダクト担当バイスプレジデントの桑本 晶とプロダクトデザイナーのNikolas Kleinが、マルチ編集機能ができるまでの道のりをご紹介します。これは複数のデザインにまたがる編集がわずか数クリックで簡単にできる新機能です。
機能誕生の背景: 何度も生き返ったマルチ編集を共有
トップ画像: Gustavo Delgado
ある機能をリリースすると、今までこの機能なしでよく平気だったと思うことがよくあります。マルチ編集でもそのようなことがありました。マルチ編集は、Figma全体で複数のオブジェクトを簡単に編集できる機能です。今となっては、Figmaに元からあった機能のように感じられますが、選択の機能については業界標準と大きく異なっていて、細部の調整には時間がかかりました。この機能は有効にできるまでに、何度も生き返っています。機能が有効になった今、これまでの経緯を共有したいと思います。プロダクト担当バイスプレジデントの桑本 晶とプロダクトデザイナーのNikolas Kleinが、マルチ編集を磨き上げてきた長い道のりを紹介し、日常的に自然に使いこなせる機能の構築がなぜビジネス上の重要事項であるかを解説します。
機能を試してみませんか。次のショートカットが使えます。
- ⌘ Command + ⌥ Option + A でマッチする全オブジェクトを選択する
- シフトドラッグでマッチするオブジェクトの一部を選択する
- 複数のテキストオブジェクトを選択し、エンターキーでテキストのマルチ編集に入る
- コンポーネントのセットを選択し、Qキーでバリアントのマルチ編集モードに入る
詳しくはプレイグラウンドファイルでお試しください。
マルチ編集の発想と考え方
Figmaで働いていてありがたいのは、デザインツールがどのように機能すべきか、その根幹に疑問を投げかけられることです。こうした疑問から重要な新機能が生まれることもあれば、細かい改良につながることもあります。マルチ編集は、その両方が実現できた珍しい例です。
マルチ編集のアイデアが初めて浮かんだのは2019年でした。ちょうどバリアント機能を設計している最中で、込み入った問題が非常にたくさんあったので、カレンダーを空けて2日間にわたるデザインサミットを開き、まとめて片付けることにしました。たくさんの重要なポイントはすぐに決着しましたが、扱いに苦労した核心的な問題の1つが、いかにたくさんの編集の繰り返しをユーザーに求めていたかということでした。ご存知のように、バリアントの編集はたいへんな作業になるので、その作業を簡単にできるようにいろいろな仕組みを考えましたが、どれもしっくりきませんでした。
そのとき、単純なひらめきがありました。たとえばあるモードに入ったときに、編集結果が魔法のようにすべてのバリアントに同時に反映されるようになったらいいんじゃないか。他の場面でも同じことができるといいかもしれない。たくさんのデザインを同時にまとめて編集したいときもたくさんありそうだ、と。
それをホワイトボードに書きつけて、マルチ編集と名付けました。
冬眠の時期
このように最初は勢いがありましたが、マルチ編集のアイデアは長い冬眠期間に入りました。すぐにコーディングを始められなかったのは、コアになるアイデアを練り上げる必要があったからです。その答えは後から考えれば明らかにも思えますが、その時点では明白ではなかったのです。
私たちは、ちょうど高度なテキストエディターでテキストを複数選択するのと同じように、マルチ編集を、一度にたくさんのものを編集できる強力な新しいモードとして考えるようになりました。
マルチ編集が実際にどう機能すべきかを見極めようとすると、Figmaではすでに複数のオブジェクトの選択によってマルチ編集がある程度できるという現実に直面しました。ただ、いくつか問題はあります。
- 編集しようとするものを選択するのが難しい。
- 選択ができても、うまく機能しない編集がある。
例えば、複数のオブジェクトの色を変えるのは簡単ですが、サイズを変えるのは簡単ではありません。複数のテキストノードのフォントやサイズを変えるのは簡単ですが、テキストそのものを変えるのは面倒です。
Figmaでの製品検討の様子(ヨーロッパでのConfig)
マルチ編集はずっと全体的な計画の中にはありましたが、他に優先すべき作業がありました。2020年の講演では、マルチ編集のことをほのめかしたこともありました。
そこで、マルチ編集をモードと考えるのをやめて、「そもそも選択がどのように機能すべきなのか」という根本的な問いかけを設定しました。
遅れた理由には、ソフトウェア開発の実際的な問題もありました。実際のところ、どんなに優れた機能のアイデアがあっても、先にやるべきことが他にあることが多いのです。
落ち着いてマルチ編集のアイデアを時間をかけて煮詰めることにしました。
眠りからの目覚め
機能のアイデアの実装にすぐに取りかからないと、勢いを失って消えてしまうことがよくあります。でも、マルチ編集のアイデアは驚くほどFigma社内での支持が下がりませんでした。
これは企業思想の問題でもあると思います。Figmaでは、ユーザーがデザインを素早く変更できるようにすることが自分たちの仕事だと考えていて、事前にデザインの枠組みができているかどうかによらず、とにかく実行できることが必要なのです。
Figmaを見ると、ファイルの構造化に役立つ機能のほとんどすべてに、気軽に使える親戚機能があって、適当に進めたいときに使うことができます。スタイルとトークンを使えば、色を素早く変更することができますが、構造化せずにおきたい場合は選択範囲の色機能を使えば、まとめて編集できます。オートレイアウトを使えば、オブジェクトをスタックに分類して素早く移動できますが、構造化しない場合にはスマートセレクション機能を使って素早く並べ替えることができます。編集に関しては、コンポーネントを使用して複数のオブジェクトのコピーを素早く編集できますが、構造化しない場合には、うまい代替手段がありませんでした。
どう操作すべきだったかというと、コピー＆ペーストしてクリックを100回も繰り返すということになるでしょうか。コンポーネントの親戚の非構造版が必要でした。これがマルチ編集のようなものが必要になった理由です。
Figmaのアドボカシー担当ディレクターであるTom Lowryは、社内のリーダー的存在でした。デザイナーの一人であるNikolas Kleinが、メーカーウィークでマルチ編集を試作し、私もソフトウェアエンジニアのNaomi JungとJoanna Chenと一緒に別のバージョンを試作しました。実験を重ねるごとに、何を作り、どのようにFigmaの他の部分と統合する必要があるのか、理解が深まっていきました。
マルチ編集に命を吹き込む
2023年には、マルチ編集を眠りから覚まして脚光を浴びてもらう時がついに来たように感じがして、わくわくしました。マルチ編集のアイデアを発想したころは、私はFigmaのプロダクトデザイナーになって1年目でした。それからの5年間を通じて、機能的にも思想的にも、マルチ編集がどのように機能すべきかについて重要な決定を数多く下してきました。そしていろいろな人から協力を得て、作業用のドキュメントやプロトタイプを作成しました。私の立場では、そのデザインをまとめる作業はギターをチューニングするようなものでした。ですので、マルチ編集の構築は意外にも簡単な作業だと感じました。
そもそも選択の仕組みは変えていいの?
最初の課題は、複数のレイヤーを編集する際の選択の基本的な仕組みを解決することでした。Figmaでは、他の多くのデザインツールと同様に、選択したすべてのアイテムの周囲に1つの大きな全体バウンディングボックスを描画し、あたかもすべてが同じグループに属しているかのように編集することができます。これは、同じフレーム内の操作には便利ですが、すべての画面に表示されているロゴのサイズを変更する場合など、複数のフレームやバリアントをまたいでオブジェクトを操作する場合には、完全に破綻してしまいます。
これはゾクゾクするような瞬間でした。そのころは、デザイン学校を卒業してまだ2年も経っていませんでしたが、Figmaで仕事をしていれば、「Figmaが選択範囲の周囲にバウンディングボックスをどう描くか」というような、基本的と思われること(同時に自分にとって非常に重要なこと)に自分が影響を及ぼすことができると気づいたのです。
1つの解決策として、選択範囲の描画方法を変更する新しいオプションとして「マルチバウンドモード」を提案しました。これによって、ユーザーは期待するような相対的な編集ができるようになりますが、どうも良くないと感じ、行きつ戻りつしながらもっと基本的なことを検討しようと思いつきました。新しいモードを追加するのではなく、選択したものに対する既存の動作すべてを変更し、Figma全体で編集がどのように作用するかを考え直すのです。
1つのアプローチで合意できたことで道が開けると感じましたが、この新しく設定したスコープは広く複雑なために、マルチ編集のリリースまでにはまだまだ長い道のりがあり、むしろ以前より長いほどでした。その後の数年間で、このアプローチの相互依存関係をすべて見つけ出してひとつひとつ調整していくことになります。
最初は、同じフレームの中であっても、すべてのオブジェクトの周りに複数の選択範囲を描こうとしました。しかしすぐに、伝統的な選択の仕組みは何十年にもわたってデザイナーの役に立ってきたのだということに気づきました。慣れ親しんだものと新しいものとの間の適切なバランスを見つけようとして、デザインの複数のレベルで選択されたオブジェクトのセットごとに複数のバウンディングボックスを表示するという、中間的な方法を選びました。
マルチ編集のレンズですべての選択を見る
複数の範囲を作ったので、各階層で実行可能なすべてのアクションが期待通りに機能することを確認する必要がありました。Figmaで選択を行うタスクを全てリストアップしましたが、これはFigmaの多くの操作で何らかのオブジェクトの選択が必要であることを考えれば、簡単な作業ではありません。インスタンスそれぞれについて、マルチ編集での動作を調整し、ワークフローとの整合を取りました。マルチ編集は非常に多くの操作に影響するため、そのリスクは非常に高いものでした。Akshay Subramanian、Jung Woo Lee、そして当時インターンであったEmily Louieなどのエンジニアリングチームは、パートナーとして素晴らしく、プロトタイプや動作の調整が手早くできました。
うまくいっていなかった動作の1つは、フレームをまたいだ要素の整列でした。水平に並んだフレームをまたいで要素を選択する場合、垂直方向に上揃えや下揃えで整列するのはうまくいきます。しかし、要素を水平方向に左揃えや右揃えで整列すると、要素がキャンバス上の同じ位置に移動し、積み重なったり、意図したフレームから完全に消えたりします。
これを修正するために、要素の整列を更新して、各フレームに対して相対的に動作するようにしました。要素の整列は、整列する方向の最小値を取り、この値をすべてのオブジェクトに各フレーム内で相対的に適用するようになりました。
また、キャンバス上のオブジェクトをフレーム内の最も近いオブジェクトに揃えるという特別なルールも作りました。既存のワークフローを継続して使用できるよう、「階層ごとに相対的に整列する」という自ら作ったルールを破ることになります。
適切な数のマッチするオブジェクトを選択する
これが完了した時点で、マルチ編集は重要な改善になるという感覚がすでにありました。フレームをまたいだオブジェクトの編集が、はるかに直感的になりました。次に必要なのは、ユーザーにより早く同じように感じてもらえるよう、できるだけ操作を簡単にすることでした。
ご存知のように、デザイナーはフレームを複製することがよくあり、同じレイヤーが複数のコピーにわたって繰り返されます。私たちはスマートアニメートのマッチングルールとコンポーネントのプロパティの選択の挙動を応用して、他のどのような場面でも「すべてのマッチングレイヤーの選択」(⌘ Command + ⌥ Option + A)ができるようにしました。
しかしすぐに、すべてのマッチを選択するのはやりすぎだと気づきました。一部のフレームだけに変更を加えたいことはよくあります。そこで追加のオプションを追加しました。シフトを押すとマッチングレイヤーがハイライトされ、ドラッグすると他のマッチするオブジェクトだけを選択することができます。この新しい動作は、フレームの外側でドラッグを開始したときに起こります。フレームの内側でドラッグを開始した場合は、オブジェクトを選択範囲に追加したり、選択範囲から削除したりする以前の動作が維持されます。
バリアントでもモードを継続
最後に、私たちは何年も前にこの長い取り組みの発端となったバリアントに立ち戻りました。バリアントを管理するとき、すべてのバリアントをまとめて編集することがよく必要になります。この作業を合理化するために、マルチ編集をオンのままにする機能を導入し、ユーザーがバリアントを編集する間、状態を維持できるようにしました。
最初のブレークスルーは、マルチ編集をモードではないと考えることでしたが、効率性を引き出すためにはモードが必要な機能であることが分かりました。次の要素を素早く選択したり、すべてのバリアントでボタンラベルテキストレイヤーを作成したりするような一括操作には、それがすべてできる専用のスペースが必要でした。
微調整
このような決断と微調整がすべてまとまっていくのを見るのは、信じられないほどの満足感があります。このレベルで細部への心使いができることこそが、私が6年前にFigmaに入った理由でもあり、今日までFigmaにいる理由でもあります。マルチ編集は、いくつかの動作に磨きをかける契機にもなりましたし、小さいながらも注目すべきビジュアルの改善にもつながりました。私のお気に入りをいくつか紹介します。
公開時期を見極める
マルチ編集は、最初のアイデアから公開までに一番長く時間がかかった機能です。この数年間、この機能を手に取っては戻し、磨き上げ、それを何度も繰り返しました。それはまるで、バレル研磨機でピカピカになるまで回し続けた石のようです。
このプロセスで不思議なのは、マルチ編集を改良するにつれて、この機能のことを忘れそうになっていることです。社内ではもう何か月もマルチ編集を使っていますが、そのことに気づかなくなってきていて、本番環境に切り替えると、以前はどれだけ非効率的だったかと思ってしまうのです。
改良をもっと続けたい気持ちもあります。というのも、複数のオブジェクトの扱いをもっと良くできそうな点が毎日新たに見つかるからです。フレーム間でオブジェクトを整列させる方法の変更も、ほんの数週間前に見つけて実装したものです。私の推測では、リリース後もこうした発見が続くはずです。
また、だめにしてしまった機能があるかもしれないという不安も拭いきれません。たくさんの細かい動作を変更しているので、特定の挙動に頼っている人にとっては、改悪になっている可能性がきっとあります。もちろん、テストはやりすぎるぐらい行っていますし、問題が発生すれば迅速に対応します。それでも、何百万人という人々がFigmaを使って日々仕事していることを分かりながら、本質的な変更を加えるのは神経がすり減るものです。
それと同時に、とても胸が弾む思いもあります。マルチ編集は、私たちが5年近くも構想してきたもので、この機能を皆さんにお見せできるのはとてもうれしいことです。今回の変更が皆さんの心に響くことを願っていますし、もっと違う動作が良いと思われることがありましたら、改善したいのでぜひご意見をお寄せください。
今すぐ使ってみませんか。プレイグラウンドファイルでマルチ編集を試してみてください。
