Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう!

Figmaの一番の見どころであるオートレイアウト機能。まだ使っていない方は損ですよ!手戻りを防げて余白もきれいに沿ってより、統一されたデザインが仕上がります。0から未経験の方向けに丁寧にお伝えしています。

4.55 (14 reviews)
Udemy
platform
日本語
language
Design Tools
category
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

Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Screenshot_01Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Screenshot_02Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Screenshot_03Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Screenshot_04

Content

イントロダクション

ヤスダ先生の自己紹介
本講座で学べる事

オートレイアウトの基本を理解しよう

オートレイアウトとは?
レスポンシブボタンを作成してみよう
オートレイアウトの余白を変える方法

オートレイアウトの細かい操作について

連なる要素のパディングを一括で変更する方法
余白を個別に変更する
オートレイアウトリストを作成してみよう

オートレイアウトのResizing機能について

Resizing機能の基本
Resingを活用したレスポンシブコンポーネントを作成してみよう
Spacebetweenを活用しよう

オートレイアウトの最終課題

一緒にオートレイアウトの組み合わせコンポーネントを作ってみよう
フッターを固定させて縦方向のレイアウト組み合わせを練習しよう

Reviews

柳澤
June 19, 2022
短時間でオートレイアウトが理解できました。ありがとうございます。 XDのスタック機能よりもFigmaのオートレイアウトは使いやすいと思いました。 スクロールアニメーションやパララックスをXDでできるみたいなので、Figmaの講座があればやってみたいと思いました。

Charts

Price

Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Price chart

Rating

Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Ratings chart

Enrollment distribution

Figmaのオートレイアウトを基礎から完全に理解してレスポンシブなデザインを作ろう! - Distribution chart
4553314
udemy ID
2/16/2022
course created date
3/17/2022
course indexed date
Bot
course submited by