トマシープが学ぶ

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

Figma使ってみた

いつもデザイン修行する時も会社でもXD使ってるけど、Figmaも使ってみたい

Figma

WebでXDみたいにデザインできる。共有やコラボレーションが簡単なのが良さそう!

www.figma.com

実は昔卒論用の図を書くのに使ったり、誰かが配布しているプロジェクトを見たりはした。

f:id:bibinbaleo:20210324210536p:plain

懐かしい・・・

f:id:bibinbaleo:20210324210821p:plain

作成

新しいの作る。

f:id:bibinbaleo:20210324210527p:plain

xdでいうアートボードはフレームっていうんだ。

f:id:bibinbaleo:20210324215044p:plain

基本的な操作はXDと同じ感じ〜すぐできそう

数値は矢印で変えられるのいいね!Unityと同じ。XDはできない;;

f:id:bibinbaleo:20210324220840p:plain

ただ、矢印出すにはコツがいる

角丸

角丸できた(大事)

f:id:bibinbaleo:20210324220741p:plain

画像

画像はドラッグで入れれた。

お馴染みの効果もかけられる

f:id:bibinbaleo:20210324211617p:plain

ダブルクリックしたら切り取りとか、薄さ変えたりとかもできた

f:id:bibinbaleo:20210329204446p:plain

エフェクト

ドロップシャドウとかぼかしもできる

f:id:bibinbaleo:20210324211620p:plain

Inner shadow

f:id:bibinbaleo:20210324212036p:plain

複数つけられるから、ニューモフィズムっぽいのが簡単にできる

f:id:bibinbaleo:20210324220025p:plain

楽しい

f:id:bibinbaleo:20210324215957p:plain

 

Background blurは透明度が低くないとかからない。

f:id:bibinbaleo:20210324212727p:plain

色・塗りつぶし

色はデフォルトで塗りつぶしのみ、線がつかないのいい!

謎だったのは一つのオブジェクトに二つの色が含まれていたこと

f:id:bibinbaleo:20210324211320p:plain

塗りつぶし方法は色々あった!線

f:id:bibinbaleo:20210324220552p:plain

f:id:bibinbaleo:20210324220556p:plain

ぐるん

f:id:bibinbaleo:20210324220600p:plain

ダイアモンド!

f:id:bibinbaleo:20210324220603p:plain

模様!!

f:id:bibinbaleo:20210324220606p:plain

ここら辺はXDより強い!すご

文字

サイズを変えるには、フォントサイズを変えるしかない。

f:id:bibinbaleo:20210324213053p:plain

XDは枠を大きくしたらそれに追従したけど、そういう設定もできるのかな?

f:id:bibinbaleo:20210324213050p:plain

フォント

フォントは色々入ってるけど、プレビューできないからどんなフォントかわからない!

f:id:bibinbaleo:20210324213601p:plain

これはXDと一緒か・・・辛いんだよな〜

このプラグイン入れたら見れる!

www.figma.com

f:id:bibinbaleo:20210329204536p:plain

日本語フォントはNoto

f:id:bibinbaleo:20210324213557p:plain

f:id:bibinbaleo:20210324214144p:plain

qiita.com

おおー

 入れた

プラグインはここから使う

f:id:bibinbaleo:20210324214619p:plain

ヒラギノ、M+、さわらび、Notoぐらいしかないんだね・・・

f:id:bibinbaleo:20210324214616p:plain

Youtubeのサムネつくるには少し辛いかも?

書き出し

右下のExportから書き出し

f:id:bibinbaleo:20210324215245p:plain

4種類ある

f:id:bibinbaleo:20210324215242p:plain

プラグイン

【2020年版】デザインツールFigmaの年間ベスト・プラグイン42個まとめ - PhotoshopVIP

最後に

XDをイラレ代わりにめちゃくちゃ使ってたけど、フォント以外は代わりになりそう〜

これから使っていこ!ここまで似たような感じだとツールはあまり問題ではなさそうだけど

 

 最近この二つ買ったので、これをもとにデザイン修行再開したい

イメージをパッと形に変えるデザイン大全

イメージをパッと形に変えるデザイン大全

  • 作者:尾沢 早飛
  • 発売日: 2021/01/22
  • メディア: Kindle版