ミニチュートリアル–設計プロセス全体にFigmaの機能を活用する
公開: 2022-03-11新たなデザインツールの世界は信じられないほどエキサイティングです。 有望な新しいプログラムが次々と立ち上げられていますが、特に、大規模でほとんど分散している設計チームにとって、徐々に最良の選択となっているプログラムがあります。
Figmaは、設計プロセス全体をエンドツーエンドでサポートする可能性があります。 最初のスケッチ、フィードバックの収集、コラボレーション、すぐにテストできるプロトタイプ、および開発者の引き継ぎは、その機能の範囲内です。 Figmaはまた、製品マネージャーや設計リーダー、およびその他すべての利害関係者の作業を簡素化します。
では、Figmaを競合他社と一線を画すものは何でしょうか。 いくつかの重要な側面がありますが、それらはすべて、FigmaがWebベースであるという事実にまでさかのぼることができます。 これは、ツールが最初にリリースされたときに多くの眉をひそめましたが、最終的には、Figmaの柔軟性と独自の機能への道を開きました。
スムーズな製品設計プロセスの基本は何ですか？
チームやプロジェクトごとにワークフローが異なる場合があるのは事実ですが、製品の設計と管理に不可欠なコンポーネントである機能とフェーズがあります。 Figmaはそれぞれをカバーしています。
- アクセシビリティとコラボレーション。 チームが使用するツールに関係なく、協力し、プロジェクトを提示し、フィードバックを収集し、利害関係者を常に把握する方法が必要です。 これらの機能はすべてFigmaで利用できます。
- 反復して成果物を作成する柔軟性。 Figmaは柔軟性があり、最初のアイデアをスケッチし、ワイヤーフレームから忠実度の高いモックアップまですべてを反復するための共同ホワイトボードとして使用できます。
- プロトタイプを作成してテストする機能。 モバイルアプリを設計しますか？ インタラクティブなプロトタイプを作成して公開し、スマートフォンで直接テストします。すべてFigmaから入手できます。
- 信頼できる唯一の情報源を確立する。 Figmaは、完全にオンラインで存在する製品設計システムを定義するための優れた方法です。 これは、デフォルトでは信頼できる唯一の情報源です。 「これは最新バージョンですか？」
- スムーズなハンドオフ。 開発者とリンクを共有するだけで、開発者は、エクスポートの準備ができている設計を実装するために必要なすべての情報（レッドライン、測定値、およびグラフィックアセット）にアクセスできます。
- カスタマイズおよび改善される汎用性。 FigmaのプラグインAPIを使用すると、チームは独自のプラグインを作成したり、より広範なユーザーコミュニティを利用して、ツールを新しい機能で拡張したりできます。
1.アクセシビリティとコラボレーション
チームを参加させる
Figmaが上記の6つの主要分野にどのように貢献しているかを詳しく見てみましょう。 新規ユーザーは、無料のFigmaアカウントを作成し、チームを編成して、Figmaの使用を開始するのを見ることができます。 チームが作成されたら、チームメンバーと関連する利害関係者を招待します。
利用可能なアクセスレベルは3つあります。 それはかなり自明ですが、通常、編集権はデザインチームに与えられ、表示権は他のすべての人に与えられます。 これには、設計プロセスに従い、フィードバックを提供できる必要がある開発者やその他の利害関係者が含まれます。
同様の共有オプションは、チームレベル（上に表示）、プロジェクトレベル、およびファイルレベルで使用できます。 アクセスレベルが指定されていない場合、アクセスレベルはチームからプロジェクトへ、およびプロジェクトからファイルへと伝播します。
Figmaはブラウザで利用できるので、誰かがどのように招待されているか、どのシステムを使用しているかは関係ありません。 使用するデバイスとブラウザが最小要件を満たしている限り、リンクを使用してすぐにアクセスでき、編集権と表示権のどちらを持っているかによってインターフェイスが変わります。
プロジェクトファイルの埋め込み
Figmaプロジェクトファイルは、サードパーティのソフトウェアに埋め込むことができます。 たとえば、共有のDropbox Paperドキュメントを使用して、プロジェクトの現在の状態を表示できます。
プロジェクトファイルを埋め込むには、ファイルの可視性をリンクを知っているすべての人に設定します-埋め込みコードを表示、コピーし、embed.lyをサポートするサードパーティソフトウェアにプロジェクトファイルを埋め込むことができます。
フィードバックと改訂
製品設計プロセスのもう1つの重要な機能は、設計を配布し、フィードバックを収集し、改訂を管理する機能です。 Figmaリンクを持っている人は誰でも、最新バージョンを見て、フィードバックしたい点について直接コメントすることができます。
チームメンバーにタグを付けるには、@文字を使用します。システムは、選択できる名前のリストを表示します。 そうすることでチームメンバーに通知され、フィードバックが処理されたら、[解決]をクリックしてディスカッションを閉じることができます。
チームの連携を維持するために、指定されたSlackチャネルでFigmaファイルからのディスカッションを公開できる優れた統合があります。
リアルタイムコラボレーション
Figmaのより興味深い機能の1つは、彼らがマルチプレイヤーと呼んでいるものです。 これにより、複数のチームメンバーが同時にデザインファイルを開いて作業することができます。 ファイルで作業しているすべての人がページの右上に表示され、アバターには名前が付けられてクリック可能です。
これが実際に何を意味するのかを理解するには、時間がかかる場合があります。 設計者がマルチプレーヤーを使用してファイルの同じ部分を同時に処理する可能性は低いですが、特に大規模な分散チームの場合、ファイルバージョンの競合について心配する必要がないことは非常に快適です。
マルチプレイヤーは、ファイルに接続しているすべての人がプレゼンターのビューポートをたどることができるため、リモートでプレゼンテーションを行うときに便利です。 また、チームは追加のプログラムをバイパスして、Figmaをオンラインホワイトボードとして使用できます（ただし、Miroなどの特定のソリューションが最終的にはこの仕事に適している場合があります）。
このために、カスタムコンポーネントを作成して、特定のアセットを仮想の付箋または図の要素として複製することをお勧めします。
2.成果物を反復および生成する柔軟性
チームメンバーが招待され、最初のスケッチが進行中の場合、Figmaを使用して反復できます。 Figmaが作成された主な理由は、インターフェイスデザインです。ホワイトボードが終了すると、チームはフローマップとワイヤーフレームに移行する可能性があります。 繰り返しますが、これらのタスクに再利用できるコンポーネントライブラリを構築するのは賢明です。 公式のテンプレートコレクションは、最初からインスピレーションとデザインのアレンジを提供します。
3.プロトタイプを作成してテストする機能
Figmaを使用してインタラクティブなプロトタイプを作成するのは非常に簡単です。 Figmaファイルを編集権限で開くと、デザインモードとプロトタイピングモードを切り替えることができます。 プロトタイプモードに入ると、ステージまたはレイヤーのサイドバーから、要素をクリックしてインタラクティブにすることができます。
プロトタイプモードで要素を選択すると、側面に小さな円が表示されます。 ドラッグすると青い線が表示され、画面または状態にドロップしてインタラクションの結果を表示できます。
Figmaでは一般的なトランジションを利用できるため、忠実度の高いプロトタイプを簡単に作成できます。 実際、Figmaチームは最近、スマートなアニメーションとドラッグトリガー機能をリリースしました。 スマートアニメーションの側面は、同様の要素の動きを補間しますが、ドラッグトリガーは新しいタイプのインタラクションです。 どちらもインタラクティブなプロトタイプの品質を大幅に向上させます。
ユーザーテスト
繰り返しになりますが、ユーザーテストの場合でも、Figmaプロトタイプを配布するために必要なのはリンクだけです。 右上の小さな再生アイコンをクリックするとプロトタイプが起動し、新しいURLが生成されます。 URLをコピーするか、青い[プロトタイプの共有]ボタンを使用することができます。 ユーザーがリンクを開くと、インタラクティブなプロトタイプが表示され、必要に応じてコメントを残すことができます。
モバイルでのテスト
モバイルデバイスの設計は、プロトタイプを取り巻く実際のデバイスのモックアップとともに提示されます。 インタラクションをテストするためにより現実的なものが必要な場合は、デバイス固有のテスト用にFigmaMirrorアプリをダウンロードすることをお勧めします。
4.信頼できる唯一の情報源の確立
バージョン履歴
プロジェクトファイルが常に最新であり、常にバックアップされていれば素晴らしいと思いませんか？ この機能は、デフォルトでFigmaに含まれています。 各ファイルは、作業中に自動的に保存され、Figmaは、30分間操作がないと、バージョン履歴に新しいエントリを作成します。 自動的に保存されたすべてのバージョンのログが作成され、必要に応じて各バージョンを復元できます。
もちろん、作業を節約するためのオプションは自動バージョン管理だけではありません。 バージョンを手動で保存したり、バージョン履歴の特定のバージョンを編集したりすることができます。
設計システムとコンポーネントライブラリ
Figmaが優れているもう1つの側面は、設計者がコンポーネントライブラリを作成、整理、および配布する方法です。 任意のファイルをライブラリとして公開でき、すべての色、テキストスタイル、効果、グリッド、またはコンポーネントを他のFigmaファイルで使用できます。
ライブラリ内の要素に変更が加えられると、編集内容を公開して、それらの要素を使用するファイルに伝達できます。 これらのファイルで作業している設計者は、編集を受け入れるかどうかを決定できます。
ライブラリの配布方法を決定する機能と、ライブラリ要素の表示または非表示を切り替えるオプションを組み合わせることで、エクスペリエンス全体がスムーズかつ強力になります。
コンポーネントとライブラリをネストして、関係するすべての人のためにすべてがバージョン管理され、最新の状態になっている洗練された設計システムを作成できます。 また、すべてのコンポーネントにコメントで注釈を付けることができます。
5.スムーズなハンドオフ
開発者ハンドオフ
Figmaを使用すると、設計者と開発者は、ハンドオフを管理するためにZeplinのような別個のツールを必要としません。 表示専用アクセスでも、ファイルを開いて右側のサイドバーでコードモードに切り替えることができます。
コードモードがアクティブな場合、ステージ上の要素を選択すると、実装に必要なすべての関連情報が表示され、他の要素に対するコンポーネントの位置に関する他のすべての情報が表示されます。 同様のソリューションと同様に、生成されたコードは完全にコピーして貼り付けることを意図したものではありませんが、このように簡単にアクセスできると便利です。
6.カスタマイズおよび改善される多様性
FigmaAPIとカスタムプラグイン
FigmaのAPIとプラグインシステムにより、幅広い設計チームと専門分野が特定のプロセスニーズに合わせてプログラムを簡単にカスタマイズできます。 Figmaの柔軟性により、ユーザーはプログラムでプラットフォームと対話することができます。 いくつかの例：
実際のデータの使用
モックアップやプロトタイプで実際のデータを使用できることは非常に価値があり、Figmaは外部ソースからのコンテンツをインポートできるようにすることでそれを可能にします。 実際のコンテンツを活用することで、設計コンポーネントのストレステストを行い、モックアップを最新の状態に保ち、設計に関係のないチームを巻き込むことができます。
Google Sheets Syncという名前のプラグインは、実行できることの完璧な例です。 このプラグインを使用すると、Googleスプレッドシートをソースとして簡単に統合して、Figmaファイルのコンポーネントのコンテンツを入力および同期できます。
高度なワークフロー
UIデザインプログラム内にデザインシステムを収容する機能は、システムが顧客向けの画面に一貫して実装されている場合にのみ価値があります。 ありがたいことに、役立つFigma API、プラグイン、統合があります。
Storybookアドオンは、Figmaファイルを同期し、実装されたコンポーネントと一緒にFigma-designコンポーネントをパネルに表示します。 もう1つの興味深いユースケースは、Figmaコンポーネントをコードに変換するワークフロー拡張機能であるFigma toReactConverterです。
Figmaの機能は設計プロセス全体に理想的です
すべての設計者のニーズや設計の問題を処理できる単一の設計プログラムはありません。それは良いことです。 設計ツール間の競争は、設計者にとって有利です。 それは私たちのツールを作る会社が私たちが必要とするものに耳を傾け、私たちが行う仕事に適した最新の機能を私たちに提供することを保証します。
とは言うものの、Figmaは高度でありながら直感的なツールであり、デジタルデザインプロセス全体に取り組むことができる以上の能力があることが証明されています。 個々の設計者とチームは同様に、その独自のコラボレーションと反復機能の恩恵を受けることができ、プログラムが不十分な場合、プラグインの膨大な選択が空白を埋めます。
•••
Toptal Designブログでさらに読む：
- デザインツールとしてのFigmaの力
- Figma vs. Sketch vs. Axure –タスクベースのレビュー
- ミニチュートリアル–Figmaボタンコンポーネントの操作
- これらのトップUXツールであなたの技術をマスターする
- 正確なデザイン–AdobeXDレビュー