Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう!
Figmaの一番の見どころであるオートレイアウト機能。まだ使っていない方は損ですよ!手戻りを防げて余白もきれいに沿ってより、統一されたデザインが仕上がります。0から未経験の方向けに丁寧にお伝えしています。
4.55 (14 reviews)
135
students
1 hour
content
Mar 2022
last update
FREE
regular price
What you will learn
オートレイアウトを0から行う方法
オートレイアウトでレスポンシブデザインを作る方法
オートレイアウトで一気に余白を調整する方法
オートレイアウトを使って一緒にレスポンシブなコンポーネントを作成
Description
Figmaのオートレイアウト機能を基本から学べます。
オートレイアウト(Auto Layout)では、コンテンツに合わせて変化するフレームを作成できる機能です。
オートレイアウトを使えば格段にデザインスピードが上がります。
例えば、レスポンシブコンポーネントを使えばテキストの変更に合わせて自動的にサイズが変化するボタンやカードなどを作成できます。素早く順番を入れ替えられるメニューやリストを作成だって可能です。
今回はAuto Layoutを使って、より柔軟なデザインを作成する方法をご紹介します。
一緒にオートレイアウトの組み方を操作しながら学んでいくので分かりやすい講座になっています。
※本講座ではFigmaの基本操作やダウンロード方法は学びません。完全に「オートレイアウト」の機能に限定しています!
Screenshots




Content
イントロダクション
ヤスダ先生の自己紹介
本講座で学べる事
オートレイアウトの基本を理解しよう
オートレイアウトとは?
レスポンシブボタンを作成してみよう
オートレイアウトの余白を変える方法
オートレイアウトの細かい操作について
連なる要素のパディングを一括で変更する方法
余白を個別に変更する
オートレイアウトリストを作成してみよう
オートレイアウトのResizing機能について
Resizing機能の基本
Resingを活用したレスポンシブコンポーネントを作成してみよう
Spacebetweenを活用しよう
オートレイアウトの最終課題
一緒にオートレイアウトの組み合わせコンポーネントを作ってみよう
フッターを固定させて縦方向のレイアウト組み合わせを練習しよう
Reviews
柳澤
June 19, 2022
短時間でオートレイアウトが理解できました。ありがとうございます。
XDのスタック機能よりもFigmaのオートレイアウトは使いやすいと思いました。
スクロールアニメーションやパララックスをXDでできるみたいなので、Figmaの講座があればやってみたいと思いました。
Related Topics
4553314
udemy ID
2/16/2022
course created date
3/17/2022
course indexed date
Bot
course submited by