Figmaというデザインツールがすごい

とあるQiitaの記事で知った、新しいデザインツール「Figma」。正直、デファクトスタンダードなツール以外だと、ファイル形式の問題で扱いづらくなるので、あまり独自仕様のデザインツールが量産されることは嬉しくないのだが、そう…例えば、そのツールで作られたデータを誰でも閲覧できる、ということであればどうだろう。ウェブからアカウントさえ取れば（機能に限りがあるとはいえ）基本的な作業ができる、レイヤー確認ができる、書き出しができる、ということであれば…。それがウェブブラウザからでも使えるとなれば…。そんなツールが出てきました。それがFigma。端的に言うのであれば例えば「SketchとZeplinとが一つになった」感じです。Zeplinで編集できちゃう感じ。いや、XD成分もあるな。何でもありかよ。デザインデータ？ そんなもんクラウドにあれば充分でしょう。

Figma: the collaborative interface design tool. https://www.figma.com/

Sketch はもういらない？ デザインツール Figma の紹介 - Qiita https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d

ざっくり使ってみた感じの様子を動画に取りました。レビューというほどまとめてないけど、何に感動したかはなんとなくわかるかな、と。

https://www.facebook.com/kkotaro0111/videos/1597063897046679/

まず驚いたのが複数人で同時にデザインできる点。イメージとしては、Google Documentのデザイン版、といったところか。上記動画でも左はブラウザでログイン、右はネイティブアプリでログインして同時に使っている。同じユーザーだからできる、というわけではない。

このブラウザで使えるというのも相当なメリットだ。たまにない？ Photoshopが入ってるマシンが手元にないときに、なにかしら編集を行わなきゃいけないってこと。大きな企業とかだとセキュリティ（笑）の関係で自前PCではなく会社のPCじゃなきゃいけなくて、たいてい据え置き機で、デザイナーなのになぜか打ち合わせに連れて行かれて、そこでちょっと弄くりたいけどなんだこの黒い板は！ ワードとエクセル以外なにも入ってないじゃないか！ なんで持ってきた！？ なんで持たせた！？ ってなること。まともな会社に勤めてるみんなには、そんな変な出来事はおきないか。

基本的なショートカットキーは、Sketchに似ている。矩形を描くならRキーだ。直線はLキーだし、円はOキーなのだ。フレームはFキー（SketchではアートボードなのでAキー）と、まったく異なる部分もあるが、だいたい使える。ちなみに、俺の中で一番嬉しかったのが「Vキーが選択ツール」である点。Adobe系ツール使ってるとそれが普通で、VimでいうところのEscキーのようにとりあえず押す癖がついてしまっているので、それがパスツールに割り当てられてるSketchではよくトラブるんすよ。

最近のウェブデザイン、アプリデザインを考えると、オブジェクトのレスポンシブ対応設定ができるのも良い。上記動画の2:30あたりから試している機能だが、親要素（グループ）のサイズが変わったときに、その子要素がどう追従するか（親要素の幅にフィットさせるのか、サイズそのままに中央位置に固定されるのか等）を設定できる。Sketchにもある機能だが、デザイン案のパターンを作るときに結構重宝する機能でもある。

動画になっていない点で言えば、ブラウザ上でもファイルのD&Dで画像をインポートできたり、右クリックからSVGコードとしてコピーもできたりする。CSSにするときの値を確認することもできるし、XDのように導線設定からのプレビューもできる。

しかも、右上のユーザーアイコンを選ぶとそのユーザーが見ている画面をそのまま確認できる機能もあるようだ。なんというか、共同デザインツールというよりクライアントとのミーティングの際に、デザインベースの話がしやすくなるためのディレクター向けツールとしての有用性も大きい気がする。これならリモートワークデザイナーがちゃんと仕事してるか監視する目的でも使えそうだ（待ってヤメてもっとデザイナー信用して！）

費用は、3プロジェクト、履歴保存30日まで、という制限なら無料で使用できる。$12/人月払えば、これらが無制限になる他、チームコンポーネントやSlack連携など、追加の機能も利用できるようだが、多くの人にはそこまで必要はない気がする。履歴が30日も残ってるなんてありがたいことだ。Photoshopなんて閉じたら終わりだぜ！ というか、プロジェクトってどういう単位なんだろう。

Figma: the collaborative interface design tool. https://www.figma.com/pricing

デメリットがあるとすれば、今のところ、ファイルの読み込みが遅い、という点くらいだろうか。デザインデータがクラウドにある関係で、ファイル1つ開くのに、結構な時間がかかる。どれくらいかかるのかというと、貧弱なマシンでPhotoshop立ち上げて、重いpsdファイルを開く時間より少し短いくらいだ。…おや？ だいぶ早くね？

欲しい機能としては、Sketchの"Select group's content on click"にあたる機能だ。管理の都合上グループ化するが、クリックした時に同じグループのオブジェクトをまとめて選択したくない、というときに使える機能なのだが、パッと見、見つけることができなかった。あと、ExportとしてSketchファイルまたはAdobe系ファイルとして書き出すというのもあって欲しいかもしれない。良さそうなツールとは言え、何事も「いつか無くなる」可能性を考えておくべきだろう。他のツールへのエクスポートができれば、安心して採用できる気がする。

所感程度で特にまとまりのないエントリになってしまったが、ひとまずちょっとこれ使って仕事してみたいと感じるツールである。何か気づいたことがあれば、またエントリを書いてみようと思う。思う。…思う。

ちょっと適当に配置してみた。とくに作業時点での違和感はない。
https://www.figma.com/file/ZEKl0FUUjUW7kHezvRPs07HY/Untitled