A Step-by-Step Smart Home Design with Figma and Mobbin
HTML-код
- Опубликовано: 18 июн 2024
- Design a futuristic smart home app UI with Figma and Mobbin. Sponsored by 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
➡www.figma.com/community/file/...
- Apple Design Resources - iOS 17 and iPadOS 17:
➡ www.figma.com/community/file/...
- Explore Mobbin:
➡ mobbin.com/browse/ios/flows
- Discount of 20%
➡ mobbin.com/?referrer_workspac...
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
➡ / sourasith.design
➡ / titepommee
➡ / 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 RUclips
➡ / @designcodeteam
📺 Watch the complete UI Design Quick Apps in Figma course
➡ • UI Design Quick Apps i...
🚀 Follow this course on Design+Code's website
➡ designcode.io/quick-apps-figma
#figma #appdesign #uidesign
Documentation websites are very hip these days. I see a lot of demand from various companies who want a documentation website for either their customers or their employees. Would be awesome if one of your tutorials could be about that. For now I just rely on templates.
Awesome idea! Documentation sites are super useful and in demand. I’ll think about making a tutorial on that. Thanks for the suggestion!
Thanks for sharing great designs!
This channal is worth to praise i dont know how i thanks to these people guyz thank u very much if i become a ux designer i will give credit then you for sure you are teaching real ux design even google coursera cannot teach what you teach in 30 to 45 minutes video thanks❤❤❤❤
Thank you so much for your kind words! I'm glad you find this channel valuable. Your appreciation means a lot. Keep up the great work!
Thanks for sharing great designs! 💙
Glad you like them!
thank you so much. your tutorial so easy to understand.
Glad it was helpful!
Wow 🙀 thank you for the design. I did all your design course 🤗
Wonderful!
goorgeous!!!!!
Awesome! I like to see beautiful design.🥰
Thank you! Cheers!
Stunning design! This course is very helpful, thank you
You're very welcome!
About time⌚
Sorry for the video delay. I had some personal stuff to sort out. Better late than never, right? 😄 Thanks for sticking around
Extraordinary! 👏❤
Thank you! 😃
Great job
thank you for being a subscriber!
🎉 great work
Thanks 😁
Like the design wow 😍
Thank you! 😊
Nice design 😍
Thanks 😊
you're a legend
Thanks a lot! Glad you like it.
when I export the svg of the thermostat, some of the graphics looks different from the original. How do I fix this?
why all you courses don't have the prototype part can you please include that too
Well make sure to include that next!
Nice voiceover
oh I see you noticed 👀
@@DesignCodeTeam haha I like the confidence ;) but you put effort into making it so, really nice
great designs Mam. but how we can convert this to code.
Absolutely, you can! If there's enough interest, we're more than happy to teach.
This would take a lot of time -- probably many months -- to build in code, test, iterate, test etc.
There's a lot here that isn't fleshed out.
This is just the starting point, the inspiration.
How can I learn UI/UX and coding from scratch?
Tüyo: videolarınıza manuel olarak ingilizce altyazı eklediğiniz takdirde ingilizce bilmeyenler otomatik çeviri ile kendi dillerinde anlayarak izleyebilir böylece Siz de daha geniş kitlelere ulaşabilirsiniz...
Özür dilerim, bilmiyordum. Bir dahaki sefere İngilizce bilmeyen kişilerin kendi dillerine uyarlanmış altyazılara sahip olmasını sağlayacağız. İlginiz için teşekkürler!
@@DesignCodeTeam Please don't apologize. Thank you for your beautiful content. Of course it would be very nice if you add subtitles in other languages. But if you don't have time, at least if you add only English subtitles, you can watch in other languages with automatic translation. Thank you for your feedback 💐
Please tell me how can i resize icons
I replied in the other comment :)
I can't resize icons from your assets
To resize your icons, select the icon, navigate to text properties, ensure SF Pro font is selected, and then change the font size to 24; please let me know if this works for you.
Yes, thankyou 🤗
how to protype that first circle on progress bar in circular way