この記事には広告・PRを含みます。
Figmaのオートレイアウトを学んで感じたこと
今回は、Figmaの学習に関して私が思ったことをお伝えできればと思います。
Figmaには、オートレイアウト機能というものがあります。レスポンシブ設計にするには大切な機能ですよね。
でも、Webデザインを中心に学んできた段階だと、FigmaのオートレイアウトとCSSのフレックスボックスを、近い考え方としてつなげて見る機会は少ないかもしれません。
コンテナという考え方が大切になる
最近は、このコンテナという概念が、Web制作の分野でもエンジニアの領域でも時々出てくる考え方かもしれません。
私はこのコンテナを理解するのに、YouTubeチャンネルのヒロコードさんの「HTML/CSS最強レイアウト！」という動画がとても分かりやすくて勉強になりました。
こういうことをよく理解していくと、Figmaとコーディングがいかに切っても切れない関係になっているかが分かりました。
ワイヤーフレームは導線も考える必要がある
また、ワイヤーフレームを作る時にも、ボタンをどこに配置するのが適切かとか、そのボタンにはどんな文言を書くと良いかといったことを考えると思います。
そのボタンを押したらどこに遷移するのか。単純にデザインだけでなく、サイト全体の動きも把握するのって大変ですよね。
私は、ある意味でエンジニア目線で考えて、導線を自分の中でイメージしないといけないので、Webデザインの仕事も結構難しいなと感じました。
Figmaは楽しいけれど、奥が深い
でも、Figmaはソースコードを眺める時よりも楽しくて、個人的には好きです。
これからもっともっとFigmaはできることが増えていくような気がするので、キャッチアップを怠らないようにしたいです。
コーダーとして働いていても、Figmaの理解が深まると、デザインを見る目やコーディングの考え方にも良い影響があると感じています。
関連記事
Figma学習をもう少し進めたい方へ
Figmaは、操作方法だけでなく、HTML/CSSや導線設計とつなげて考えると理解しやすくなると思います。