Figma tutorial: Intro to Dev Mode

[Music] welcome to Dev mode a space in figma where developers can find what they need to implement designs more efficiently features like design to code section statuses and plugins ensure designers and developers are always on the same page with Dev mode and sigma the handoff process is better than ever I'm a developer on world peace an online organic grocery store and I'm in the process of building our web app a designer on my team just sent over this figma file and I want to make sure our code base reflects the most recent design updates I'm going to switch over to Dev mode to see what we're working with [Music] this section is marked ready for Dev so these frames must be ready for implementation let's take a look at the layers in this Frame I can see the names and types of layers in the inspect panel this Frame contains some text shapes and components this frame looks a little different from the last time I viewed it I wonder what changed devmode allows me to compare changes from previous versions to the current version by viewing the frame's history now which version did I see last I think it was this one ah the background color of this layer Changed by viewing the frame's history I can see how its Styles have been edited I'll make a note to update that in the code base I need a bit more information about this component the inspect panel in Dev mode displays the Styles and assets I need and even includes a component playground where I can try out different component properties without changing the design devmode also provides a box model and generates code for this component right now the generated code is in Swift UI I'm developing for web so let me switch it over to CSS I can see the new color style being used and the background color is already updated in the generated code I'll copy this for later my team is using GitHub for Version Control on this project there's a link attached to this component that takes us to its implementation in our code base with the GitHub integration I can see exactly which file the component is in as well as the code associated with it all without having to leave figma that just saved me the trouble of having to look through a repo to find the right component while I'm here I'll also go ahead and add a link to the related Asana task so I can track my work easily I think I'm ready to open vs code and start updating these frames which reminds me I heard someone mention that figma now has a vs code extension let's check it out with figma for vs code I can see which designs are ready for development and get new comment notifications without breaking my flow no more switching back and forth between the design file and my text editor from here I can also view additional Dev resources linked to the component there's the GitHub link we saw earlier it opens the file in my editor [Music] for components that don't have an existing implementation the figma for vs code extension provides auto-complete suggestions based on our design this workflow is pretty efficient I can quickly find what I need from a figma design file and avoid all the usual context switching during development I should ask the team if they've had a chance to try out Dev mode first let me share the updated designs with the rest of the devs since they're working on implementing other frames for the world peas app I can send them this link so they get dropped right into Dev mode when they open the file [Music] thanks for exploring devmode with me today what other features would you want to see to improve your handoff process let us know in the comments below see you next time foreign

Channel: Figma

Views: 91,983

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:developer, language:english, format:standard, produced_by:product_education, theme:development, event:config, series:figma_tutorial, type:feature_tutorial, level:beginner, primary_feature:other

Id: __ABPkb0aF8

Length: 4min 24sec (264 seconds)

Published: Wed Jun 21 2023