Designing the Perfect Side Menu in Figma - For Beginners
8586 次观看 · 2025-02-03
UI 设计
This video is the first episode of a new design course, great for beginners and experienced designers who want fresh ideas and concepts to learn each week. Full Course: https://designcode.io/design-multiple-apps-with-figma-and-ai
In this episode, we focus on designing an intuitive and visually appealing side menu. You’ll learn about different styles, choosing fonts, using icons effectively, improving visual hierarchy, mastering auto layout, creating reusable components, applying spacing and padding techniques, and more. This episode is full of practical tips to help you create a functional and user-friendly side menu!
My Figma File
➡https://www.figma.com/community/file/1465913942242091696/side-menu-design-community
What You'll Learn:
- Typography: Choosing the right fonts, sizes, and weights for readability.
- Icons: Where to find them, how to align them with text, and how they improve usability.
- Visual Structure & Layout: Using auto layout, spacing, and alignment to organize your design.
- Colors: Understanding the role of primary, secondary, and tertiary colors in your design hierarchy and ensuring good contrast.
- Reusable Components: Create customizable components with properties that can be adjusted and reused across multiple designs, ensuring consistency and efficiency.
- Design Tips: I’ll share some do’s and don’ts to help you create clean and professional-looking menus.
0:00 Introduction
0:46 Typography
2:19 Sans-Serif vs Serif Fonts
4:44 Visual Hierarchy
5:49 Line Height
6:46 Letter Spacing
7:30 Typography Do’s and Don’ts
8:45 Icons
16:47 Comparing Icons vs. No Icons
17:40 Creating Reusable Components
18:27 Adding Properties to Components
21:30 Hover and Selection States
22:00 Text Hierarchy with Colors
26:21 Spacing and Padding
33:44 Ignore Auto Layout
Follow me
➡https://www.instagram.com/sourasith.design/
➡https://twitter.com/titepommee
➡www.linkedin.com/in/sourasith-phomhome
➡https://www.tiktok.com/@sourasith.design
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios18
#figma #uidesign #figmadesign
In this episode, we focus on designing an intuitive and visually appealing side menu. You’ll learn about different styles, choosing fonts, using icons effectively, improving visual hierarchy, mastering auto layout, creating reusable components, applying spacing and padding techniques, and more. This episode is full of practical tips to help you create a functional and user-friendly side menu!
My Figma File
➡https://www.figma.com/community/file/1465913942242091696/side-menu-design-community
What You'll Learn:
- Typography: Choosing the right fonts, sizes, and weights for readability.
- Icons: Where to find them, how to align them with text, and how they improve usability.
- Visual Structure & Layout: Using auto layout, spacing, and alignment to organize your design.
- Colors: Understanding the role of primary, secondary, and tertiary colors in your design hierarchy and ensuring good contrast.
- Reusable Components: Create customizable components with properties that can be adjusted and reused across multiple designs, ensuring consistency and efficiency.
- Design Tips: I’ll share some do’s and don’ts to help you create clean and professional-looking menus.
0:00 Introduction
0:46 Typography
2:19 Sans-Serif vs Serif Fonts
4:44 Visual Hierarchy
5:49 Line Height
6:46 Letter Spacing
7:30 Typography Do’s and Don’ts
8:45 Icons
16:47 Comparing Icons vs. No Icons
17:40 Creating Reusable Components
18:27 Adding Properties to Components
21:30 Hover and Selection States
22:00 Text Hierarchy with Colors
26:21 Spacing and Padding
33:44 Ignore Auto Layout
Follow me
➡https://www.instagram.com/sourasith.design/
➡https://twitter.com/titepommee
➡www.linkedin.com/in/sourasith-phomhome
➡https://www.tiktok.com/@sourasith.design
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios18
#figma #uidesign #figmadesign