Figmaに入門してみた
簡易的なバナーの作成からYouTubeのUI作成、プロトタイプ機能の使い方まで、Figmaについて一通り学びました。
さすがに1回じゃ覚えきれないので、アウトプットしながら徐々に使いこなせるようになろうと思います。
バナーをつくろう
Figmaでバナーを作ってみました。
感想
XDを使ったことはあったので割と迷うところはなかった気がします。これくらいはササっと作れるレベルには持っていきたいな。
学び
Figmaの基礎の「キ」
素材の横幅等は必ず揃える
同じコンポーネントならグループ化してわかりやすく
バナー作成で新たに学んだコマンド
・グループ化：command + G
・グループ化解除：command + shift + G
・余白確認：画像選択 + option
・素材を1pxずつ調整：画像選択 + 矢印
・素材を10pxずつ調整：画像選択 + 矢印 + shift
YouTubeUIをつくろう
YouTubeのUIを作ってみました。
感想
基本的に動画の通りやれば問題ないですね！使うコマンドとかは特に特殊なものは出てきたりはしないので、基礎的な部分の理解には最適かと思いました。
コンポーネント機能やカラーパレット機能についてはエンジニアと一緒ですね。
この辺りのコツ？については割と役に立つことが多い気がするんでエンジニアやっておいてよかった。
学び
ヘッダーのサイズ（スマホの縦幅）はほぼ88px（コンポーネント）
Auto Layout機能で素材を均等に調整できる
maskを使って素材を任意の形に切り抜くことができる
まず外枠を作成して、その中に要素を追加していく
フォントサイズや余白は4もしくは8の倍数が多い
YouTubeUI作成で新たに学んだコマンド
素材の複製：option + クリック
コンポーネント化：command + option + K
使った機能
プロトタイプ機能：ホバーや画面遷移
オートレイアウト機能：繰り返し処理
コンポーネント機能：UIを部品として扱う
アニメーション機能：本物のアプリのようなアニメーション
カラーパレット機能：よく使う色をまとめる
プロトタイプ機能を使いこなす
プロトタイプ機能とは、作成したUIをWeb/アプリのように動かせる機能のことです。
ユーザー目線で自分のUIをチェックできるので、必ず使えるようになるべき。機能は知っているのに使っていないデザイナーが多いらしいです。
例えば、長ーいスマホデータを渡されてもサイズ感がわからないので、プロトタイプ機能を使ってリアル感を伝えることができます。
また、ユーザーさんが見るイメージでデザインをチェックできるし、エンジニア側としても作る際のイメージができるので嬉しいですね。
GroupとFrameの違い
現時点でここまで理解する必要はないかもしれませんが、一応まとめ。
Group
・オブジェクトの集まりをまとめた
・枠ではなく”集合”を形成
Flame
・名の通り”枠”を形成
・範囲内に対してXXXする
GroupとFrameでできること
Flameの大きさで表示を切り取る
ページスクロールの設定
Fillの考え方が違う
グリッド表示
まとめ
ひとまずFigma入門終了しました。
今覚えるべきでないと思った機能はスキップしてるので、実際に何か作る際に見返そうと思います。
プログラミングの勉強と同じですが、ひたすらアウトプットしてわからない時にググって解決するやり方が一番身につきますね。
とりあえず、Figamaの使い方の基礎の基礎はわかったので、自分で何か作りつつ、次はUIの勉強も進めていきます。