【Figma】何で必要?オートレイアウトの使い方、完全解説してみた。【チュートリアル付】

"Auto Layout" is familiar to Figma users. However, for beginners, it might seem like "What... is this function...?" So! I've taken a really long time to explain it! This video will help you understand Auto Layout while using Figma. If you watch it, I think you'll be able to cover all the general information you need! ❐ Tutorial Materials ------------------------------------------- Please use this. ※Copy and paste and try it in your Figma environment. ○ Subject 1 https://www.figma.com/file/DJPtHGWBDi... ○ Topic 2 https://www.figma.com/file/DJPtHGWBDi... ❐ Table of Contents ------------------------------------------- 00:00 Table of Contents and Video Description 02:18 Why Auto Layout? When to Use It? 07:02 What's it like to create a layout with code? 10:06 Implementation-conscious data, fast speed 11:39 Explaining how to use it 13:33 Let's try Auto Layout! 19:38 Let's try Auto Layout ② 26:06 Let's learn more! 26:56 Differences between Hug, Fill, and Fix 28:04 Let's design using Fill 32:17 Thank you for your hard work! ❐ UI and UX community "BONO" ------------------------------------------- I want to become a designer and further develop my design skills. Your growth rate will more than double if you ask professionals in the field and learn from their work. And it will increase even more if you grow together with like-minded members. Click here for more details! We look forward to your participation. https://www.bo-no.design/ ❐ About Kaikun 👋 ------------------------------------------- After working in web design and UI design, I now launch startups. Business School → Self-taught, mixi Design Department → PdM/Designer at NewsPicks, app renewal, etc. → Co-founded MOSH → Launched Cocoda!, SHE, canal, Spir, etc. #figma #autolayout

A Guide to Auto Layout: Best Practices, Tips & Tricks | Figma
▶︎

A Guide to Auto Layout: Best Practices, Tips & Tricks | Figma

【Figma初級#2】UIで大事な構造を学ぶ / オートレイアウトでListItemをデザインしよう! - Figmaの使い方チュートリアル
▶︎

【Figma初級#2】UIで大事な構造を学ぶ / オートレイアウトでListItemをデザインしよう! - Figmaの使い方チュートリアル

【完全解説】初心者のおすすめデザイン筋トレ「UIトレース」を紹介&実践します【良いものをマネしよう】
▶︎

【完全解説】初心者のおすすめデザイン筋トレ「UIトレース」を紹介&実践します【良いものをマネしよう】

【2025最新】初心者向け! Figmaの基本とAIなど便利な使い方を完全解説 / UIデザイン・Webデザインに最適なデザインツール
▶︎

【2025最新】初心者向け! Figmaの基本とAIなど便利な使い方を完全解説 / UIデザイン・Webデザインに最適なデザインツール

【Figma Make】でつくったWebアプリ・Webサイトを公開する3つの方法!
▶︎

【Figma Make】でつくったWebアプリ・Webサイトを公開する3つの方法!

Build a Design System - Full Course
▶︎

Build a Design System - Full Course

Instant Focus Mode – 40Hz Gamma Brainwave Music for Deep Focus & Productivity
▶︎

Instant Focus Mode – 40Hz Gamma Brainwave Music for Deep Focus & Productivity

Figma + developer workflows | design systems, Code Connect, MCP, and Make
▶︎

Figma + developer workflows | design systems, Code Connect, MCP, and Make

PINK & ORANGE GRADIENT IN HD [3 HOURS]
▶︎

PINK & ORANGE GRADIENT IN HD [3 HOURS]

Aesthetic Aura Background 3 hours
▶︎

Aesthetic Aura Background 3 hours

Figmaの操作速度が上がるたった1つの方法 ⌨️
▶︎

Figmaの操作速度が上がるたった1つの方法 ⌨️

【Figma初級#1】UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする
▶︎

【Figma初級#1】UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする

[Figma Mastery] How to Use Auto Layout | A 30-Minute Practical Course for Beginners
▶︎

[Figma Mastery] How to Use Auto Layout | A 30-Minute Practical Course for Beginners

Auto Layout for Beginners (crash course)
▶︎

Auto Layout for Beginners (crash course)

[20-Minute Masterclass] Figma Auto Layout Explained!
▶︎

[20-Minute Masterclass] Figma Auto Layout Explained!

Learn how to use Figma Auto Layout in 15 minutes (2023 Edition)
▶︎

Learn how to use Figma Auto Layout in 15 minutes (2023 Edition)

【超入門】Figma(フィグマ)って何?特徴や使い始め方を解説【Webデザイン初心者・コーダー必見】
▶︎

【超入門】Figma(フィグマ)って何?特徴や使い始め方を解説【Webデザイン初心者・コーダー必見】

[Figma Mastery] How to Use Components | A 30-Minute Practical Course for Beginners
▶︎

[Figma Mastery] How to Use Components | A 30-Minute Practical Course for Beginners

Free Figma UX Design UI Essentials Course
▶︎

Free Figma UX Design UI Essentials Course

[Web Design Introduction] What is Bootstrap? A thorough explanation of how to use it from a curre...
▶︎

[Web Design Introduction] What is Bootstrap? A thorough explanation of how to use it from a curre...