移行は単にツールを切り替える作業ではありません。それは、新しい働き方を取り入れることです。このガイドでは、デザイナーアドボケートClara Ujiie氏が移行における各ステージを説明し、Figmaに効率的かつ適切に移行するためのインサイトと実用的なヒントをお伝えします。
Figmaにシームレスに移行するためのインサイダーガイドを共有
ヒーロー画像: Derek Abella氏
Figmaのような新しいデザインツールに移行することは、単なる思い切ったことではありません。ステージを綿密に積み上げる必要があります。このプロセスは、プランニング、コミュニケーション、再構築、オンボーディング、文化基準の作り替えで構成され、入念なコラボレーション（そして、お好みのコーヒーや紅茶などたくさん）を必要とします。 デザイナーアドボケートとして、私は数多くのチームがこのプロセスを経るガイドをしてきました。その中で、Figmaへの移行をシームレスかつ有意義なものにするために大いに役立つインサイトを蓄積してきました。移行は最初はとても気の重い作業に思えるかもしれませんが、将来の生産性を向上させるための戦略的投資です。
Figmaへの移行を計画する
変更管理は、組織においてリソース、ビジネスプロセス、予算割り当て、または運用方式に影響する変更がある際に、個人、チーム、組織の準備およびサポートをする戦略のことを指します。
Figmaへの移行を決断されたとのこと、おめでとうございます! 始めるにあたって、この変更をすることとなった動機のコアを理解することが重要です。チームはFigmaによってコラボレーションや透明性が向上し、プロセスがより効率化することを期待しています。これらの利点がキーとなり、移行を大きな変革をもたらすものにしてくれます。最も重要なことですが、この移行作業は単独して行うものではありません。すべてのチームメンバーを巻き込むものであり、健全な 変更管理を必要とします。
アドボカシーチームを確立する
このグループが多くの場合、Figmaとの連携を主導します（👋😉）。Figmaへの移行を考えている場合は、私（Clara）にTwitterで連絡するか、 弊社の営業チームにお問い合わせください。
コアとなるFigmaアドボカシーチームを形作ることは、移行を成功させるために重要です。さまざまな部門（開発、製品管理、ステークホルダーグループなど）からの代表メンバーを結集することをお勧めします。このチームは、バランスのとれたフィードバックを提供し、全員に最適なFigmaワークスペースを提供し、組織全体のコミュニケーションを管理し、ライブラリ移動を指揮するうえで非常に重要な役割を担います。
この戦略は、Wells Fargo社、Uber社、JPMorgan Chase社などの会社のものが参考になります。Wells Fargo社では、Figmaエキスパートおよびマニア（「Figmaジェダイ」と呼ばれます）が内部移行を主導しました。Uber社は、既存のデザインシステムワークショップにFigma基本トレーニングおよびデモをペアリングすることから始めて、徐々にUber社のワークフローに統合していきました。JPMorgan Chase社はデザインシステムに熱心な従業員からアドボケートを見つけ出し、さらにリーダーシップおよび様々な部門のグループから任命をしました。これらの例は、熱心なチームメンバーを部門横断的に選び、既存のイニシアチブの上位に構築することで、シームレスな移行の土台を作ることの重要性を明確に示しています。
部門間でサポートし合う
Adam Noffsinger氏（Dropbox社のデザインシステムに取り組むシニアプロダクトデザイナー）が、記事「Design Tooling at Scale」でFigmaへの移行について詳細に説明しています。
デザインチームだけでなく、開発者、プロダクトマネージャー、ステークホルダーから同意を得ることが非常に重要です。Dropbox社では、当時のデザインマネージャーKyle Turman氏とスタッフデザインプログラムマネージャーSarah Lin氏がチームと共にリーダーシップへの提案をまとめ、利点と欠点を整理しました。組織の残りのメンバーを巻き込むために、ワークショップを開催したり、ベストプラクティスを共有したり、ライブラリとコンポーネントへすぐにアクセスできるようにすることに集中的に取り組みました。さらに、「想像以上のたくさんのFigmaノベルティ 」を配りました。
一連のツールからFigmaに移行する方法についてのヒントは、Figma移行ツールキットを確認してください。
他のチームから学ぶ
移行を自分たちで完了したチームと連携することも有益かもしれません。Martin Hardee氏は大きな組織がFigmaに移行するのをサポートしています。Hardee氏は、Wells Fargo社のデザインフレームワークの責任者としてFigmaを広範に導入し始めたとき、「どのようにしたら大規模な展開を効果的かつスムーズに実施できるか」を自問しました。その問いへの答えを導き出すために、彼は同様の移行経験を持つ他の大きな組織に問い合わせました。彼らは自分たちのインサイトとベストプラクティス（トレーニング、戦略、カバーページ、 するべきではないことに関するいくつかのヒントを共有してくれました。それは、彼らが移行を成功させるうえで決定的に重要な役割を果たしたものでした。（こういった学びはHardee氏の大規模にデザインを行うためのシステム導入に関するヒントにまとめられています。）
移行タイムラインを作成する
チームのコミットメントおよびツールの有効期限日を考慮して、理想的なタイムラインを作成します。直近で年間プランニングをしなければならないことがありますか? 終わりが近いサブスクリプションはありますか? これらのタイミングに対応することは重要であり、それは戦略に影響します。 Figma移行ツールキットに含まれているテンプレートタイムラインを使用するか、FigJam内のこのガントチャートテンプレートを使用することもできます。
ガントチャートを使用して、チーム、プロジェクトなどのプランニングを視覚化しましょう。面白い事実: 私たちはこのテンプレートを使用してFigJamをプランニングしました（メタ的ですね）! デザイナーアドボケートLuis Ouriach氏もこのFigmaへの移行タイムラインビルダーを構築しました。
効果的なコミュニケーションプランを作成する
移行タイムラインが具体化してきたら、 詳細なコミュニケーションプランを準備します。このプロセスに参加してもらうためにさまざまなチームにいくつかの告知を送信する必要があるでしょう。必要と思われるメッセージを次にいくつか示します。
- ツールの移行を検討していることの周知
- ツールパイロットプログラムへの参加依頼
- Figmaを導入することに関する決断
- 今後のワークショップに関する告知（わくわくするデモが満載）
- 特定の役割ベースのアプリケーションに関する教育
このコミュニケーションプランを使用することで、チームはプロジェクト更新を提供するタイミングと方法や、だれをコミュニケーションに加えるべきかを理解しやすくなります。
告知の程度はそのたびに変わる可能性があります。全員に告知した方がいい場合もあるし、チームチャンネルで告知すればいい場合もあります。告知ごとにコミュニケーション方法は調整してください。Help Scoutチームが正式な移行の準備していたときのプリンシパルデザイナー、Buzz Usborne氏はFigmaを説明する20分のデモビデオで使用方法の基本といくつかの利点を伝えました。Usborne氏は、「この方法は大正解でした。最初はこうした動きに若干警戒していた人達に対する衝撃を確かに和らげることができました」と述べています。
あらゆるコミュニケーションと同様に、繰り返しが重要です。むしろ、コミュニケーションし過ぎを目指しましょう。更新を定期的なミーティングで共有し、オフィスアワーを実施することで、あなたもチームもコミュニケーションできるようにしましょう。非同期でも対面でもかまいません。明確化し、再確認し、サポートするためにそこにいるようにします。「利用できるあらゆるコミュニケーションチャンネルを使用しました」とJPMorgan Chase社のバイスプレジデント兼DesignOpsプログラムマネージャー、Andrew Garber-Browne氏が述べています。コミュニティが会社のチャットで自然に形成されていたことがわかりました。そこは、オープンな会話、質疑応答、情報交換をするためにデザイナーとエンジニアが定期的に確認する場所でした。
多様なデザインシステムを作成し、デザイン要素を整理するためのインサイトについては、James Nash氏とLouis Chenais氏のデザイントークンに関するガイド（Schema 2022）、テーマのデザインに関するBrad Frostの考え、 Nate Baldwin氏のデザイン要素の分類へのアプローチ、Nathan Curtis氏のこれらの要素の命名に関するアドバイスを参照してください。
基盤を構築する
全員が賛同したら、実際の作業が始まります。もちろん、技術的には前のツールからファイルをインポートすればそれで終わりですが、それでは大切な機会を失うことになります。ファイルとプロセスをリファクタリングする機会です。ライブラリのクリーンアップ、コードリポジトリとの整合、明確なガイドラインの確立など、再出発のためにこの機会を捉えましょう。
ここでは、Figmaアドボカシーチームが実際に動き始めます。Figmaの美しさはそのコラボレーション機能にあります。バリアブル名、これらのバリアブルのモード、コンポーネントプロパティ、バリアント設定、ファイル構造、ブランチ名、チーム構造などの基盤要素で連携することで、Figmaをワークフローに効率的に統合することができます。開発者と一緒に開発モードを体験してみることもお勧めします。デザインシステムおよびライブラリで設定しているバリアブル、モード、コンポーネント名が開発の作業方法を適切にマッピングしていることを確認しましょう。
デザイナーアドボケートLuis Ouriach氏によるこのエンタープライズワークスペース構造ガイドは、チームとファイルを組織化するための素晴らしい出発点となります。（注: このリソースはエンタープライズプラン向けです）。Figma愛好家Joey Banks氏によるこのファイルを使用して、チーム名、説明、アイコンをモックアップして、チームと共有することもできます。
覚えておくこと: これらの基盤を設定する際、シンプルさと複雑さは紙一重です。これらの項目の一部はあとで処理することもできますが、事後にプロセス変更が必要になることを忘れないでください。基盤に関する決定は、コミュニケーションプランでも強調表示するべきです。
FigmaデザイナーアドボケートのLuis Ouriach氏によるこのコミュニティファイルでは、チーム用、プロジェクト用、ファイル用、そしてあらゆるプラン用のデザインシステムを構築する方法に関する推奨事項を紹介しています。
Turman氏は、Dropbox社の1か月に及ぶSketchからFigmaへの移行は、単純なトランスファーを超えるものになったと言っています。それはデザインシステムを改良し、既存の問題に対応し、機能拡張を導入する機会でした。この移行によってより柔軟で分散的な作業環境に対応することができ、デザインファイルのアクセス性と共有性が向上しました。特に、この更新によって効率的なライブラリ継承が容易になり、上位レベルのライブラリでの変更を下位レベルのライブラリにシームレスに引き継げるようになりました。デザインシステムを更新する際の一貫性と容易さが保証されるようになったのです。アプリ内コメントによって、直接かつ非公式のフィードバックを返すための道筋が提供されました。
JPMorgan Chase社では、この移行は乱雑さを解消し、累積するデザイン課題に対応する機会と見なされ、古いやり方に執着することより再出発することが優先されました。その方が長期的に時間効率が高くなることがわかりました。他のチームはFigmaへの移行をデザインシステムの主な更新と組み合わせることで、Figma独自のコンポーネント機能を活用できるようになりました。
Martin Hardee氏は選択的な移行の重要性を繰り返し強調し、古いデザインを移行しないように助言しています。「3年前のデザインを持ち込む必要が本当にありますか?」とHardee氏は問います。「一般的に、Figmaでデザインシステムを作り直し、動作中または最近のプロジェクトのみを上乗せすることをお勧めします。会社で最終的に移行する必要があるものは、最初に考えたものよりずっと少ないことがよくあります。」この戦略的アプローチは、量よりも質と必要性を強調します。
移行プロセスは、チームが既存のデザインシステムを評価、洗練、改善するための重要な機会になる可能性があります。以前のデザインプロセスに存在していた非効率を取り除く機会でもあります。ツール変更を最大限に活用して、デザインシステム項目ウィッシュリストのいくつかの優先度を再考しましょう。今こそ、デザイントークンを最終的に実装し、トークン構造を再構築し、ライブラリの完全監査を実行すべき時です。やりかけの仕事を片付けて、新しくスタートしましょう。
チームをFigmaにオンボーディングする
Figma移行の基盤要素を整備したら、次のステップはツールをチーム全体に紹介することです。Dropbox社とUber社は、このフェーズで、トップダウンで指示するのではなく、自然なボトムアップアプローチを取りました。Dropbox社はチームに、エンジニア、UXライター、デザイナー向けのワークショップを企画してもらい、 Hack Week中に開発した役立つヒント、コツ、スターターガイドが満載のマイクロサイトも開設されました。Uber社のアプローチには「Figma 101」ワークショップが含まれていました。このワークショップでは、ツールの機能が紹介され、リアルタイムコラボレーションの利点についての認識を高め、フィードバックとコメントを通じてアクティブな対話を促しました。
Wells Fargo社は同様の戦略を採用して、学習カーブを簡素化するデモとワークショップを実施しました。初期ステージでは、オフィスアワーを週に複数回実施しました。チームがFigmaに慣れるにつれて、次第に頻度を減らしました。「全員がFigmaを快適に使えるようになり、愛着が深まると、オフィスアワーのトピックが「Figmaハウツー」からデザインシステムとデザインパターンの使用に関する一般的なトピックにシフトする傾向あります。」とHardee氏は言います。「それは、いくつかの会社で見てきたとても一般的なことです。」このフェーズは、Figmaに精通してもらい、Figmaへの好奇心を育成するうえでとても重要であり、広範な導入を確実にするものです。
チームメンバーをFigmaにオンボーディングするための、その他のテクニックをいくつか紹介します。
- ドキュメントにFigmaを取り込む: Figmaが簡単に目に留まり、手軽に利用してもらえるように、Figmaの説明をすべての内部リソースに追加します。
- Figmaをオンボーディングに使用する: Figmaを新入社員向けの組織図やチーム実習に活用します。
- トレーニングハブを作る: コミュニティとインターネットソースを使用して、ビデオ、チュートリアル、プレイグラウンドなどのリソースや、会社固有のトレーニング教材を備えるセクションをFigma内に作ります。
製品デザイナーJustyna Sieczka氏とAlicja Gancarz氏がこの開発者向けテンプレートワークショップを企画しました。このワークショップには、スライド、データ、電子書籍が含まれます。
- オンボーディングワークショップを開催する: さまざまな役割向けに調整された多様なカリキュラムで構成される、チームオンボーディング用ワークショップを提供します。
- オフィスアワーを実施する: 質問および個人向けサポートのためのセッションを開催します。
- 業界イベントに参加する: 業界イベントまたはFigmaイベントにチームとして参加します。
- 継続的な学習を促進する: ヒントとスキルをチーム内で共有するためのプログラムと行事を始めます。（Figmaフライデーなどどうですか?）
- Figmaコミュニティに参加する: 学習とリソースを共有するためにより広範なFigmaコミュニティとのつながりを促進します。
社内文化の変化に備える
Figmaに移行することは単に新しいツールを学習することではありません。職場の文化を、よりコラボレーションができて風通しのよい文化へと抜本的にシフトさせることでもあるのです。孤立した職場から統合された透明性のある環境に移行するには、技術的トレーニングと同じぐらい、文化的適応にも注力する必要があります。
さまざまな移行で私が経験したことは、Figmaへの抵抗は技術的な複雑さに由来するのではなく、Figmaがもたらす文化的変容に由来するという点です。デザイナーや製品ビルダーは通常、根っから好奇心が高く、新しい文化に容易に適応します。しかし、複数のプレーヤーが絡むFigmaにおける製品開発の文化的な変化には、課題が伴うことがあります。たとえば、Wells Fargo社は、移行後、デザイナー、開発者、製品チーム間において、同時にコラボレーションをする必要があるものがあったり、そうではないものもありました。同様に、JPMorgan Chase社では、UXの役割がサービス指向のアプローチからより戦略的なパートナーシップへと再定義され、コラボレーションと効率性が大幅に向上しました。
その他のリソース
- 初心者向けFigmaチュートリアル
- Figmaを使ってみましょう
- SketchからFigmaに移行する際に知っておくべきこと
- Figma Learn（ドキュメント）
- FigmaのYouTubeチャンネル（チュートリアル、詳細情報など）
Figmaへの移行は毎回同じではなく、それぞれのケースで独自の課題と成功物語があります。しかし、戦略的プラン、堅牢なパートナーシップ、適応性の高いマインドセットがあれば、Figmaに移行することで大きな成果を手にすることができ、チームには未来のコラボレーションの成功が約束されます。
その他のリソースが必要ですか? Figmaに移行するためのベストプラクティスガイドを参照するか、弊社のチームに問い合わせて個別のサポートを得ましょう。