A Step-by-Step Smart Home Design with Figma and Mobbin

Design a futuristic smart home app UI with Figma and Mobbin. Sponsored by https://mobbin.com

You'll learn how to create a realistic UI from scratch using advanced techniques to make your design stand out.

Resources and Community Links:

- My Figma File

➡https://www.figma.com/community/file/1354359385796677513/smart-home-app-design-community

- Apple Design Resources – iOS 17 and iPadOS 17:

➡ https://www.figma.com/community/file/1248375255495415511/apple-design-resources-ios-17-and-ipados-17

- Explore Mobbin:

➡ https://mobbin.com/browse/ios/flows

- Discount of 20%

➡ https://mobbin.com/?referrer_workspace_id=d37f6325-3235-4c87-953f-c89b357f7634

What You'll Learn:

- Designing from Scratch: Learn the step-by-step process to conceptualize and design a smart home from the ground up, ensuring a solid foundation for your creative journey.

- Mastering the Arc Tool: Gain proficiency in using the arc tool in Figma to add unique curves and elements to your design, making it stand out.

- Complex Shapes with Subtract: Discover how to create complex shapes by mastering the subtract feature, adding depth and intricacy to your designs.

- Gradient Mastery: Learn how to use different types of gradients in Figma to create realistic and visually appealing buttons and interfaces.

- Advanced Stroke Dash: Get creative with stroke dashes to add texture and style to your designs, making them more engaging and detailed.

- Auto Layout Mastery: Become an expert in using Figma’s auto layout feature to streamline your design process and ensure responsiveness across devices.

Follow me

➡https://www.instagram.com/sourasith.design/

➡https://twitter.com/titepommee

➡https://www.tiktok.com/@sourasith.design

Thank you for choosing our course to start your journey in smart home design. The future is in your hands!

00:00 Intro

01:49 UX Patterns and User Flows

03:50 Download Resources

04:30 Wireframe

04:50 Design Thermostat

17:00 Design Button

19:00 Interactive Cards

22:45 Energy Cards

31:10 Info and Progress Ring

35:08 Stats and Charts

41:00 Conclusion

🪄 Join this channel to watch the entire course on YouTube

➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join

📺 Watch the complete UI Design Quick Apps in Figma course

➡ https://www.youtube.com/playlist?list=PLDaHCLWmCcQLKv4qWsHm7aiuvIhvT3rn1

🚀 Follow this course on Design+Code's website

➡ https://designcode.io/quick-apps-figma

#figma #appdesign #uidesign