Figma VSCode Extension!! Convert Design to Code!

The Figma Config conference was held a couple of days ago! And so many new features were released for us as developers. New dev mode to easily convert your designs into code, a New VSCode Extension and an Awesome AI Plugin for generating SVGs, Auto Renaming layers and much more!
In this video, we'll explore the new features of going from the dev mode and converting your designs into HTML, CSS and React components to using a really cool AI Plugin right from your Figma editor.

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
00:31 New Figma Features!
01:53 Figma Dev Mode
07:28 Figma VSCode Extension
08:50 New Figma AI Plugin

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

👉 Personal Links:

Made with ❤️ by Coderone

[CoderOne]

🎉Our Newsletter is live! Join thousands of other developers

[onlyengineering]

coding with AI- 1 hour of code, 10 hours of desbugging

[dhiyaulhaqdazakiyyah]

thanks for the detail explanation, informative and understandnable

[mertdr]

I’ve just activated dev mode and it looks good for beginners in a glance but it’s far from useful for experienced devs. Reminds me of Dreamweaver days back then. Tons of garbage styling with arbitrary dimensions. Probably refactoring the code would take more time than writing from scratch. But I liked new layout features with min - max width values that make the layout act like responsive.

[cloudsystem]

wow thank you for sharing that's really useful

[Darbokst]

so i can import my pages in vs code then save them as whatever extension I need and with some minor tweeks it will work?

[frigga]

Are there code generator plugins that support rem for styling ? 🙏

[floyd]

quick noob question - is there a way to export figma animation to webflow?

Dude, what you said is perfect, but do the cods coming out of figma support reponsive design?

[daveanvs]

Hi do you know if there is a way or extension to version your Figma designs in a GitHub repository, without having to export manually?

[Yuryi_Abrokov]

I will try it. It looks exciting. Is it really so cool&

[criticalthinkergis]

Its good and bad, everything as divs is not correct markup and absolute widths and heights makes responsive design a nightmare but it saves some time

[aerozg]

LOL i still have to code everything from scratch manually and break apart the design and adapt it to our internal company standards, this is no help at all. I have been a frontend developer since 2005 and none od these "design-to-code" gimmicks ever worked. It's just a pipe dream.

[FilthySnob]

do you have that miranda sings accent on purpose or thats how you're all the time?

[johnmarkbondad]

seems pretty good. however, i can't open figma files on vscode

[aligharbi]

Does this mean I can be a web designer and developer at the same time ?

[sergio.arboleda]

Absolute position is bat for developers? 6:36

[IIT_Nivedhith]

is this free? Can i make a chrome extension with this?

[Leyksnal]

This is not bad at all, but it doesnt fit for me, so much garbage that needs refactoring and that will have to take some more couple of time

[vivianliu]

the tailwind export is terrible! I will not suggest you to copy that. Learn how to write code properly. It might be good for reference, but don't just copy and paste!