Skip to main content

A Hands-On Look at Figma Dev Mode with Aleksandra

At StudioPresent, strong collaboration between design and development is key to building consistent and efficient digital products. That’s why internal knowledge-sharing sessions are a regular part of our workflow. 


This was the focus of a recent presentation led by UX/UI designer Aleksandra.


In this session, Aleksandra showcased the development team to Figma’s Dev Mode and walked them through how it can help make design handoffs clearer, faster, and more reliable.
 

figma
figma

She showed how to easily access key design information directly from Figma’s side panel, including:

  • Typography styles
  • Color variables
  • Text formatting and effects

This allows developers to quickly understand which design tokens are being used, without the need to ask for confirmation or dig through documentation. Font sizes, spacing values, color variables—everything is structured and ready to be referenced.


Rather than slowing things down, this approach significantly improves efficiency. It reduces back-and-forth communication, minimizes the risk of misinterpretation, and gives developers greater independence during implementation. 


It’s a simple but powerful way to make sure that design intentions carry through into the final product—accurately and consistently.

figma
figma
Final Thoughts

The session provided a clear, practical understanding of how to work with Figma Dev Mode in real-world development workflows, highlighting how its features can streamline communication between design and development.


Big thanks to Aleksandra for her guidance through the process and sharing practical tips from her workflow.