Hey all, thank you for tuning in on this video! If you want to follow along the design example in the video, head over to the video description and duplicate the Chakra UI kit file. I'll be updating it regularly, as I'll be reusing these styles and components in future videos as we begin to close the gap with production-level design and bringing things into code. I hope that you've found this video interesting, and if you have any thoughts feel free to drop them in the comments!
Awesome ! Very good example of optimised design for coding. I also really like that you show/share every bit of your file and explain the whys (spacing, large vs small screen). This is a very usefull and pratical exemple of best practice. Very well done!
Thanks for this! I'm curious about the process of "getting this into code"… you do mention that the devs/eng can get what they need from this to implement it on their end. How? What are they looking at specifically? I am guessing they still need to code up all the underlying components and then hmmm is it the "Component Properties" in the Inspector which they use (copy/paste or type) in the code? thanks!
I personally love both for different reasons. Chakra has some good comparison notes in their documentation here: chakra-ui.com/docs/comparison If you want to sweat the design details, you'll enjoy Tailwind a lot. If you're not interested in styling too much and want out of the box components, Chakra overdelivers.
Hey all, thank you for tuning in on this video! If you want to follow along the design example in the video, head over to the video description and duplicate the Chakra UI kit file. I'll be updating it regularly, as I'll be reusing these styles and components in future videos as we begin to close the gap with production-level design and bringing things into code. I hope that you've found this video interesting, and if you have any thoughts feel free to drop them in the comments!
Cool!
You are the dream of every engineer haha.
True. Imagine your designer referring the UI framework you use before designing!
Thanks for sharing the tip with the spacing!
This is an awesome video, Javier! The Chakra community needs something like this in Figma that's maintained.
Thank you, happy to hear that you found it useful! There's more to come.
Thank you Javier... this is just the best design system that i ever saw. Cheers!
Thanks for your comment Bruno!
Awesome work friend, thank you sooo much!! This is professional!!!
Awesome ! Very good example of optimised design for coding. I also really like that you show/share every bit of your file and explain the whys (spacing, large vs small screen). This is a very usefull and pratical exemple of best practice. Very well done!
Thank you, much appreciated :) I’m happy to hear it was helpful!
Thank you very much for this tutorials and for the figma project.
My pleasure!
Awesome content. Really helped me. Thanks!
Aweomse Javier! That's so helpful for my work right now.
Thanks Daniel! Happy to hear it's helpful 🙏
Amazing. Thanks Javier 👍
This is amazing, thanks so much for sharing this Javier,!
Thanks so much for the figma file as well! This is a life saver for a single developer
Super useful - thanks for sharing!
My pleasure!
Thank you for this tutorial!
Great video!
Thanks so much, this is cool!
Thank you dude!
My pleasure, I hope it was helpful!
Awesome mate
Awesome!
Thanks for this! I'm curious about the process of "getting this into code"… you do mention that the devs/eng can get what they need from this to implement it on their end. How? What are they looking at specifically? I am guessing they still need to code up all the underlying components and then hmmm is it the "Component Properties" in the Inspector which they use (copy/paste or type) in the code? thanks!
Good question. This needs to be answered Javier. :)
thanks, man!
You're welcome!
It's got everything you need. Except for a frigging Stepper that I need so bad
Thanks
What's your opinion on Chakra compared to Tailwind? I'm having trouble deciding which one to use for a project 😥
I personally love both for different reasons. Chakra has some good comparison notes in their documentation here: chakra-ui.com/docs/comparison
If you want to sweat the design details, you'll enjoy Tailwind a lot. If you're not interested in styling too much and want out of the box components, Chakra overdelivers.
Thank you foe suck a great content
My pleasure, thank you for watching!
chakra ui sucks