トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

FigmaとAdobe XD【UIデザイン】

UIデザインツールにAdobe XDというものがあることを最近知りました。

またFigmoという無料のUiツールもあるそうです。

sketchしか知らなかったので調べてみます。 

bibinbaleo.hatenablog.com

XD

www.adobe.com

プロトタイプが簡単に作れるらしい。スマホでタッチなどのインタラクティブなことが自動で同期されてできる。

去年の10月にベータ版が終わり有料になった

www.webcreatorbox.com

Figma

ブラウザで使える。無料でも使える。

www.figma.com

こちらの説明が詳しかったです。qiita.com

 

初期画面はこんな感じ。

f:id:bibinbaleo:20180205184919p:plain

左上のregion Toolsを押すと

f:id:bibinbaleo:20180205184901p:plain

右側のDesignに画面の大きさ一覧が出る。

f:id:bibinbaleo:20180205184927p:plain

あとは簡単にデザインできる。初見でもわかりやすい。英語だけど

f:id:bibinbaleo:20180205184855p:plain

もう一つ画面を追加して、Prototypeタブでページ遷移を設定できる。

f:id:bibinbaleo:20180205184904p:plain

設定したものは右上のPresentでクリック確認できる。

f:id:bibinbaleo:20180205184900p:plain

 

そしてこちらもXDと同様スマホと同期できる。

play.google.com

アプリを入れてログインして、パソコンで画面を選択したらすぐに反映される!

やばい!楽しい!

f:id:bibinbaleo:20180205185410p:plain

エクスポートはレイヤーごとに設定を行える。

f:id:bibinbaleo:20180205185834p:plain

設定したら右上のマークから一括でエクスポートもできる?

f:id:bibinbaleo:20180205185836p:plain

書き出したのがこれ。

f:id:bibinbaleo:20180205185838p:plain

CODEタブを押すとそのUIのコードが観れる。

f:id:bibinbaleo:20180205190905p:plain

f:id:bibinbaleo:20180205190910p:plain

ここら辺はよくわからないや・・・

そのほかにも複数人でGoogleSlideみたいに同時に作業できるのが強みらしい。

 

ここまで無料でできたのですごい!Sketchも無料期間終えてしまったし、XDも有料なのでこれはとても良い!

最後に

デザインとプログラミングどっちもかじっているのが私の強みなのに、最近全くデザインしてないよ!