Create a Flat UI app design in light mode in Figma - for beginners

Learn the best practices for designing a great fitness app in Figma using flat design in light mode and how to organize your designs using visual hierarchy and information architecture. We'll also show you how to easily change colors between light and dark modes and use the latest typography variables to manage your designs more efficiently. Sponsored by https://mobbin.com

Resources and Community Links:
- My Figma File
➡ https://www.figma.com/community/file/...
- Explore Mobbin:
➡ https://mobbin.com/browse/ios/flows
- Discount of 20%
➡ https://mobbin.com/?referrer_workspac...

What You'll Learn:

- Flat Design and Light Mode: Learn to create a standout fitness app using flat design in light mode. This section covers using vibrant colors, clear typography, and a user-friendly interface to enhance your design's uniqueness.

- Visual Hierarchy and Information Architecture: Learn how to use visual hierarchy and information architecture to design intuitive and functional user interfaces, focusing on element arrangement, content organization, and navigation.

- Typography and Color Variables: you'll learn how to use typography and color variables in Figma to streamline your design workflow. You'll discover how to set up and apply these variables to ensure consistency across your designs and quickly switch between light and dark modes. This approach not only saves time but also enhances the flexibility and scalability of your design system, making it easier to manage and update your projects.

Follow me
➡  / sourasith.design  
➡  / titepommee  
➡  / 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!

00:00 Intro
01:03 Flat Design
01:46 Light Mode
04:49 Mobbin
07:02 ARC
17:10 Visual Hierarchy
17:50 Information Architecture
28:09 Variables in Design
30:45 Typography Variables
31:44 Updating Text Styles with Typography Variables
32:54 Number Variables
33:40 Line Height
35:20 Styles to Variables

🪄 Join this channel to watch the entire course on YouTube
➡    / @designcodeteam  

🚀 Follow this course on Design+Code's website
➡ https://designcode.io/mobbin-design

#figma #appdesign #uidesign