Figma VSCode Extension!! Convert Design to Code!
Vložit
- čas přidán 19. 07. 2024
- 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
islemmaboud.com/join-newsletter
⭐ 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!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
👉 Personal Links:
✨ My Portfolio islemmaboud.com
🐦 Follow me on Twitter: / ipenywis
💻 GitHub Profile github.com/ipenywis
Made with ❤️ by Coderone
![Locofy.ai | Figma Design to Live Website with Locofy [Quick Build]](http://i.ytimg.com/vi/6UIfbJfz1jI/mqdefault.jpg)
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
coding with AI- 1 hour of code, 10 hours of desbugging
Unless you know how to clean your AI code as you build
10 hours to debug something really isn't that bad if it's the complete project
I mean it's bettee than dozens of hours of actually coding.
Still better than 10 days of coding
Also if you have more experience in coding part , cleaning will be lot easier
I'll say half of that since chat-gpt can clean it up where you think the bugs are at= less stress
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.
exactly
The funny thing is the client won't give a damn about nothing you just typed if the results meet their requirements
but you will, when you get there new requirements. @@SAINT_PATRICK
Exactly. Hell, lets bring back the "spacer.gif"! 😅
thanks for the detail explanation, informative and understandnable
Thank you! This is great...
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?
wow thank you for sharing that's really useful
Very helpful. Thanks Sir ❤
Verry Helpfull Bro.
quick noob question - is there a way to export figma animation to webflow?
Damn!!! incredible
Are there code generator plugins that support rem for styling ? 🙏
Dude, what you said is perfect, but do the cods coming out of figma support reponsive design?
responsiveness is not important for his subscribers.
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?
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
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.
frontend dev since 2005? This is sooo cool. Now you must be pro in css..
I will try it. It looks exciting. Is it really so cool&
Good day greetings
do you have that miranda sings accent on purpose or thats how you're all the time?
seems pretty good. however, i can't open figma files on vscode
me too
Absolute position is bat for developers? 6:36
Does this mean I can be a web designer and developer at the same time ?
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
is this free? Can i make a chrome extension with this?
How?
like
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!
this is horrible
Why the hype? HAs any of you used FIgma before as a developer. All the info and the code you could get before too. It was called inspection mode. Literally not a single new feature is added. They just renamed the mode and reorganised few things. Ok, spacings, margins and padding are maybe little better displayed, but that is it. This literally adds almost 0 value to me as a developer.
How long you been a developer?
I've used Figma but it didn't have the code and React stuff , this looks really good. I think you might want to rewatch the video
Dev mode is not free. To hell with it.
"PromoSM"
What does this mean?
Figma balls
these code generator aren't nearly as good as manually coding out
Ligma is better
Lol
😂 ligma?
ligma nuts@@views-re2om
@@views-re2om 😈
What is ligma. I know sugma only
Actually a real good video but "you know" a million times really stoped my attention to its actual content :(
Salesman.
бесполезное видео
horible
Do you even code lol horrible code