Figmaはいいぞ
（2018/12/13 追記）Figma Advent Calendar 2018に滑り込んだ。
前職で使ってからその味を忘れられず常日頃「Figmaはいいぞ」と言ってるのですが、何がいいかイマイチわかりにくいと思うのでまとめます。
みんなこの記事読んでFigma使いましょう。（このタイトル画像もFigmaでつくっています。）
ブラウザで動く
Figmaはブラウザで動作します。最高です。
そのためOSの縛りがありません。（デスクトップアプリもあります。）
ブラウザさえあればよいのでLinuxでもiPadでも問題なく作業できます。
機能
機能はSketchとほとんど同じです。なので特に迷うことはないはずです。
すべてオンライン
すべてのデザインデータはオンライン上にあり、全員がどこからでもアクセスすることができます。
編集は自動で保存され、デザインデータは常に最新に保たれます。
そのため、参照するファイルのバージョンが古く事故を起こしてしまうなんてこともありませんし、一部のデザインが違うデザインが大量にできてしまうなんてこともありません。
フォント
ブラウザで動作すると聞くと「使えるフォント少ないんじゃない？」と思うかもしれませんが、Google Fontsと連携できるし拡張機能を入れればローカルフォントも使えるようになるので心配いりません。
共有
デザインデータのリンクを共有するだけで、他の人にデザインを見せることができます。
もちろんアートボードを指定してシェアすることもできます。
誰にでも簡単に共有できるため、普段デザインツールを触らない人や外部メンバーにも簡単に共有できます。
簡単に共有できるということは、デザインへのアクセスがしやすくなるということで、これによりコミュニケーションが促進され、デザイナー以外の意見をデザインに反映しやすくなります。
ステークホルダーにデザインを早い段階で共有し意思決定のスピードを早めることもできます。
さらにデータは常に最新に保たれるので、デザインのバージョンや変更についていちいち共有する必要がなくなります。
zeplinと連携させるとより柔軟にデザインを共有できるようになります。
デザインを複数人で同時に編集できる
オンラインであることを最大限活かした機能ですね。
みんなでコミュニケーションを取りながらデザインをすることができますし、モブプログラミングならぬモブデザインができたりします。
もし誰かが余計な変更をしても履歴が残っているのですぐ元に戻せます。
この共同編集機能、デザイン以外にもブレインストーミングや会議の議事録などにも使うことができ、とても便利です。
さらにFigmaには、そのデータにアクセスしてる人の視点をシェアすることができる機能もついています。（これなに言ってるかわかんないですよね。）
コメント
アカウントを作ってログインすれば閲覧しているデザインにコメントを残すことができます。
デザインに直接コメントを書き込めるのでとてもわかりやすいですし、そのコメントのスレッドで会話をすることもできます。
事前にデザインを共有しコメントを書いてもらって、そのコメントをもとにレビュー会を実施することもできます。
webhookを使えばこのコメントをSlackに通知させることもできます。
プロトタイピングツールとして使える
Figmaにはプロトタイピング機能がついているので、下記の行程をすべてFigmaのみで行うことができます。
- ワイヤーフレーム・モック作成
- プロトタイピング
- デザイン
- デザインレビュー
UI設計からグラフィカルなデザインにシームレスに移行できるので、デザインフローが効率化されますし、ツールの使い方を都度覚える必要もなくなります。
バージョン管理機能がある
Figmaは自動で履歴を管理してくれます。
もしも良くない変更をしてしまっても、即座に正しかった状態に戻すことができます。
ブランチという概念はなく、常にmasterにコミットされていくイメージです。
コンポーネント管理ができる
Figmaではコンポーネントを作ることができ、それをプロジェクトの中で使い回すことができます。
有料プランにするとさらにTeam Libraryの機能が使えるようになります。
上記のコンポーネントは同じプロジェクト内でしか使えませんが、Team Libraryで定義したデザインは同じチームのどのプロジェクトでも使用することができます。
この機能を使うことでデザインシステムやコンポーネントカタログを効率的に作ることができるようになります。
とくにAtomic Designなどのコンポーネント指向な設計を取り入れている場合役立つでしょう。
編集権限を設定できる
Figmaではユーザーの権限を設定できます。
また、招待したメンバーしか閲覧できないようにもできます。
Figma Mirror App
モバイルでプレビューできるアプリがあるので、デザインやプロトタイプを実機で確認する流れをシームレスに行うことができます。
PDF書き出しができる
最近のアップデートでPDFエクスポートが追加されました。
はっきり言って神アプデですね。
これで紙媒体のデザインにも少し対応できるようになりました。最高です。
Sketchのデータをインポートできる
既存のSketchファイルをインポートできるので、移行もらくらくです。
動画コンテンツが充実している
YouTubeチャンネルがあり基本的な機能の解説動画がアップロードされています。
言語は英語ですが、英語がわからなくても動きを追えば理解できると思います。
もし難しいようならYouTubeの自動翻訳機能を使用すると良いでしょう。
Figmaができないこと
タイポグラフィ
Figmaは細かいタイポグラフィの操作が苦手です。（ある程度はできますがPhotoshopなどに比べると機能は少ないです。）
縦書きにも対応していないので、もし縦書きのデザインを作りたい場合は工夫が必要です。
アニメーション
FigmaにはAdobe XDのようなアニメーションを作る機能はありません。
アニメーションやインタラクションを作成・管理するには別のツールを使うのが良いでしょう。
ビットマップの加工
写真のトリミングなどはサポートされていません。
そもそもFigmaのスコープには入っていないので、Photoshopなど別のツールで行うと良いでしょう。
さいごに
Figmaは万能ツールではないので欠点もいくつか存在しますし、適していない場面（受託制作のデザインなど）もあります。
しかし、僕は現時点で最良のアプリケーションデザインツールだと考えています。
Figmaの良いところはチーム開発の効率化に主眼をおいていることとコミュニケーションを促進させる仕掛けがたくさんあることだと個人的には思っています。
Figmaはデザインツールでありコミュニケーションツールでもあるのです。
ぜひみなさん使ってみてください。
追記
2018 Design Tools Survey Resultsの Most Exciting Tools in 2019 でFigmaがNo.1でしたね。これからどんどん盛り上がりそうです。
