Figma tutorial: Intro to Dev Mode

Dev Mode in Figma design gives developers everything they need to navigate design files and transform designs into code. With Dev Mode, designers and developers stay on the same page, making sure important details aren’t lost in the handoff process.

Dev Mode is in beta and free for all users through 2023.

Chapters:
00:00 - Intro
00:31 - How to switch to Dev Mode
00:44 - Status tags
00:54 - Inspect panel
01:07 - Diffing
01:47 - Component playground
01:55 - Box model and code snippets
02:17 - Dev resources
02:48 - Figma for VS Code
03:47 - Share Dev Mode links
04:09 - Wrap up

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023 #DevMode #Developer #Designer

[michaelkimyagarov]

Thanks it's a great.

Here's a feature request: devs like to work with pull request to have a chance to review each change. Pls implement something similar in figma. Cause designers do a lots of changes to a file that's "ready for review" and then dev have to understand what exactly changed. Instead dev will approve each set of change before the design guide is updated in a formal review process.

[lynnduong]

This is a GAME CHANGER when creating my portfolio! Easier to reference previous screens w/o having to save it every 30 minutes

[miksvillamor]

Maan!! As much as I love Zeplin, I might immediately migrate to this new feature! Truly amazing, great work Team Figma!

[iconekt]

other features could be:
- vscode extension that outputs the CSS in other formats as well? e.g tailwindcss
- figma tokens intgration somehow?

[imcorfitz]

Great stuff this!

A quick feature request: Would be great to have access to the local variables from dev mode as well, so we can create the design system in CSS in order to use the variables references in the css snippets provided. Auto-generated css variables would be amazing actually, so we could "export" the set of variables (colours primarily) that designers have set up and named in Figma.

[darshana]

This is mind blowing and truly a game changer experience !!! Congratulations @figma

[solidbhai]

Please keep the inspect section in the design mode

[jcandeli]

This is huge! When she says "Now which one did I see last? Hmm.. I thin it was this one." It makes me think there must be a way to know the users last seen version and auto select or highlight it though. Might be a nice follow up feature.

[akashm]

Cool! Especially the auto completion feature, Can't wait to try out this features!!

[ekemininelsn]

Still trying to master the old version now boom 💥. This awesome

[AndrewFurmanczyk]

Loved seeing the integration with VSCode. Would love to see JetBrains integrations next (looking at webstorm first).

[joemesot]

Wow lot's of comments about this "feature". So I am an actual developer, and I do not do design work unless I really really really have to. I have been hand coding html and css for decades. This "feature" is a nice prototype, but after having tried it today, it is lacking in several areas and needs lots of improvement for it to be actually useful in a real world scenario between designers and developers, oh and don't forget... this "feature" will only be available to paid plans or for a fee separately, so it will not be something a lot of figma users will even be using, including myself, since I am not a designer, there is no point for me to actually pay for a plan as I do not need the features that come with paid plans, and this individual feature is not enough to convince me that I need to pay for it separately. Maybe at some point in the future when it matures, but right now, it is just not useful enough for me when compared to my day-to-day design-to-code flow.

[Rahd_]

Loved the Dev mode, I hate messing up the design when developing! but Dev mode eased that problem!

[Digitalwolftech]

Wow this is crazy
Figma just keeps getting better

[kaylamoon]

I'm so excited that this is created just as I'm entering the industry!!

[LeehSanttanaOFC]

I really love this new feature!!! LOVE IT!!!

[craigdonovan]

This looks fantastic!

It’d be great if it could support further languages too, for example C# and C++ for games implementation :)

[zeyadgasser]

It would be great if designers can open a PR on GH from Figma with the new designs or components and then devs can edit them if necessary before merging them.

[javi_park]

does anyone know if there is a tailwind css plugin?

[roysegall]

1:52 - How does the dev resource is `button.tsx` while this is an ios project and the code of the component is swift UI?