UIデザインツールとして、Adobe XD、Sketch、Figmaが人気ですが、
その中でFigmaは使ったことがなかったのですが、先日、AWSのAmplifyでローコードWEBアプリ開発ができるAmplify Studioというサービスが発表され、そのサービスがFigmaと連携するというので、少しだけ使ってみてわかったことを書いてみました。（Adobe XD、Sketchとの比較記事ではありません。Adobe XD、Sketchにも同様の機能があったりします。）

Figmaとは

・Figmaはブラウザ上で動くUIデザインツールで学習するだけなら無料で使えます。
（後述しますがデスクトップアプリとしても動かせます。）
・ブラウザ上で動くのでOSや端末に依存しないかと思われます。
・ブラウザ上で動くのに軽快に動作し、作業時にストレスがありません。
・ 設計思想がUIデザインに特化されているため、IllustratorやPhotoshopのような紙も扱うアプリケーションより、UIデザインを行う上で作業効率を高めるための機能が備わっています。

コンポーネントとインスタンス

いきなりコンポーネントとインスタンスと言うと解りにくいと思いますが、コンポーネントとは各所でよく使う要素を部品化して各所で使うための機能です。
例えば、見出しやボタン、ヘッダーやフッターなどでしょうか？
コーディングをされている方には、部品をインクルードして読み込むみたいな説明でしょうか？
フロントエンドエンジニアの方にはずばりコンポーネントですね。
元となるコンポーネントをメインコンポーネント、コピーされたコンポーネントをインスタンスと呼びます。
メインコンポーネントを編集しますと、コピーされたコンポーネント（インスタンス）も同様に変更されます。
インスタンス化されたものでも文章などは変更可能なので、見出しの文字サイズは全ページ共通にしたい場合など、全ページに修正を入れなくてもよくなります。
またインスタンスを解除することも可能なので、新たなメインコンポーネントを作成することも可能です。

オートレイアウト

レスポンシブデザインを作る上でPC、スマホ、タブレットなどのカンプを用意しなければならない場合、Illustratorであれば画面サイズによって部品をサイズ変更したり、配置を変えたりしなければなりませんが、部品をオートレイアウト化しておくことで画面サイズにデザインが追従します。
例えばボックスのサイズによって改行位置や写真のサイズが変わるなどです。
以下のtweetがわかりやすいです。

Auto Layout の レスポンシブ対応、画面右上のボタンでよしなにできるっぽい#figma pic.twitter.com/Q4I1XjI2HT

— ふじけん / Cookpad Inc. (@kenshir0f) February 6, 2020

ローカルフォントの使用

アカウント->セッティング->fontの項目からFigmaAgentをインストールすると使用できました。

日本語メニュー

公式ではありませんがchromeのプラグインで日本語化されている方がいました。ありがとうございます。
私だけかもしれませんが、キーボードショートカットキーを表示しようとしたらブラウザが落ちました。まだ少しバグがあるようです。
Figma 日本語化

デスクトップアプリ

アカウント->get desktop appでダウンロードできます。

データのエキスポート項目

PDFがあればIllustratorで開けますね。

ベクター画像の読み込み

イラストレーターからSVG形式でコピーペーストできました。
作り込んだベクター要素はIllustratorで保存しておいて画像として配置して使うみたいな使い方でしょうか。Indesignみたいな使い方をすればOKかと思います。

プラグイン

数が多くまだまだ調べきれていませんが、unsplashというライセンスがゆるい画像サイトから画像をインポートできます。
しかも画像のクオリティが素晴らしいです。理解できません。
使う際はライセンスをご確認ください。

画像補正

画像補正は求めていませんでしたが、ブラウザ上でここまでやるのかと驚愕しました。

まとめ

まだまだFigmaの奥深い世界を理解できていないので、詳しい解説はできませんが、UIデザインツールはワイヤーフレームを作るために部品を手動で配置していくといった使い方だけではなく、UIデザインを行う上での効率化や必要性を考慮し設計されているツールということがわかりました。その思想や理念はITの進化と共に必要性が高まっていくでしょう。
また前述したAmplifyとの連携ですが、まだ学習していないのでわかりませんが
今まではデザインとシステムは画像として書き出し、読み込みなど完全に分離しているものでしたが、コンポーネントという概念で連携するというのはとても夢があると思いました。

IllustratorやPhotoshopの固定概念を捨てて取り組まないと置いていかれてしまうなと思いました。

阿部