Design Workflow with Chakra UI and Figma
24.1 هزار بار بازدید -
3 سال پیش
-
Learn how to adopt a
Learn how to adopt a faster design workflow for product design with Chakra UI styles and components in Figma. In this video, I'll walk you through a step-by-step tutorial on how to design an interactive sign in form with Chakra!
Link to the Chakra UI kit:
https://www.figma.com/file/cWuIe1XzqL...
Chakra UI is one of the most popular component libraries to build modern React applications. In this video, I share my design workflow for utilizing Chakra's native styles and components to put together an interactive sign in form that can then be seamlessly converted into code.
It's easier than ever to build. Utilizing existing frameworks like Chakra facilitate a jumpstart position into product design, whereas otherwise you'd have to dedicate a substantial amount of time to put together basic components that've already created and perfectioned by others to the extent that they can then be customized to your own needs.
If you are interested in frontend frameworks or design to code workflows and found this video helpful, show this video some love by giving it a like and let me know in the comments if there's anything else you'd like me to cover in the future! 💬
If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.
Connect with me here 👋
Twitter: Twitter: javalaves
Figma: https://www.figma.com/@javi
Chapters:
0:00 - Intro
0:50 - Product specs
1:35 - Chakra UI kit
3:03 - Prototype walkthrough
4:37 - Form design
18:07 - Responsive design
23:44 - Conclusion
Link to the Chakra UI kit:
https://www.figma.com/file/cWuIe1XzqL...
Chakra UI is one of the most popular component libraries to build modern React applications. In this video, I share my design workflow for utilizing Chakra's native styles and components to put together an interactive sign in form that can then be seamlessly converted into code.
It's easier than ever to build. Utilizing existing frameworks like Chakra facilitate a jumpstart position into product design, whereas otherwise you'd have to dedicate a substantial amount of time to put together basic components that've already created and perfectioned by others to the extent that they can then be customized to your own needs.
If you are interested in frontend frameworks or design to code workflows and found this video helpful, show this video some love by giving it a like and let me know in the comments if there's anything else you'd like me to cover in the future! 💬
If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.
Connect with me here 👋
Twitter: Twitter: javalaves
Figma: https://www.figma.com/@javi
Chapters:
0:00 - Intro
0:50 - Product specs
1:35 - Chakra UI kit
3:03 - Prototype walkthrough
4:37 - Form design
18:07 - Responsive design
23:44 - Conclusion
3 سال پیش
در تاریخ 1399/11/29 منتشر شده
است.
24,190
بـار بازدید شده