デザインツールとしてのFigmaの力

Figmaはクラウドベースの設計ツールであり、機能と機能はSketchに似ていますが、チームのコラボレーションに適した大きな違いがあります。 このような主張に懐疑的な人のために、Figmaが設計プロセスを簡素化し、設計者とチームが効率的に連携するのを支援する上で他のプログラムよりも効果的である方法を説明します。

よく見てみましょう。

Figmaはどのプラットフォームでも動作します

Figmaは、Webブラウザを実行するすべてのオペレーティングシステムで動作します。 Mac、Windows PC、Linuxマシン、さらにはChromebookもFigmaで使用できます。 これを行うのはこのタイプの唯一の設計ツールであり、さまざまなオペレーティングシステムを実行するハードウェアを使用するショップでは、誰もがFigmaファイルを共有、開き、編集できます。

多くの組織では、設計者はMacを使用し、開発者はWindowsPCを使用します。 Figmaは、これらのグループをまとめるのに役立ちます。 Figmaの普遍的な性質は、PNG-pong（更新された画像が設計チームの分野間で行き来する）の煩わしさも防ぎます。 Figmaでは、設計作業をすべての人が利用できるようにするための仲介メカニズムは必要ありません。

Figmaでのコラボレーションはシンプルでなじみ深い

Figmaはブラウザベースであるため、チームはGoogleドキュメントの場合と同じように共同作業を行うことができます。 ファイルを表示および編集しているユーザーは、アプリの上部に円形のアバターとして表示されます。 各人にも名前付きカーソルがあるので、誰が簡単に何をしているかを追跡できます。 他の人のアバターをクリックすると、その時点で表示されているものにズームします。

リアルタイムのファイルコラボレーションは、「設計のドリフト」（合意された設計の誤解または逸脱として定義される）を軽減するのに役立ちます。 デザインのドリフトは通常、プロジェクトの進行中にアイデアが考案され、迅速に実装されたときに発生します。 残念ながら、これはしばしば確立された設計からの逸脱につながり、摩擦と再加工を引き起こします。

Figmaを使用すると、設計リーダーは共有ファイルを開くだけで、チームが何を設計しているかをリアルタイムで確認できます。 設計者がブリーフまたはユーザーストーリーを何らかの形で誤解した場合、この機能により、設計リードが介入し、コースを修正し、他の方法では無駄になっていたであろう無数の時間を節約できます。 （比較すると、Sketchを使用しているチームには、設計者が迷っているのかどうかをすぐに判断する方法がありません。）

補足：一部の設計者は、作業中に「スパイ」されることを好まないため、利点を説明するのは設計リーダー次第です。 一般に、ほとんどの設計者は、このような機能の価値をすぐに理解し、共有環境での作業に簡単に適応できます。

FigmaはチームコミュニケーションにSlackを使用

FigmaはSlackを通信チャネルとして使用しています。 FigmaチャネルがSlackで作成されると、Figmaで行われたコメントやデザイン編集はチームに「緩められ」ます。 Figmaファイルを変更すると、ファイルが埋め込まれている他のすべてのインスタンスが更新されるため、この機能はライブで設計する場合に非常に重要です（開発者にとっては頭痛の種になる可能性があります）。 モックアップへの変更は、保証されているかどうかに関係なく、すぐに精査され、フィードバックチャネルが公開されます。

Figmaの共有は複雑ではなく柔軟です

Figmaでは、ファイル、ページ、またはフレーム（他のデザインツールではアートボードと呼ばれます）を権限ベースで共有することもできます。 ページ上のフレームへの共有リンクが作成されると、そのリンクをクリックした人がブラウザバージョンのFigmaを開き、フレームの拡大ビューが読み込まれます。

ファイルからフレームまでのこの形式の選択的共有により、設計者、製品所有者、および開発者は、バグ追跡ツールやConfluenceやSharePointなどのコミュニティソフトウェアに必要なものを正確に共有できます。

埋め込まれたFigmaファイルはリアルタイムの更新を提供します

Figmaは、サードパーティのツールにiFrameを貼り付けるためのライブ埋め込みコードスニペットも共有しています。 たとえば、Confluenceを使用して埋め込みモックアップファイルを表示する場合、それらのファイルはFigmaファイルを保存しても「更新」されません。これらの埋め込みファイルはFigmaファイルです。

Figmaの誰かがモックアップに変更を加えた場合、その変更は、埋め込まれたConfluenceモックアップでライブで確認できます。 （FigmaとConfluenceの統合について詳しくは、こちらをご覧ください。）

この機能がUXプロセスに与える影響を、次の図に示します。

Figma以前は、デザインのモックアップと更新の交換を容易にするために、他のいくつかのツールが使用されていました。 反復サイクルは一連の前後のファイル更新であったため、チームは現在の設計を確認して実装できました。

Figma以降、サードパーティのツールは不要になりました（ただし、必要に応じて使用できます）。 Figmaは前述のサードパーティツールの機能を処理するため、プロセスには1つのステップしかありません。スケッチからFigmaに移動し、すべてのグループに最新のモックアップがあります。 厳密な意味での「ハンドオフ」はありません。

Figmaはデザインレビューのフィードバックに最適です

Figmaは、デザインモードとプロトタイピングモードの両方でアプリ内コメントをサポートしており、コメントスレッドはSlackやメールで追跡されます。 InVisionやMarvelなどのサードパーティツールを使用してチームからフィードバックを取得するために、PNGファイルを公開したり、定期的に更新を実行したりする必要はありません。

設計レビュー中に、チーム設計者は大画面で自分の作業について話し合い、コメントを記録し、問題を修正することができます。これらはすべてFigmaで行われます。 この形式のライブフィードバックは、チームの入力を取得するためにクラウドサービスにアップロードする必要があるSketchでは不可能です。

開発者のハンドオフはFigmaを使用して促進されます

Figmaは、開発者がデザインファイルをレビューするときに使用できるように、CSS、iOS、またはAndroid形式で選択したフレームまたはオブジェクトにコードスニペットを表示します。 設計コンポーネントは、開発者が表示できる任意のファイルで検査できます。 情報を取得するためにサードパーティのツールを使用する必要はありません。 それでも、チームが単純な測定やCSS表示以上のことをしたい場合、FigmaはZeplinと完全に統合されています。

Figmaプロジェクトファイルが1か所にある—オンライン

Figmaはオンラインアプリであるため、プロジェクトとそのファイルを専用のビューに表示することでファイルの整理を処理します。 Figmaは、Sketchのようにファイルごとに複数のページもサポートしているため、アジャイルチームはプロジェクトを論理的に整理できます。

• 機能テーマのプロジェクトを作成します。
• エピックまたはラージフィーチャーのファイルを作成します。
• ユーザーストーリーごとにそのファイルにページを作成します。

これは、プロセスの要求に応じて多少細かくすることができるファイルを整理する1つの方法にすぎません。

FigmaAPIはサードパーティのツール統合を提供します

Figmaには、ブラウザベースのアプリとの真の統合を可能にする開発者APIが含まれるようになりました。 企業はこれを使用して、デザインファイルのリアルタイム表示をアプリに統合しています。 たとえば、Uberには、会社の周りに「ライブオンエア」のデザインファイルを表示する大画面があります。 デザインは共有されており、社内の誰からのフィードバックも歓迎します。

AtlassianのJIRAソフトウェアはFigmaアドオンを実装しているため、製品の所有者、開発者、および品質エンジニアは、デザイナーからのモックアップの最新バージョンを常に表示しています。

さらに、FigmaのAPIは、Sketchがすでに提供しているサードパーティのプラグインと機能拡張に対する顧客の要求を満たすことを約束します。

ファイルのバージョン管理は自動またはオンデマンドです

ライブファイルの更新に関する不確実性は、Figmaの組み込みのバージョン管理システムによってさらに軽減されます。 設計者はいつでも、Figmaファイルの名前付きバージョンと説明を作成できます。 これは、合意された変更が設計に加えられた直後に実行できます。

共有環境のライブファイルは、変更が元のバージョンに意図的にコミットされるまで影響を受けません。 自動的に保存されたバージョンを復元して、複製を作成したり、元のバージョンを上書きしたりすることもできます。

Figmaのプロトタイピングは簡単で直感的です

Sketchは最近アートボードをアートボードプロトタイピングに追加しましたが、Figmaはフレーム間のトランジションを提供することでさらに進んでいます。 Figmaのシンプルなプロトタイピング機能により、InVisionやMarvelなどのスライドショースタイルのプロトタイピングを行う別のツールが不要になります。 トランジションを使用した単純なプレゼンテーションだけが必要な場合は、レビューツールにエクスポートする必要はありません。

Figmaプロトタイプは、Figmaデザインファイルと同じように配布できます。 リンク権限を持つ人は誰でもプロトタイプを表示してコメントできます。また、そのフィードバックはツールのコメントパネルにキャプチャされ、Slackに記録されます。 開発者は、設計ワークフローを確認し、設計者に直接@メッセージを残して、プロトタイプ内から測定値とCSS属性を取得できます。

Figmaのチームライブラリは設計システムに理想的です

デザインシステムは多くの企業にとって必要不可欠になり、UXデザイナーやフロントエンド開発者が利用できるパターンライブラリで使用するために、再利用可能でスケーラブルで「トークン化」されたコンポーネント（SketchおよびIllustratorのシンボル）が必要です。

よく使用される「信頼できる唯一の情報源」というフレーズは、ここに当てはまります。Figmaチームライブラリが作成されると、プロジェクトにアクセスできる人は誰でも、設計のコンポーネントのインスタンスを使用して、最新バージョンで作業していることを確認できます。

コンポーネントライブラリに対するFigmaのアプローチは、シンプルで管理が簡単です。 設計者は、コンポーネントでいっぱいのファイルを作成したり、ページ上のコンポーネントを使用してパターンライブラリを整理したりできます。 Figmaページの各フレームは、チームライブラリの組織セクションになります（階層を作成する必要はありません\ like \ this）。

ライブラリを整理する1つの方法は、コンポーネント専用のプロジェクトを作成することです。 そのプロジェクト内のファイルは必要に応じて整理でき、それらのファイル内のページはそれに応じて配置できます。

Figmaは設計チームワークを強化するために構築されています

Figmaを任意の期間使用すると、このライブコラボレーションツールの利点がわかります。 これにより、チームはタスクを遂行し、さまざまな分野の設計システムを構築する際に不可欠な完全な開示を促進します。 Figmaは、誰でもどのプラットフォームでも簡単に使用でき、チームが作業とライブラリをすばやく共有できるようにします。

Sketchから切り替えた後にFigmaを使用する設計の専門家（Sketchファイルはパリティ付きでFigmaにインポートできます）はがっかりしません。

…同僚やクライアントとの共同作業の方法を完全に変革します–Figmaによるコラボレーションデザインの合理化

Figmaは、過去数年間でUIデザインツールの世界で最高のものを統合しました–デザインチームがFigmaへの切り替えを検討すべき理由

昨年、私はUI / UXデザインプロセスにFigmaを使用しており、作業時間を節約できました。 それは私のデザインワークフローを本当に変えました–FigmaでUI/UXワークフローを合理化する方法

フィグマで過ごした時間は、通常、私の1日の中で最も楽しく、最も生産的な部分です。フィグマは私のワークフロー全体を変革しており、素晴らしいです。

•••

参考文献：

• これらのトップUXツールであなたの技術をマスターする
• Figmaとのコラボレーションデザインを合理化
• CraftbyInVisionを使用してチームコラボレーションを合理化する
• ワイヤーフレームの死。 ストレートからハイフィデリティまで！
• 地球をあなたのオフィスにすることで世界クラスのデザイナーになる