ブラウザで動くUIデザインツールfigmaを使ってみた【インストール不要】

つい先日Adobe xdの日本語版がリリースされましたね。

SketchやAdobe xdといったUIデザイン作成ツールは色々とありますが、今回はweb上で動いて、かつコメント機能もついたfigmaを使ってみました。

こちらのfigmaはブラウザ上でデザインの作成ができます。

さらになんとGoogleスプレッドシートのように共同で編集作業が行えるようです！（残念ながら今回は試せませんでした。ロンリー...）

使うにはまずこちらのサイトでサインインをして、メールアドレスを登録。

するとウェイティングリストに追加されたよーというメールが届きまして、正式にサービスログインできるようになるまで１週間ほどかかりました。(5月くらいの話です)

操作感としてはSketchに近いです。

上部にあるタブで、編集モードかコメントモードかの切り替えができます。XDと似てますね。タブで機能切り替えが流行り？

もちろん画像の書き出しもできます。

jpg、png、svgに対応しています。ありがたいことに@2x@3xなどretina用の一括書き出しにも対応しています。

また、クリッピングマスクやシェイプ結合、ドロップシャドウやブラーの効果などUI作成にあたって必要そうな機能は一通りそろっています。

さらにデザイン作成ツールだけでなく、コメント機能もついています。

この辺りはprottに近いかんじ。slackとの連携もできます。

いいところ

自動保存（ずぼらの味方）

共有が簡単。urlを送ればログインしなくても画面が確認できます。書き出し不要！

ショートカットも結構使える！なんとなくレイヤー上下したり、長方形ツールを出したりが、PhotoshopやSketchといった有名アプリと一緒です。

レイヤー効果もたくさん！乗算やオーバーレイ、スクリーンetc..かなりの数がそろっていました。

気になったとこ

やはりweb上のアプリケーションなのでちょっともたついたるするところが気になりました。マシンスペックや使うブラウザによって変わるとは思うのですが...。

あとはデザインを共同編集するというのが、自分にはあまりピンときませんでした。自分が作業してる画面で勝手にアートボードが増えたり、テキスト増えたりしたら気が散るのではないかと。

まとめ

とにかくこんな素敵なサービスが無料で、しかもweb上で動くなんてすごい！

 figmaは大規模な資金調達もし、Adobeの対抗馬になるのではといわれていますが、今後も楽しみです。

おまけ

404ページがかわいかった。