FigmaとJiraでデザイナーから開発者へのハンドオフを強化する方法
Ingka Group社、One.com社、Condé Nast社の製品開発チームが、デザイン開発において捕らえることが難しいフロー状態を達成するためのツールとヒントを共有します。
アートワーク: Jaedoo Lee
先駆的な研究者であるMihaly Csikszentmihalyi氏は、数十年前に初めて「フロー」という言葉を作り、それを次のように説明しています。「人がある活動に没頭し、他のことがどうでもよくなっているように見える状態。この体験はとても楽しいので、人々はそれをするためだけに、多大な犠牲を払ってでもそれをやり続けることになる」
プロダクトベロシティ、つまり適切な機能を迅速に提供する能力は、優れたユーザーエクスペリエンスを構築するための聖杯(究極の目的)です。 しかし、企業が規模を拡大する中で高いベロシティを維持できることは稀です。出荷や実験を迅速に行う能力は、偶然に実現したものではありません。すべての新機能や製品アップデートの背後には、チームがより良く連携するために役立つツール、プロセス、しきたりの基盤があります。この基盤は、捕らえることが難しいフロー状態を実現するために役立ちます。フロー状態は、チームが可能な限り効率的に反復し、共同作業し、出荷することを可能にします。
Y Combinator社の創設者であるPaul Graham氏は、人気エッセイ「メーカーのスケジュール、マネージャーのスケジュール」の中で、マネージャーは1時間ごとにやることを変えることができるが、メーカーは半日単位で時間を使用することを好むと説明しています。「1時間単位では、文章もプログラムもうまく書けません。1時間は、なんとか始めることができる時間にすぎません」
フロー状態は一般に、人が独立して作業し、特定のタスクに取り組み、邪魔されることのないまとまった量の時間を連想させます。しかし、実際にそのような状況になることはめったにありません。特に、カレンダーがテトリスのように塗り分けられ、要件が絶えず変化する今日のハイブリッドな仕事の世界では、ほとんどないことでしょう。ベロシティを維持するには努力が必要であるのと同じように、この環境でフロー状態を見つけるには、まず基礎に取り組む必要があります。
Figmaでは、デザインのワークフローと開発のワークフローをより近いものにする新しい方法を常に模索することにより、通知が絶え間なく届いて生産性を脅かす中でもチームがフロー状態を達成できるようにしています。更新されたFigma for Jiraアプリのリリースに先立ち、さまざまな業界のチームに状況を質問し、チームをいかにして流れ(フロー)に乗せているかを確認しました。
Figma for Jiraでデザインをコードに変換すると、すべてのコンテキストを見ることができます。
プロトタイプ1つは1000の言葉に値する
企業が成長するにつれて、プロセスは遅くなります。チームが大規模になると、人や作業グループがサイロ化し、ハイブリッドな作業モデルがチームの同期を失わせる可能性があります。チームの同期を保つための鍵は、全員が進む方向を確実に把握し、その方向に進むことです。絶え間ない調整が、特に製品開発プロセスにとって不可欠であり、そのためには絶え間ないコミュニケーションが必要です。
精度の高いプロトタイプで相互理解を深める
同じ言葉でも使う人によって意味が異なる場合があります。デザイナーと開発者で言葉の意味を合わせるために役立つのが、実際に動作しているプロトタイプを見ることです。One.com社では、デンマークを拠点とするデザインチームがインドにいる開発チームと定期的にミーティングを行い、要件、障害、潜在的な問題について話し合っています。最近のミーティングで、デザインチームは新しいテキスト機能のプロトタイプを提示しました。開発チームは、Figmaに表示された精度の高いプロトタイプを囲み、全員が理解し、インタラクティブな状態をレビューできるようにしました。静的で精度の低いプロトタイプにより把握できるのはデザインの一般的なアイデアである一方で、インタラクティブで精度の高いプロトタイプを使用すると、開発者は最終製品がどのように機能するべきかを把握できます。つまりユーザーフローがどのように発生するか、ウィンドウがどのようにポップアップするか、ドロップダウンがどのように機能するかなどの重要な詳細です。UXおよびデザイン部門のグループ責任者のNick van der Meulen氏は次のように述べています。「これは、他のソフトウェアを使い、これまで行っていた方法、つまり、基本的に100万ものページをクリックして相互にリンクするというような作業からの大きな変化です。今では、1つのソフトウェアによりインタラクティブなプロトタイプを実現しています」
また、精度の高いプロトタイプにより、非同期かつリモートで作業する大規模なチームがコンテキストを把握し、保持できます。なぜなら、ミーティング中に起こることがミーティング外でのフロー状態を可能にするからです。Condé Nast社では、製品開発チームが毎日スタンドアップミーティングを開催し、進捗状況や優先事項について話し合っています。これらのミーティングにより、チームの連携を保ち、障害を予測し、タイムリーに質問を投げかけることができます。これらのミーティングの1つで、チームはFigmaを利用した精度の高いインタラクティブプロトタイプを通じて伝達される大規模プロジェクトについて議論していました。デザイン担当シニアディレクターのTom Smith氏は次のように回想します。「このプロトタイプは、デザインと開発の間の架け橋となりました。これにより、開発者は具体的な方法でデザインに触れることができ、共有したビジョンはより確かなものになり、協力してこれを実現しようとチームを動機づけてくれました」
制作中でも作業を発表する
IKEA社の最大の小売業者であるIngka Group社のデザインシステムチームに所属するデザイナーや開発者は、精度の低いプロトタイプを通じて制作中の作業を共有することを好みます。Ingka Group社のチームは毎月、より洗練されたプロトタイプをデモする一方で、社内セッションを毎週開催し、リラックスした非公式な環境でチームメイトが学びを共有することを奨励しています。エクスペリエンス・デザイン・オペレーションプログラムマネージャーのHenrik Wangström氏は、「基本的には、自分が望めば紙切れ1枚でも見せることができます」と述べています。
チームメイトは、たとえ怖気づいても、未完成の作業を発表するようお互いに励まし合っています。デザインシステムチームのエンジニアリングマネージャーであるNouman Tariq氏は、次のように述べています。「未完成の仕事を発表することには、多くの人が心理的な抵抗を感じがちです。『まだ完成していない』、『まだ十分に満足していない』と考えるかもしれません。チーム内にフィードバックを頻繁かつ早期に収集する文化を作ることにより、正しいものを作っていることや、それを頻繁に出荷していることを確信できるようにすることが狙いです」。プロトタイプ、ラフスケッチ、チームのブレインストーミングの結果など、初期の作業を共有することは、反復と実験を迅速に行うための鍵となります。
チーム内にフィードバックを頻繁かつ早期に収集する文化を作ることにより、正しいものを作っていることや、それを頻繁に出荷していることを確信できるようにすることが狙いです。
短期的な更新であっても信頼できるソースが必要
リモートワークと対面ワークが混在する環境では、ファイルの更新、Slackの通知、締め切りの変更などの音が絶え間なく鳴り響きます(アラームが鳴ることもあります)。その喧騒の中で、更新を見逃したり、関連性のなくなった仕事を続けていたと気づいたりしがちです。ミーティングやSlackで意思決定を行う場合、その決定は他の場所でも存続する必要があります。このため、信頼できる真実のソースを持つことが重要になります。
さまざまな情報についてさまざまなソースを利用する
多くのチームがいまだに単一の信頼できるソースを目指していますが、すべてのチームに1つのスペースやフォーラムを用意することが常に意味があるとは限りません。各チームが必要とする、情報、ツール、戦術の種類は異なります。
Figmaはデザイナーにとってはメインのツールですが、開発者は作業を仕上げるためにさまざまなツールを使用する必要があります。「たとえばテキストフィールドの技術的な詳細を示す必要がある場合、開発者はWeb上で数値やテキスト文字列などの複数のタイプを設定できる必要があります」と、Turo社のデザインシステムディレクターのCarlos Báez氏は述べています。開発チームは、プロダクト要件仕様書(PRD)に技術的な詳細を文書化します。PRDには、コンポーネントのプロパティとドキュメント、トークンの依存関係、ユーザーとのインタラクションとデザインの概要を示す表が含まれています。Báez氏は、「これらのコンポーネントの表はかなり複雑です。ここにはすべてがリストされており、コンポーネントAPIの信頼できるソースとして使用しています」と述べています。
Experian社では、その情報がどれくらい戦略的または戦術的なのかに基づいて情報を整理しています。デザインシステム開発者のShelby Foster氏は、次のように述べています。「Figmaは、特定のコンポーネントに関してデザイン部門と直接コミュニケーションしたい場合に最適であり、Jiraを使用すると、チームが特定の機能やワークフローに関するより高度な議論についてコミュニケーションをとることができます」
Figmaは、特定のコンポーネントに関してデザイン部門と直接コミュニケーションしたい場合に最適であり、Jiraを使用すると、チームが特定の機能やワークフローに関するより高度な議論についてコミュニケーションをとることができます。
それでも、これらの複数の信頼できるソースを管理する理想的な方法は、それらを統合することです。デザインシステムデザイナーのKeith Barney氏は次のように述べています。「私たちは最近、プロジェクトに関連するすべての情報を1か所にまとめることを全体的な目標として、Figma for Jiraアプリを使い始めました。これは、デザイナーと開発者の両方にメリットをもたらします。なぜなら、全員が同じソース情報を見ることができ、タスクやアプリの切り替えを減らすことができるからです」
Experian社のデザインシステムチームとフロントエンド開発チームは、開発モードも使用しています。開発モードは、開発者向けに設計されたFigmaのワークスペースで、開発者がワークフローを管理するために必要なものを入手できます。Foster氏は次のように述べています。「これにより、複数のツールに頼ることなく、すべてのコンポーネントのドキュメントやリソースを1か所にまとめることができるようになりました。他のフロントエンドチームに、設計システムのコンポーネントの信頼できる唯一のソースと、コンポーネントと対話するためのコンポーネントプレイグラウンドが提供されます」
開発モードを使用して好みのツールで作業速度を上げる方法の詳細については、こちらをご覧ください。
トグル税を削減する
複数の真実のソースがあり、それが相互に明確に対応付けられていない場合、トグル税を支払うことになります。つまりさまざまなアーティファクト間で切り替える時間、エネルギー、コンテキストの損失という負担です。これは、費用と労力を伴う可能性があります。たとえば、Woolworths社の製品開発チームは、チームがスクリーンショットによって注釈を付けた最新のデザインがJiraチケットに含まれているかどうかを廻る議論に時間を費やしていました。FigmaとJiraという2つの信頼できるソースを統合することにより、スクリーンショットが古いかどうかということが問題にならなくなりました。
「Figmaのライブ埋め込み機能を使用して、開発チーム向けのJiraチケットに最新のデザインを含めています」とユーザーインターフェースデザインマネージャーのCindy Ramos氏は述べています。「また、更新やジャーニーをJiraから直接実行できるため、スプリントのプランニングが非常に迅速になります。また、Jiraウィジェットを使用して、Figmaボードに小規模なアップデートを直接タグ付けしているため、開発者は更新がどこにあるかを正確に把握できます」
同様に、Condé Nast社はプロジェクト管理と問題の追跡にJiraを使用し、最新のデザイン資産とプロトタイプにFigmaを使用しています。テクノロジーチームは、FigmaファイルをJiraの課題に直接リンクすることにより、この2つを統合しています。
Figma for Jiraを利用してデザインをコードに変換すると、すべてのコンテキストを見ることができます。
フローは単なる再現可能なフレームワーク
デザインがFigmaで開発準備完了になると、リンクされたJira側のイシューでも対応するステータスを確認できます。
一貫性は、時間や精神的エネルギーの節約になります。One.com社にとって、これは世界で最も一貫性のある企業の1つであるマクドナルドからインスピレーションを得ることを意味します。「マクドナルドの店舗に行けば、自分が何を手に入れることができるのかがよくわかります。開発者がファイルを入手するとき、ファイルの内容は多岐にわたるでしょうが、その構造方法や名前の付け方はいつも同じになっているということです」と、One.com社のリードUIデザイナー、Carl Webb氏は語ります。「他のUIデザイナーの仕事を引き継いだとしても、どこに何があるべきかがわかります」
テンプレートに頼る
One.com社では、このような理想的なレベルの一貫性を達成するために、Figmaでハンドオフファイルを作成しています。One.com社のデザインオペレーションリードであるBerrie Schoots氏は、このハンドオフファイルについて、次のように述べています。「プレイグラウンドからワイヤーフレーム、実際のデザインを書き出す仕様書まで、さまざまなページが再入力されたテンプレートです。このファイルを使用する人は誰でも、どのような作業が行われているか、開発者が作成する準備ができているか、開発者がすでに作成したものは何かを確認できます」
Webb氏は次のように述べています。「進行中の作業とデザインのページには、すでにJiraウィジェットが待機しています。したがって、デザイナーは自分のタスクをそれにリンクするだけで済みます。すべてがセクションに分けられます。そのため、これが同じ分類で、これは別ということが分かりやすくなっています」
これらのファイルにはプロトタイプが含まれていますが、通常はフローチャートも含まれていて、開発者は手順を追うことができます。これは、矢印(FigJamからコピーしたもの)と、次に何が起こり、どのようなインタラクションが行われるかの説明を備えた画面のマップのように見えます。シニアソフトウェアエンジニアのYannick de Lange氏は次のように述べています。「コンテキストに沿って表現されるため、プロトタイプよりも概要ページの方が好きです。概要ページは、ある画面から別の画面まで、注釈付きで何が起こっているかを見せてくれます。私は再生ボタンをクリックすることはありません」
無秩序な中間地点を乗り越えて作業を前進させる特効薬がないのは明らかです。おそらく最後のコツは、次の点を理解することです。フロー状態にいるときは楽に感じるかもしれませんが、それを実現するための基礎を整えるには、それなりの努力が必要です。Figma for Jiraのようなアプリは、こまごまとした重要なものをまとめる接着剤の役割を果たすため、重要な意思決定、計画、実行に集中できます。Figma for Jiraの最新リリースの詳細については、こちらをご覧ください。
Figma for Jiraを利用してデザインをコードに変換すると、すべてのコンテキストを見ることができます。
