How to Code a Figma Design in 2 Hours using HTML CSS

0:00 Intro
0:34 Part 1 - How To Use Figma Dev and Auto Layout
11:12 Part 2 - How To Use VS Code as Figma Designer
24:22 Part 3 - How To Convert Figma Dev Mode to HTML
41:27 Part 4 - How to Convert Figma Auto Layout to HTML
56:05 Part 5 - How To Convert Figma Auto Layout to CSS Coding
1:14:23 Part 6 - How To Convert Figma Variants to CSS Classes
1:30:29 Part 7 - How To Convert Figma Variants to CSS Classes
1:46:48 Part 8 - How To Convert Figma Design Tokens to CSS Classes

In this video you will learn:
- Design a button in Figma using Auto Layout
- Padding in Figma using rem and pixel
- Fixed width vs hug width in Figma
- Introduction to HTML
- Introduction to CSS
- Introduction to Visual Studio Code
- Generate HTML in VS code
- Customize VS code shortcut
- Copy CSS from Figma to HTML file
- Figma auto layout & CSS flexbox
- Strokes in Figma vs CSS border
- Round corners in Figma vs CSS border-radius
- Linking Google fonts to VS code
- Convert Figma styles to CSS classes
- Converting Figma variants to CSS classes in VS code

You can learn more about our courses on Udemy:
https://www.udemy.com/user/boroji-des...

Get a special discount on our Udemy courses by using the coupon code our my website:
https://boroji.com/courses

#figmatutorial #htmltutorial #csstutorial