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 mobbin.com
Resources and Community Links:
- My Figma File
➡ www.figma.com/community/file/...
- Explore Mobbin:
➡ mobbin.com/browse/ios/flows
- Discount of 20%
➡ 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 RUclips
➡ / @designcodeteam
🚀 Follow this course on Design+Code's website
➡ designcode.io/mobbin-design
#figma #appdesign #uidesign

[@sebastiant6212]

best figma tutorials on youtube 100%

[@ShampooAki]

Awesome! Thanks for sharing.

[@DesignCodeTeam]

Thanks for watching!

[@MACH_SDQ]

Goooood

[@jonathanromero3034]

me encanta muchas gracias por este tutorial les quedo perfecto

[@jgvlc]

Great work! The content is incredibly useful. Thank you very much for sharing the figma file!

[@DesignCodeTeam]

Glad it was helpful!

[@AkinsRealm]

Great tutorial, going to watch the whole thing! By the way, just of curiosity, I noticed a change in Sourany’s accent, it’s much closer to American accent now, any AI help on that? 😊👍

[@sousunshine5190]

good work! ☺️🙌🏻

[@DesignCodeTeam]

Thank you!! 😁

[@olivierturpinlavallee6153]

Thanks Designcode ❤

[@DesignCodeTeam]

Any time!

[@lakshan2521]

Hey so lovely. Could you also do some video or videos on how to define inspiration from mobin matching to our expectation . Also on how to utilize the same to create a unique one . Better highlight colour pallette choosing as well

[@DesignCodeTeam]

Absolutely!! Thanks for the suggestion!

[@lakshan2521]

@@DesignCodeTeam you are most welcome

[@mdiqbalhossain9832]

can you Share colour theory please.

[@AlwaysBolttheBird]

In theory your colors should be picked correctly. That’s my color theory at least haha