Figma：概要とレビュー

公開: 2019-09-29

Figmaは、コード生成、忠実度の高いモックアップ、インタラクティブなプロトタイピング機能を備えたUI / UXデザインツールであり、アプリ、画面、ベクターイラストのデザインに使用されます。 これは主に任意のOSで使用できるブラウザベースのツールですが、MacとWindows用のデスクトップバージョンもあります。

Figmaは、アプリをダウンロードした場合でも常にオンラインで実行されます。そのため、リアルタイムで設計を共同作業したい通常の分散型チームに最適です。 さまざまなチームメンバーがプロジェクトにライブで変更を加えることができ、デザインは常に同期され、アクセスしている人のために最新の状態になります。

Figmaのしくみ

Figmaには、Adobe XD、Gravit、Sketch、およびその他の同様のデザインツールに馴染みのある機能があります。 ブラウザベースであるにもかかわらず、インターフェースは以前に見たもののようになります。 これらのツールの多くは同じように機能し、すぐに使用できるものやプラグインが必要なものなど、特定の機能に関しては異なります。 また、忠実度の高いモックアップやプロトタイピングなどのプロジェクトを異なる方法で処理します。

Figmaのすべてはレイヤーベースであり、各アートボードはレイヤーで表されます。 アートボードからズームアウトして、一度に1つのファイルだけに焦点を合わせるのではなく、プロジェクト全体の鳥瞰図を取得します。 右側に情報パネルがあり、左側にツールとレイヤーパネルがあります。

フィグマ

オブジェクトの作成後にオブジェクトを操作するために余分なクリックや手順が必要になることがあるため、情報パネルは少し複雑に感じるかもしれません。このように、Figmaはそれほど直感的ではありません。 特にコンポーネントを再利用してライブラリから追加する場合、ワークフローも少し厄介になる可能性があります。

Figmaツール

Figmaには、次のような設計ソフトウェアに期待するツールがあります。

  • 配置
  • 制約グリッド
  • ブールコマンド（結合、交差、和集合、減算）
  • カラーピッカー
  • ブレンドモード
  • 複数の塗りつぶし
  • 効果（ドロップ/内側の影、背景/レイヤーのぼかし）
  • カスタムまたはデバイス固有のサイズ設定のフレームツール
  • マスク
  • 形状要素
  • ペンツールとベンドツール
  • テキストツール
  • レイヤーをロックして非表示にする
  • 移動ツール（アイテムをつかむためのポインター/クリッカー）
  • 固定
  • ズームツール

テキストツールについて知っておくべきことの1つは、フォントオプションを矢印で移動したり、地形のプレビューを表示したりできないことです。 設計を開始するときは、使用する地形を知っておくのが最善です。

注目すべきFigmaの機能

Figmaの傑出した機能のいくつかについてもう少し詳しく見ていきましょう。

  • ライブラリ：再利用可能なコンポーネントを使用してライブラリを作成し、チーム全体にアクセスを許可します。 コンポーネントライブラリはチームによって定義されるため、1つのチームが1つのライブラリを持ち、別のチームが独自のライブラリを持つことができます。 ライブラリでコンポーネントが更新されると、それを使用するすべてのデザインに変更が加えられます。 ライブラリ内のコンポーネントを更新するときは、誤って変更を加えないように、変更を公開することを確認します。 （「チームライブラリ」機能は有料プラン専用です。）
  • 移動：キャンバスの周りでオブジェクトを移動すると、ルーラーはその高さと幅を表示します。
  • スケール：いつものように、スケールツールはすべてのバランスを保ちます。 Figmaのユニークな点は、スケールが個々のツールであるということです。 使用時にシフトダウンを押し続ける必要はありません。 必要に応じて、情報パネルから拡大縮小することもできます。
  • ベクトルネットワーク：ベクトル上のノードに複数のセグメントをアタッチすることにより、ベクトルネットワークと呼ばれる複雑な形状を構築します（標準の2つだけではありません）。
  • 曲げ：曲げツールを使用すると、点だけでなく、任意のエッジで形状をつかんで操作できます。
  • Image-to-Shape：作成した形状に画像をドロップします。 形状を変換しても、画像は内部で比例したままになります。
  • 画像の配置ツール：画像はデザインにドロップするだけではありません。 代わりに、カーソル上に画像を保持し、クリックして所定の位置にドロップします。 （Shiftキーを押さずに）押したままサイズを変更すると、サイズを変更する代わりに画像がトリミングされます。

フィグマ

Figmaの利点

ツールとその独自の機能のいくつかに加えて、Figmaの利点は次のとおりです。

  • キャンバスに直接コメントする
  • CSSとSVG、iOSとAndroidのコードを生成する
  • JPG、PDF、PNG、またはSVGとしてエクスポート
  • 複数の画像を同時にインポートする
  • Sketchファイルをインポートする
  • オブジェクトからアートボードへのリンク
  • ショートカットは他のプラットフォームと同様です
  • バージョン履歴が利用可能です

共同のアイデアとデザイン

Figmaは、信頼性の高い共有および同期機能のおかげで、発想に優れています。 Muralのように、デジタルホワイトボードコラボレーションにより適したツールは他にもありますが、Figmaは他のデザインツールと比較してこれをうまく行っています。 Figmaチームには、デザイナー、開発者、プロジェクトマネージャー、さらにはクライアントなど、プロジェクトに関与するすべての人を含めることができます。

フィグマ

出典：Figma

Figmaは常にオンラインであるため、Googleドキュメントのような画面共有ツールのようなものです。 誰がドキュメントをリアルタイムで表示しているかを確認します。 カーソルにはラベルが付いているので、誰が変更を加えているかがわかります。 ツールバーのアバターをクリックして、チームメンバーの視点を確認することもできます。これにより、コミュニケーションを改善できます。 共有はDropboxと同様に機能し、編集または表示専用の権限を設定できます。

フィグマ

出典：Figma

Figmaの価格

Figmaは、2人の小さなチームがいて、一度に最大3つのプロジェクトに取り組む必要がある場合は無料です。 それ以上に、編集者1人あたり月額12ドルのProfessionalプラン、または編集者1人あたり月額45ドルのOrganizationプランが必要になります。

各プランには、無制限のファイルストレージと無料のビューアが付属しています。 2つの有料プランには、無制限の編集者とプロジェクトがあり、招待制のプロジェクトを作成することもできます。 組織計画には、無制限のチームの作成、リンクのアクセス制御、アクティビティログなど、大企業が役立つ機能があります。 プランの詳細については、こちらをご覧ください。

最終的な考え

クロスプラットフォームのアクセシビリティとコラボレーション機能により、Figmaは他の主要な設計ツールの勝者であり、強力な競争相手となっています。 ファイル共有を必要としないバージョン履歴とリアルタイム編集は特に役立ちます。 これがブラウザベースのツールであるという事実は、大企業にとってセキュリティ上の懸念を引き起こす可能性がありますが、組織計画には、これらの問題のいくつかに対処する機能があります。

全体として、Figmaは、期待どおりのツールを備えたフル機能のデザインツールであり、さらにいくつかの優れた機能も備えています。 ソロデザイナーが使用することもできますが、それは本当に意味があり、デザインチームにとって最も便利です。 また、同じプロジェクトの多くのバージョンを作成する設計チームや、ソフトウェアにお金をかけずにこれらのツールやコントロールに慣れたい新しい設計者にも最適です。

より多くの無料ツールを探索する準備はできましたか？ 無料のオープンソースPhotoshopの代替品であるGIMPに関する記事をご覧ください。

PureSolution /shutterstock.com経由の注目の画像