From Figma to Tailwind CSS (Design Process + Code)

Learn what makes a great user interface, tips for working with Figma, and how to translate designs into Figma to real code with Tailwind CSS.

0:00 – Introduction
0:16 – Design Process Introduction
0:16 – Design Critique (Web)
5:05 – Design Critique (Mobile Web)
6:26 – Design Critique (Mobile App)
10:52 – Design Critique (Related Sites)
12:06 – Design Iteration 1
25:44 – Design Iteration 2
45:08 – When to move to code?
47:05 – Site Setup / Overview
54:12 – Turning the design into Tailwind CSS
1:05:09 – Conditional logic with React components
1:08:55 – Fetching real data from ESPN API
1:38:01 – Successfully connecting API data to components
1:43:35 – Handling dates and times
1:53:02 – Adding a heading with Tailwind CSS
1:56:07 – Fix images aspect ratio
1:57:06 – Conclusion

[karsongrady]

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!

[fredjudymom]

Fantastic video! You highlighted the crucial aspects of design by iterating and drawing inspiration from multiple sources.

[wibbs]

Awesome! I'll tuck into this later in the week.

[laptopuser]

Great stream, thanks for taking the time to break it down.

[clemencizm]

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!

[yoJuicy]

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.

[jatFIVEFOURAA]

SO much great info for free, thanks man!

[TheSevenpercent]

just subscribed after watching for like 5mins. You are amazing!!

[XahidEx]

Something really so much helpful 🧡
I was looking for it.

[ExaltMySelf]

Really interesting process. As a frontend and ux/ui enthusiast, I found it really inspiring.Thanks for sharing.

[.bhubneshmaharana]

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.

[runonce]

I was just about to comment about not using just color and then you said you can't just use color indicators due to colorblinds. Thank you ❤❤

[voychoi]

I'm not a big fan of watching educational videos but this was enjoyable to watch

[SandeepKumar-otim]

Hey Lee, what font and theme are you using in your vs code?

[NathanBudd]

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??

[davidfromnorth]

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?

[clemencizm]

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!

[allsunday]

great video. Just wanted to say not a fan of the indentation. Do you still think it's the right choice?

[ndnow]

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.

[lightninginmyhands]

is that an intellisense extension at 1:05:30 ?