DevMode in Figma, also known as the Developer’s Mode is a great tool to use while designing, that usually comes in handy while engineering through designing. It is mostly used to apply development concepts into designing facts & figures. In this article, we will learn about the DevMode in Figma, how to apply it and some common properties while using the dev mode that will help you accelerate your designing skills to the top.

How to Apply?

Step 1: Apply the DevMode using the button at the top right corner with symbol </>. Or else press Shift + D to open the dev mode on the design.

DevMode

On applying the devmode, the Figma design looks somewhat like this:

DevMode Enabled

Step 2: After applying the dev mode, you can use the Chrome developer tools here also. For eg. You can inspect an element and look for it’s CSS styles & box model is also shown.

Dev Tools

Step 3: One can also use plugins to convert the design into code of any language, say, HTML, React.js etc.

Design Conversion

Step 4: You can also get the entire code for a particular element, such as the box for example. And if we choose the HTML Language format, we will get the code for the box in HTML language, using div tags, inline styles etc.

Code of the box

Step 5: Expand the window size from the right side and copy the code to clipboard and paste it directly onto the code editor.

HTML Code

Properties of DevMode in Figma

1. DevMode, also known as the Developer Mode in Figma is often used to convert the design into development codes. It is known for converting the designing aspect to an engineering aspect.
2. It provides us with different dev tools, that are used in Chrome Dev tools while development. It allows us to inspect every component and element and gain more information about it.
3. The devmode also shows us the Box model of the component, such as it’s padding, margin and width, height properties.
4. It is an all in one feature and provides us with several plugins such as Anima, StoryBook, or GitHub to connect to other applications as well as get the code for the entire design.
5. It is used in creating responsive designs. By using frames of different screen sizes, one can create the designs on mobile screens, desktop and then altogether combine to make it responsive.

Importance of DevMode in Figma

1. DevMode in Figma allows us to get the style components of each element. This means that through designing, if we add the border, border-radius, height, width of an element, the devmode will return it back in the form of CSS styles, or even tailwind or bootstrap styles.
2. By using plugins of Figma it saves a lot of time of developers. We can simply design our prototype and the plugins of Figma in the devmode will return us the entire code of the design in just one click.
3. Through devMode, we can mark a set of frames as ready for development. This tool comes in handy during collaborative sessions.
4. It allows us to convert the code into different languages, such as HTML, React.js, Tailwind, Flutter, Vue, Next.js etc.
5. The DevMode also allows us to save the frames in the form of a picture format in png, or jpg etc.

Conclusion

DevMode is an important tool of Figma as it allows the designers to also work as developers. It provides us with a variety of assets and properties that help us both in designing as well as converting the design into codes. It also allows us to save the design, mark it as ready for development and much more. It is an integral tool to know for a UI/UX designer and usage of it is crucial to save time and efforts while developing.