開発モードのアノテーション機能構築の工夫と技術

私はFigmaファイルのマークアップを行うことに愛憎入り混じる感情を抱いています。デザインに最終的な仕上げを加え、すべての仕様や寸法が反映されていることをしっかりと確認することに私は誇りを持っています。それは、メモ、矢印、または簡単な吹き出しかもしれません。あるいは、デザイン選択の意図を伝える追加のコンテキスト情報、デザインのディテールそのものかもしれません。ファイルのマークアップは、製品開発プロセスに大きな違いをもたらす可能性があるにもかかわらず、時間の浪費であるように感じられることがあります。そして、すべてのデザイン要件を正確に採り入れるために、デザイナーがファイルを作成したり、手作業で整理したりすることに貴重な時間を費やすのと同じくらいの時間を、開発者はそのデザインを理解し、コンテキストを把握し、コンセプトを実現するための要件を集めることに時間を費やすのです。

これらの目に見えない要件は、製品要件文書であってもデザインファイルであっても、さまざまなファイルやツールにまたがって存在することがよくあります。私たちは、コンテキストを1つの場所に(開発モード内に直接)集めることができる、デザイナーと開発者の両方のユースケースに合わせたアノテーションを構築したいと考えました。

機能の範囲を絞り込む際に、デザインとコードの間のギャップを埋める目的で、私たちはいくつかの重要な問題の解決に取り組みました。アノテーションは作成に時間がかかる作業で、すぐに内容が古くなるうえ、デザインファイルを散らかったものにしてしまうことがよくあります。

デザイナーと開発者のニーズを満たす

作業の方向性を決めるため、私たちは一歩下がって、デザイナーや開発者から聞いたことに基づいて、デザインプロセスにおけるアノテーションの役割、つまり現在アノテーションはどのような位置にあり、どのように進化していくべきかについて考えました。

デザイナーはアノテーションを、デザイン自体のみでは捉えることができない、デザインの品質について説明する場所と考えていることがよくあります。アクセシビリティのプロパティや、インタラクティブな動作についての詳細情報など、デザイナーにはこれらの属性を説明する場所が必要です。

開発者にとって、デザインを共有することは、エンジニアリングタスクを共有することと同じではありません。開発者が直面する中心的な課題の1つに「干し草の山から1本の針を見つける」ようなことがあります。多くの場合、デザインファイルにはたくさんの情報と作業が含まれていることが多いため、どの部分にフォーカスすべきかを正確に知るのが難しい場合があります。情報を整理分析する、キュレーションの作業がデザインプロセスの重要な部分となります。

こうしたさまざまなニーズと課題をもとに、社内で多くの議論が行われました。そして、開発モードにおけるアノテーションの正確な役割が見えてきたのです。アノテーションはデザインプロセスのさまざまなステップで使用できますが、最優先事項は、デザイナーと開発者のワークフローを近づけながら、それぞれの特有の問題点を解決することでした。

開発者向けに仕様を厳選し、必要な詳細情報やあいまいな部分を伝えるための1つの専用スペースが必要だったので、最終的にはデザイナーが開発モードにアクセスしてアノテーションを付ける必要があると判断しました。そうすることでデザイナーは、アノテーションを付けているときに、開発者が見ているものを正確に見ることができ、作業完了時には開発モードへのリンクを共有することができます。私たちの目標は、デザイナーの作業が完了した後に開発者を分断してしまう開発モードではなく、アノテーションを最初の重要なステップとして、チームをより幅広く製品開発プロセスに参加させることです。

ダイナミックな変化の力

全体的なアプローチを描いた後、私たちは他の重要なデザイン上の決定に目を向けました。従来、デザイナーはアノテーションを手作業で作成する必要がありました。これは、ひとたびデザインが変更されると、アノテーションの内容が古くなることを意味します。このプロセスは、デザイナーが作業を完了し、単に完成したデザインを「開発準備完了」としてマークする必要がある場合であれば機能します。 しかし、多くの場合、製品開発は常時進行していることから、デザイナーは複数の反復を経て作業するため、継続的かつ明確なコミュニケーションが必要となり、開発者には変更を追跡する簡単な方法が必要になります。

初期のデザインスプリントで、私たちは「デザイン内のプロパティにアノテーションを接続する方法があったらどうだろう」と考えました。 これにより、ファイルをマークアップする際にデザインの詳細情報を手作業で複製するデザイナーの負担を軽減できると同時に、デザインの変更に応じてアノテーションを最新の状態に保つことができます。これで開発者は、デザイン担当者が頻繁に編集を行っていても、表示されているアノテーションが最新の内容であると確信できます。

私たちは同じ考えを寸法にも適用しました。デザインが変更されれば、寸法を示すために引いた線も必然的に変更されるべきではないでしょうか。

デザインの変更点だけではありません。プレーンテキストのメモではエラーが発生する可能性が多くありますが、アノテーションがデザインシステム内の実際のバリアブルやコンポーネントを参照できれば、開発者は仕様がコードベースと一致していることを確信できます。

ポジショニングのロジック

リサーチや自身の個人的な経験から私たちは、従来のデザイナーがアノテーションのためのスペースを作るためにフレームを移動するという退屈な作業をしてきたことを知っていました。さらにアノテーションを追加するたびに、コンテキストを適切な場所に押し込むためにキャンバス上のフレームの再配置を行うというループが繰り返されます。私たちは、Figmaキャンバス上のスペースを占有せずに、開発者にアノテーションがしっかりと見えるようにする方法はないだろうかと考えました。

私たちのデザインの方向性の1つは、アノテーションを自動的に配置して表示するというすばらしいものでした。現在のアノテーション方法と比較すると大きな変化のように感じられましたが、うまく実現できれば、常にファイルの調整を繰り返しているデザイナーの負担が軽減されると同時に、開発者側もすっきりとしたアノテーションを見ることができます。しかし、それを正しく実現することは困難な課題であり、何十ものプロトタイプと反復が必要となります。そこには、 ズーム、パン、 スケーリング、 最小化、 選択、ホバリングなど、非常に多くのインタラクションがありました。

私たちのエンジニアリングチームは、このデザインアイデアが実際に優れたエクスペリエンスとして反映されるようにするために、表示ロジックの調整を中心に行いました。ソフトウェアエンジニアのRoshan Bhallaによる初期のエンドツーエンドのデモを見て、チームはビジョンを実現できることを実感し始めました。

当初はアノテーションを、それが付けられているオブジェクトのトップレベルフレームの外側に配置することを計画していました。しかしベータ版のユーザーからの報告で、このアプローチでは、デザイナーがネストされたフレームを使用した場合、アノテーションが遠くなりすぎることがわかりました。そこで、この課題に対処するために調整をいくつか加えました。

• アノテーションを説明する内容から遠ざけることができる最大距離の設定
• アノテーションをウィンドウの端にぶつかるようにすると、パンしても表示されたままになる

しかし、探索はそこで終わりませんでした。ベータ版と内部テストからのフィードバックに基づき、物理ベースのポジショニングなど、さらに多くのアプローチをテストしました。

ポジショニングロジックのテストと反復は、それ自体が大きな冒険となりました。私たちは、対応するフレームをクリックするまでアノテーションが非表示になる仕組みを検討しました。理論的には正しいと感じられましたが、実際に試してみると、フレームを選択せずにただ見ているだけの場合、重要なアノテーションを簡単に見逃してしまいかねないことに気づきました。

次に、ズームレベルとポジションに基づいて自動的に展開されるさまざまなアノテーションを繰り返し試してみたところ、すぐにより直感的と感じられるものになりました。 そこから一時的なスライダーをUIに追加して、「適切な」レベルに到達するようさまざまなズームパラメーターを設定できるようにしました。これらのインタラクションをブラッシュアップすることは、システム全体の使い心地に影響を与えました。

アノテーションのスピードを上げ、デザインと接続することで、私たちは、アノテーション作業がまったく新しい方法で力を発揮できるようになったと感じ始めました。ただし、私たちが話を聞いたほとんどのチームが、ワークフロー内でのアノテーションの使用方法、表示方法について、独自の工夫をしていることもわかっていました。アノテーションは追跡する必要のあるタスクまたは要件であり、タスク管理ツールに接続されていると語った人たちもいました。

今後を見据えて、私たちは、拡張性を第一に考えたアプローチを採用し、チームがプラグインAPIを使用してFigmaのアノテーション機能を中心とした独自のワークフローを構築できるようにしていきたいと思います。これについての詳細は、またお知らせいたします。

アノテーションはパズルのひとつのピース

私たちは多くのユーザーフィードバックに応え、アノテーション機能をリリースし、開発モードをデザイン仕様の本拠地にすることで、デザイナーが意図を共有し、開発者が必要なコンテキストをすべて1つの場所で取得できるようにしたことをうれしく思います。

開発モードのアノテーションによって、デザイナーと開発者が自分の作業の詳細情報をより簡単に伝達できるようになることを願っています。私たちはまた、アノテーションがこれらの重要な役割を果たす人々の間のコミュニケーションを改善するための唯一のソリューションではなく、むしろ簡素化する価値があると考えているプロセスの一部にすぎないことも認識しています。私たちは開発モードの構築を継続しつつ、デザイナーと開発者のコラボレーションの残りの課題に着実に取り組んでいきたいと考えております。次に期待されていることについて、皆様のご意見をお待ちしております。

本日リリースのすべての機能と、開発モードの新機能についての詳細はこちらをご覧ください。

Figmaの作業グループに感謝します: プロダクトマネージャーBenson Perry、エンジニア Ed Bentley、Roshan Bhalla、Jenny Lea、Karl Jiang、Sue Hitchins、エンジニアリングマネージャーNoga Mann、リサーチャーMolly Jane Nicholas、データサイエンティストCollin Wiles