Figma Dev Mode is here!

Figma just launched Dev Mode and it’s really cool. There are a lot of really awesome features that make life so much easier, from having the units in rem to a bunch of new features and a VS Code plugin, plus a bunch more. Of course, there are a few negatives as well, and I take a look at it all in this video.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:43 - How to turn on Dev Mode
01:50 - Changing your language and base units
03:12 - Box model and the CSS that it outputs
04:57 - Getting assets
05:40 - Sections and ready for development
06:45 - Variables and Styles
10:00 - Tracking changes
12:25 - Connecting components to GitHub files
15:18 - VS Code Extension
22:34 - The negatives of Dev Mode

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

Figma team has reached out to me (!) to let me know they're going to be rolling out some fixes for the issues I ran into when recording, such as the border-radius units, as well as the auto-complete not working, which was because I was in an SCSS file. It should work soon, and should already work with css-in-js and other solutions as well :)

[nikasiradze]

At the beginning of the video, most people speak loudly and scream directly into the microphone. However, I appreciate your calm and soothing tone, which makes it easier for me to listen to you. Thanks, Kevin!

[mebamme]

I literally *_just_* started having to work with Figma an hour ago, and I was glad it had a Dev Mode - I didn't realize it was brand new. Thanks for the video!

[theplaintech]

Thank you for this. Figma seems to be the Next Big Thing.

One thing to note: Adobe is NOT buying Figma, so all is right in the world.

[travm.]

Might have been mentioned already. But Figma Dev Mode does have a fee range now. But for free you can have one project or file with most of the features you'll need. To use Dev Mode with multiple files and such the next tier is $12. So unless you're using it daily in a workflow on multiple projects shouldn't be a big deal. If I was making money on designs I'd probably shell for the $12.

[jhasani]

Was waiting for your evaluation of Figma Dev mode. Thank you for this. You, sir, are awesome. Aiding me in "making my corner of the web a little bit more awesome".

[AndrejGrbin]

I've resisted prototyping in Figma for a long time, but this is what I needed to change my mind. Thank you Kevin!

[xx.x]

I still rather code manually by my own myself. It's a pleasure for me and like to control each detail.

[thatguyidk]

This has been incredibly helpful for my figma design and first time trying to make everything into a e-commerce cms

[splamb]

"If you're on my channel, you're probably a dev" 👀 just here because you're a good teacher and I like your content.

[swaslaukinonome]

At least someone doesn't hate CSS and makes it all sound reasonable. Thanks for all the helpful tips and advice.

[Ari-pqdb]

Im learning CSS and you have helped me a ton, thank you sir ❤️❤️❤️🔥🔥👍👍

[benjaminmosnier]

Sad to know this will be behind a paywall. Most of the time, the design team pick a solution they like and the rest of the chain is using it because of that starting choice they made. As a developer we can suffer from those choices. Figma could have made a bold decision here and make this available for everyone so the dev world and the creative people could better work together… but no, this is not the way thing seem to lean on. So sad. Thank you kevin to point out this as nobody seems to care about (still very fresh tough…)

[robertlybarger]

I solidly appreciate the video and the work it took to put this together. FWIW, I'm on the 'dev' side of things at my day job. Our UX team brought in Figma about a year ago, so we're still adjusting to how to best utilize the base offering. As long as someone in UX doesn't mis-save the file in a way that interferes with my access to the Inspect panel, that does all the things I really want done. I do share a strong reservation about playing with a beta product (generally against our internal M.O.) that will definitely pay wall. That said, I don't really see anything in this offering that makes me excited enough to campaign for changing what/how we handle the dev side of our working process. /two-cents

[krystiankurlej]

Hey! Have you tried clicking on image.png in section where there is padding, margin, etc.? There is actually an option to download image without border-radius and it has even more benefits. If designer will place image as a background of some container for example, before you could only download whole container with all stuff in it (texts, buttons...) WIth dev mode you can now select whole container and press that little link saying "image.png" or other name of file and it will redirect you to original image. For me that's awesome because it has ended pain with making double containers: one with content and one with background only

[MattEdwards_aus]

It looks like they have updated the copy around the end of Beta / paid plan now and from what I can understand: The beta is only available to paid plans, and when it comes out of Beta it will still be available to all paid plans. In addition if you company is on either the Organization ($45 a seat) or Enterprise plan ($75 a seat) then you can choose a dev only plan at $25 or $35.

But it will be available on the $12 a seat Professional plan too.

[octothorpe]

Don't forget to submit feedback!! The more we flood them with stuff we want, the more likely it is they'll do it!

[TheNebulaverse]

Hey Kevin, have you ever given Locofy a try? It's a Figma plugin that generate React+Tailwind CSS code from your Figma designs. It does requires some design tweaks before the plugin can work its magic. I'm really curious to know your opinion on the quality of code and CSS it produces. Have you had any experience with it?

[JimKernix]

Wow, look at all those icons in your VS Code sidebar. I have the default 5 ending with Extensions but you have an additional 8 - what are those for? Other than the figma one. Sounds like a video idea!

[ZackPyle]

Thanks for the overview! One thing that bugs me though is when people complain about something like $20/mo for a product that you say is so helpful...? If it saves you say 20-30 min per MONTH, that is of course worth it, no?