UIデザインツール「Figma」を触ってみた

こんにちは!デザイナーのたかはしです。

UIデザイナーのみなさんは何のデザインツールをお使いでしょうか?

以前はPhotoshopIllustratorを使っている人が多かったかと思いますが、
今ではSketchやAdobe XDなどたくさんの選択肢があると思います。
で、結局何がいいの?という論争はこれからさらに過熱していきそうですね!

welksでは素材の加工やイラストの作成も多いので、
PhotoshopIllustratorを多く使用していますが、
UIデザインならプロトタイピングもできるツールを使うなど
用途に応じて使い分けできるといいなーと思っています。

今回は以前から気になっていたFigmaというツールを少し触ってみたので、
その感想をお伝えできればと思います。

特徴

こちらの1番の特徴はwebブラウザ上で使うことができることだと思います。
デスクトップアプリもありますが、いつでもどこでも使えるというのはいいですね!
Sketchはmac専用のツールですが、Figmawindowsでも使えるのでデザイナーだけじゃなくディレクター、マーケターの人にもオススメです。

またリアルタイムで共同作業できるというのが大きな特徴だと思います。
(試しに個人的に触ってみただけなので、実際どんな動きができるかはまだ分かりません…!)

価格

最大3つのプロジェクトまでは無料で使えます。
有料だと$12/月なので、年間で換算するとSketchやAdobe XDよりややお高いですかね。
サービスの規模によりそうですが、小さいプロジェクトなどさくっと使う分には無料でよさそうです。

はじめる前に

デフォルトでGoogle fontsが使用できますが、日本語フォントに対応していません。
日本語フォントを使いたい場合は、ローカルのフォントをインストールすると使えるようになります。
手順は以下の通りです。
左端のハンバーガーメニュー > Account Settings > Download installer to enble local fonts.を押下 > インストーラーを起動 > インストール

プロトタイピング機能

Figma内でプロトタイプが作れます。 f:id:mutsumi-takahashi:20180528132448j:plain
1. 右側の「PROTOTYPE」タブを選択
2. 細かな機能ではないですがインタラクションをつけられます。
3. プレビューですぐ確認もできます。

コンポーネント

Sketchでいうとシンボルですね。 コンポーネントにしたものをページのレイヤー内で変更ができるが使いやすそうと思いました。 f:id:mutsumi-takahashi:20180528133050j:plain

コメント機能

コメントがいれられるのでフィードバックが楽にできそうです。 f:id:mutsumi-takahashi:20180528133103j:plain

コード

プルダウンでCSSiOSAndroidのコードが出力されます。
f:id:mutsumi-takahashi:20180528133120j:plain
iOSAndroidも出力できるんですね!!
ただ、こちらが実際使えそうかは…???🤔

感想

私が一番嬉しいと思ったのは、
画面の拡大・縮小がPhotoshopと同じショートカットキーだったこと!

  • Command + スペースバー(ズームインツールに切り替え)
  • Option + Command + スペースバー(ズームアウトツールに切り替え)

異常に拡大・縮小を繰り返す私としては、一番使い慣れているPhotoshopと同じはとっても嬉しい!!

※ Sketchのショートカットキーの

  • Z / Z+Option

も使えますね!

新しいツールはワクワクしますね!
まだ触ったことのないツールもたくさんあるので、いろいろ試してみたいと思います。
ただ仕事として使う場合、チームとしての方針だったりプロジェクトの内容だったり、 考えなくてはいけないことがあるので必要なものを選んでいくという選択が大事になっていきそうですね。