すべての設計者が使用すべき10の最高のFigma機能

フリーランスのグラフィックデザイナーであろうと、社内のUI / UXデザイナーであろうと、Figmaをマスターすることで、成功するキャリアのはしごを登ることができます。

それを念頭に置いて、ここにすべての設計者が使用すべきだと私たちが考える最高のFigma機能があります…

フィグマとは何ですか?

Figmaは、UI / UXプロトタイピングに関する次世代の共同作業を提供する高度なWebベースのグラフィックデザインツールです。これは、ユーザーフレンドリーでありながらプロフェッショナルな独自のUXデザインを作成できる堅牢なアプリケーションです。

ですから、あなたが自分の分野で確立されているか、UI / UXデザイナーまたはグラフィックデザイナーとしてのキャリアを始めたばかりであるかにかかわらず、ここに理解するのに最適なFigmaの機能があります。

1.コンポーネント管理のバリアント

Variantsはインテリジェントなコンポーネント管理モジュールであり、Figmaコンポーネントライブラリとして知られています。同じコンポーネントの重複するバリエーションを簡単に整理し、それらを組み合わせてチームアセットライブラリを整理できます。

同様のすべてのコンポーネントに対して単一のコンテナを定義することもできます。共同作業中、Variantsを使用すると、チームメンバーは探しているものを簡単に見つけることができます。コンポーネントバリアントの値とプロパティをカスタマイズして、設計システムから当て推量を排除します。

2.箇条書き

UI / UXデザインプロジェクトに箇条書きと番号付きリストを含めることもできます。リストを使用すると、データを簡単に整理し、ベクトルデザインで関連情報を強調できます。最大5レベルのインデントを含めることができます。テキストの色、ストローク、および効果を使用して、視覚的な色の変更を実行することもできます。

関連: Adobe XD:今すぐ使用できる無料のUIおよびUXデザインツール

3.複数のFigmaアカウントを接続します

1つの画面ですべてのFigmaアカウント、ワークスペース、およびコミュニティプロファイルにアクセスします。最大10個のFigmaアカウントにログインしたままにすることができます。 Figma画面の左上隅から任意のワークスペースにすばやく切り替えることができます。アカウントの場合は、右上隅をクリックしてアカウントスイッチャーを開きます。

4.改良された[検査]タブ

Figmaの以前のコードパネルが[検査]タブになりました。この機能により、共同作業者、特に開発者は、作業中の設計の値とコードを取得できます。チームメンバーは、このタブから色、バリアント、プロパティ、シャドウ、コンテンツ、境界線、タイポグラフィなどのデータを抽出できます。

5.インスタンススワップメニュー

Figmaは、2020年にインスタンススワップメニューを刷新し、プッシュスタイルのメニューを追加しました。これにより、設計者はコンポーネント間を簡単にサーフィンできます。

ドロップダウンセレクターを使用して、チームライブラリを切り替えることもできます。コンポーネントプレビュー用の洗練されたサムネイルがあります。

6.Figmaコミュニティファイルとプラグインライブラリ

Figmaには、リソースが豊富なコミュニティプラットフォームがあり、プロジェクトを公開して、仲間のメンバーがプロジェクトを調べたり、やり直したりできるようにすることができます。何千人ものクリエイターがいて、次のリソースを入手できます。

  • フィギュアイラストライブラリーを開く
  • リモートデザインスプリント
  • マテリアルデザインキット
  • Figmaテンプレート

Figmaプラグインはパフォーマンスが高く、同時に安定していて安全です。これを書いている時点では、40を超える専用プラグインが利用可能であり、そのリストは増え続けています。エンタープライズサブスクリプションでは、社内でプライベートプラグインを配布できます。使用できる便利なプラグインは次のとおりです。

  • Figmaフレーム内での反復的なタスクの自動化
  • エラー検出プラグインの設計
  • データポピュレーションプラグイン

7.Zeplinの統合

FigmaはネイティブのZeplinプラグインをサポートしており、右クリックで簡単にFigmaデザインをZeplinワークスペースにエクスポートして、ブレインストーミングと開発をさらに進めることができます。他のデザインツールとは異なり、より大きなFigmaフレームまたはデザインをエクスポートする必要がある場合、解像度やパフォーマンスに問題はありません。

FigmaとZeplinは、Figmaコンポーネントの新しいライブアップデート機能をZeplinに導入するためにも協力しています。

8.プロジェクトのリアルタイム更新

Figmaを使用しないUI / UX設計プロセスでは、チーム全体が複数のサードパーティツールを使用して、プロジェクトの更新を中継し、モックアップを設計する必要があります。各チームメンバーが現在のステータスを把握できるようにするには、複数のファイル転送が必要です。

ただし、リアルタイムの更新を通じて、Figmaアプリ自体がプロトタイプの交換とチームメンバー内での更新を処理します。

Figmaでは、設計者から開発者へのプロジェクトの引き継ぎは実際には必要ありません。これは、Confluenceを使用してFigmaのモックアップを共有すると、デザイン内の変更がプロジェクトファイルのライブアクティビティとして自動的に表示されるためです。

関連: UIとUXデザインの違いは何ですか?

9.直感的でわかりやすいプロトタイピング

Figmaを使用すると、フレームからフレームへの遷移が含まれるため、プロトタイピングが非常に簡単になり、煩雑さがなくなります。 Figmaはオールインワンツールであり、MarvelやInVisionのようなサードパーティのレビューツールは必要ありません。

Figmaデザインファイルを共有するのと同じように、Figmaプロトタイプをチームメンバーと簡単に共有できます。あなたがする必要があるのは、関連する編集権限を持つリンクを共有することです。コメントやフィードバックはツール内に残り、Slack内でレコードを見つけることもできます。

開発者は、プロジェクト設計ワークフローに簡単にアクセスし、設計者にコメントを残し、CSS属性と測定値を取得できます。

関連: 10分で学ぶことができる簡単なCSSコード例

10.デザインレビューのフィードバックを共有する

UI / UXデザインプロジェクトのレビューは、Figmaを使用する場合の単なるチーム会議です。ブレーンストーミングとレビューセッション中に、チーム全体が大画面で作業して、同じFigmaデザインフレーム内でコメントを記録し、問題を修正できます。

Figmaは最先端のアプリ内コメントテクノロジーをサポートしているため、フィードバックの共有はシームレスです。プロトタイピングモードとデザインモードの両方についてコメントできます。すべての電子メールクライアントまたはSlackは、コメントや提案を保存できます。

Figmaは設計とプロトタイピングを容易にします

UI / UXの設計とプロトタイピングには、より高度なスキルセットが必要であり、複数のツールに重点を置いています。しかし、Figmaを使用すると、設計スキルを実際に学習して実装し、顧客体験を本当に向上させるUXを提供することがシームレスになります。

プロトタイピング、ブレーンストーミング、レビュー、UIデザインのハンドオフをすべて同じツールを使用して実行できます。 Figmaは現在業界標準であり、チェックする価値があります。