Figmaオートレイアウトの使い方を15分で学ぼう(2023年版)

時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れませんか？

クオリティの高いWebデザインスキルを軸に、フリーランスとして安定的に稼ぐためのスキルを学ぶ、オールインワンプログラムはこちらから。プロのデザイナーから直接フィードバックやを受けたりコーチングを受けながら、最短で実力派フリーランスWebデザイナーになることを目指します。

https://designup-academy.com/courses/

◽️◽️◽️◽️◽️◽️
Figmaオートレイアウトの使い方を15分で学ぼう(2023年版)

みなさんはFigmaのオートレイアウトを使っていますでしょうか？
プロのデザインを簡単に早く仕上げるには今、オートレイアウトが必須の機能になります。
今回の動画ではオートレイアウトとは？なぜオートレイアウトが必要なのか？どうやってオートレイアウトを使うのかの基礎を学べます。
この動画の中で、ボタンの作り方やレスポンシブに対応させたカードを作ります。
最短でオートレイアウトの基本を身につけたければ、ぜひ手を動かしながらこの動画を見てみてください。

◽️もくじ

00:00 - イントロダクション
00:26 - Figmaオートレイアウトとは何か？
01:20 - なぜFigmaのオートレイアウトが必要なのか？
03:05 - Figmaオートレイアウトのショートカット
04:22 - Figmaオートレイアウトの解除
04:51 - ボタンをオートレイアウトで作る：揃え（中央寄せ・右寄せ・左寄せ・上寄せ・下寄せ）
05:30 - ボタン：アイテムの方向（縦・横）
05:45 - ボタン：アイテム間の間隔
06:12 - パディング（上下・左右・個別）
07:03 - レスポンシブなカードをオートレイアウトで作る
08:05 - 詳細なレイアウト/キャンバススタッキング
09:03 - 詳細なレイアウト/間隔設定モード/間隔を空けて配置
09:41 - 詳細なレイアウト/テキストのベースライン揃え
10:19 - オートレイアウトをレスポンシブに対応させる
14:11 - 絶対位置にアイテムを配置
14:48 - 終わりに


◽️Figma素材
https://www.figma.com/community/file/...

◽️Webflowを無料で使ってみましょう
https://webflow.grsm.io/mayukosoga7488

◽️◽️◽️◽️◽️◽️


💻 フリーランスWebデザイナーになるためのロードマップを無料ダウンロード。
https://designup-academy.com/roadmap/

💻 Figmaのショートカット表を限定公開中。今すぐ無料ダウンロード↓
https://designup-academy.com/figma-sh...


◽️◽️◽️◽️◽️◽️

使用ツール一覧：
https://designup-academy.com/tools/

ニュースレター登録：
https://designup-academy.com/newsletter/

Instagram：
  / mayuko_design  

👉 About Mayuko | フリーランスデザイナー（Branding/Web/UI/UX）
時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れたい人たちをサポートしています✨
🇺🇸 NYで7年+のデザイナー歴
🌎 世界中のクライアントとフルリモートでお仕事中
🎓 Udemy受講生330名+


*いくつかのURLにはアフィリエイトリンクが入っています。有益な無料コンテンツを作成し続けるためにサポートをよろしくお願いします。


#Figma
#Figmaとは
#Figma日本語
#Figmawebデザイン
#Figma使い方
#AutoLayout
#オートレイアウト
#Figma初心者
#レスポンシブ
#ボタン