Thanks, Lee. Fantastic to see the organic process rather than an edit that makes it look like you didn't stumble here and there. Looking forward to the next one!
to be frank i don't know typescript or api calls anything , but i wanted to know how a figma design is converted to a coded frontend . I watched for 1.2hrs and understood what all i need to learn to master frond end . Man u made my day.
I just finished watching the full video. So interesting and helpfull! Ijust completed a FullStack WebDev Botcamp and after this video everything makes even more sense! By the way, for the numbers, the font that you are looking for are monospace fonts. Cheers!
Thanks for the tutorial lee. You do a great job explaining. I like how you use stuff nobody else does. not faker.js or whatever. More advanced stuff like TS is a great opportunity for me to learn more itnermediate parts of the full stack.
Hello! Great video! I am a UX-UI designer with some front end skills. I am diving in design system, tokens and the whole ecosystem that gravitate around it. Naturally I am wondering how to integrate Tailwind into that, and eventually landed here :) Now I am wondering why, if you took the time to properly design the UI in Figma, trying to be consistant with the spacing, etc, why you only use it as a visaul reference once you are coding? Why don't you just check the editable Figma file and read the style value? I am really curious about that, because that would explain so much about the difference between the design and first delivery on stage environment? Is it a common practice? In advance thank you for the answer!
So you just have to redo your design in code basically? Is there a good way to convert a figma file to tailwind, b/c you might as well just design it in code from the start and not waste anytime if you are doing this solo.
This was cool. I'm in the position to have received files from a designer for the first time and I'm going to build the site to their spec. You seemed to be guessing the sizes more than referencing the designs which I found odd... why design it first, then randomly change the margin/padding as you go? Re the dates... couldn't you just use `font-mono` here or does it not behave well with NextJS??
What if you want to have dynamic styles? for example I am developing my design system and I want my button to receive additional classNames to add margin, position and etc (custom styles) - tailwindcss can not do that, what do you think about it and maybe I don't understand how to use it properly in case of design system?
i still feel like there shouild be away to get the classes based on figma, i thought this would show it but still it seems people just use figma as a visual reference not to help with the css or tailwind css implementation (like saying exactly what utility classes to add to the diffferent components achieve the layout..)
I always struggle with tables in mobile version. Horizontal scroll is anoying but landscape is even worst for UX. What you did is nice, only leaving the really important content, but sometimes there's no scape and you want to show a lot of info.
1:26:18 it was so frustrating to watch him look at the json over and over and glance over the “competitors” object with the “team” object collapsed, which had all of the info needed to render the row component. 🥴
