Dev Mode

💡 Dev Mode is available in open beta, and it is completely free for everyone to use until the end of 2023. However, beginning in 2024, access to Dev Mode will require a paid subscription.

Dev Mode Usage

Dev Mode in Figma simplifies the process of navigating design files and converting designs into code, providing developers with all the necessary tools. It fosters collaboration between designers and developers, ensuring that crucial details are not overlooked during the handoff. Here's what you can accomplish with Dev Mode:

• View and Copy Properties and Code: Developers can easily access and copy properties, values, and code snippets from design components, simplifying the process of translating design elements into code.
• Track Changes: You can compare different versions of a design file to see what has changed since your last view, helping you stay up-to-date on design revisions.
• Inspect and Navigate Designs: Dev Mode offers straightforward interactions to inspect and navigate design files, making it easy to access important layer information within the designs.
• Find Ready-for-Development Designs: Quickly identify which designs are ready for development by using section statuses, allowing for efficient prioritization of tasks.
• Workflow Streamlining: Dev Mode integrates seamlessly with developer-focused tools like Jira, Storybook, and GitHub, streamlining your workflow and enhancing collaboration.
• Add Developer Resources: You can include relevant links and developer resources directly to components, ensuring that developers have easy access to the information they need for coding.

Entering Dev Mode

You can access Dev Mode in any Figma design file by following these steps:

• Open a Figma design file.
• Click the "Dev Mode" toggle at the top of the page, or use the keyboard shortcut Shift + D. 💡 You will be automatically placed in Dev Mode if you open a Figma design file using a Dev Mode link.

Code Settings

You will find 'Code Settings,' which help you create code for your designs in different programming languages customized to your requirements. The options for the languages are CSS, Swift UI, UIKit, Compose, and XML. Also, you have the Unit Options to decide the unit for measurements. You have pixels or rem. Since we want to develop a web app, we will select CSS as the programming language and pixels as the unit of measurement.

Language Options:

1. CSS (Cascading Style Sheets):

   • CSS is the standard language for styling web content. Figma's Code Settings provide you with CSS code snippets that define the styles of your design elements. This is particularly useful for web development.

2. SwiftUI:

   • Swift UI is Apple's framework for building user interfaces across all Apple platforms. With Figma's Swift UI option, you can generate code that replicates the design elements in your Figma file for use in iOS, macOS, watchOS, or tvOS app development.

3. UIKit:

   • UIKit is another framework by Apple for iOS and macOS app development. Figma's Code Settings can output UIKit-compatible code, making it easier for you to implement your designs in these environments.

4. Compose:

   • Jetpack Compose is Google's modern Android UI toolkit. Selecting the Compose option in Figma's Code Settings allows you to generate code snippets that align with the Compose framework, simplifying your Android app development.

5. XML (Extensible Markup Language):

   • XML is a versatile markup language commonly used for data interchange and configuration files. In Figma, you can choose the XML option to obtain XML representations of your design, which may be useful for various purposes, including integration with other systems.

Unit Options:

In addition to choosing the programming language, Figma's Code Settings also allow you to decide the unit for measurements, such as padding, margins, and font sizes:

px (Pixels):

• Pixels are a common unit of measurement in web and mobile design. They provide precise control over element sizes and positions and are often used for responsive web design.

rem (Root Em):

• Rem is a relative unit of measurement that scales with the root font size. It's a popular choice for creating designs that adapt well to different screen sizes and accessibility settings. Using rem units promotes consistency and responsiveness in your designs.

Navigating Designs

When using Dev Mode, the left sidebar becomes your handy tool for swiftly moving around designs that are tagged as ready for development. Here's a breakdown of what you can do:

A. Search

You can use the Search field to find a specific component. Figma looks for objects in the current file and any libraries you have access to.

B. View which assets are ready for development**

The Dev Mode icon indicates which pages contain frames, components, instances, and sections marked ready for development. Assets marked as ready appear under "Ready for development" in the Dev Mode layers panel. To mark an asset as ready for development, follow these steps:

• While in Dev Mode, select a frame, component, instance, or section.
• Click "Mark as ready for dev" in the toolbar.

C. Know when a frame was last edited**

You can see when a frame was last edited under the frame's name in the navigation panel.

D. Navigate frames and layers**

In Design Mode, content can be grouped into sections and marked as ready for development. Dev Mode prioritizes content in a section. Any content outside of a section is still visible but is collapsed by default. You can:

• Click a frame in the left sidebar to center it on the canvas.
• Select the frame on the canvas to view the layers nested inside it.
• Selecting a frame changes the navigation panel to a layers panel and only shows the layers for the currently selected top-level frame. 💡 You can access version history from the file name menu while in Dev Mode to view and inspect any version of a design file.

Inspecting Designs

The inspection panel shows design details and component information needed to turn a design into code. Here's how you can use it:

• A. View layer names and types: The selected layer's name and layer type are displayed at the top of the inspect panel. You can also see when the layer was last updated.
• B. Try component variations in the component playground: When selecting a component or instance, you'll see a component preview, a link to the main component, and links to relevant documentation and dev resources. The component playground allows you to experiment with different properties of the component without altering the actual design.
• C. Add external links and resources for developers: Both designers and developers can add links to external resources that aid in component implementation, including GitHub, Jira, and Storybook links. Dev resources added to components propagate to all instances of that component.
• D. Build faster with customizable code snippets: Click any object on the canvas in Dev Mode to populate the Code section in the inspect panel. This section displays autogenerated code snippets for the selected object. You can customize the language and units displayed in the code snippets.
• E. View applied styles: You can see the styles and variables applied to the selected layer.
• F. Download assets: Dev Mode can automatically detect icons and present them as downloadable assets for developers. To customize this feature, you can turn off automatic icon detection in the toolbar menu.
• G. Export: You can apply export settings to layers to define the format and other export settings, including PNG, JPG, SVG, and PDF formats.

Using Dev Mode Extensions

Dev Mode extensions enhance the development workflow by automating tasks, adding new functionalities, and integrating tools for documentation and communication. Here are some examples:

• Syncing with Jira across Figma, FigJam, and Dev Mode to manage development tasks.
• Connecting Figma design systems with code using Storybook.
• Linking designs to code repositories in GitHub.

You can access these extensions through the Plugins tab in Dev Mode, which displays recently used plugins and recommended plugins from the Figma Community.

Figma vs Code

Figma for VS Code enables you to seamlessly explore and examine design files, collaborate effortlessly with designers, monitor design modifications, and expedite design implementation—all from within your text editor. Enhance developer efficiency by eradicating the need for context switching and laborious tasks required to translate designs into code.

Conclusion

Dev Mode in Figma helps both developers and designers. It makes teamwork easier, makes work more efficient, and gives important info for turning designs into code. This tutorial has prepared you to use Dev Mode effectively, smoothing the design-to-development process. Enjoy your designing and coding!