Why use Figma as a developer?
A brief history of the tools for models
Over the years, developers and designers have used various tools to work with models and designs.
Historically at Be API, we used mainly Photoshop : but it was not specially designed for collaboration between designers and developers and not suitable for web design. We used Avocode in addition to Photoshop which allowed to have the CSS codes associated with the elements of the models. At the same time, we worked with our clients with Adobe XD, a solution more suited to web design.
Later, we opted for tools like Sketch, offering a better experience for designers, but the absence of native cloud management sometimes complicated sharing and collaboration.
These solutions were often fragmented, requiring the use of several tools to maintain fluid collaboration.
Why is Figma the ideal tool for developers and designers?
Figma revolutionized the domain by offering an all-in-one, collaborative cloud-based platform. Unlike its predecessors, Figma allows developers and designers to work in real time on the same file, without having to go through exports or third-party applications.
With features like the Dev ModeFigma greatly simplifies access to design specifications, such as measurements, colors and downloadable assets. This reduces friction in workflows and offers a fluid experience, particularly adapted to the modern needs of agile teams.
Moreover, Figma files are accessible via the web browser, and therefore do not require downloading the software.
Figma has established itself as an indispensable tool thanks to its flexibility, its real-time collaboration and its specific features for developers.
Figma Dev Mode : A revolution for developers
What is the developer mode on Figma?
In the past, Figma incorporated CSS style properties and values into a single view, which did not bring benefits to designers. Developer mode on Figma (also called Developer Mode) is a View dedicated to developers providing several features facilitating the integration of web models:
- Inspect the elements: See sizes, margins, paddings, colors, fonts, etc.
- Export Assets: Download images, SVG or other formats provided by the designer.
- Copy code: Copy CSS, Swift, or Android XML code for a selected item.
- See components: Displays reusable components and their variants.
- Integrations: Connection possible with GitHub, Jira, Storybook, etc. to follow the tasks or status of the code.
How to activate and use Dev Mode?
Dev Mode is accessible from the toolbar below the app. Click on the button represented by </> , you will switch to the developer view and will be able to access its dedicated features.
The inspection panel provides you with the design details and information on the components needed to turn a model into a code. Here's how to take advantage of it:
➡️ Show names and layer types : The name and type of the selected layer appear at the top of the inspection panel. You can also see the last update date of this layer.
➡️ Test component variants in the preview space : When you select a component or instance, you access: an overview of the component, a link to the main component, and links to documentation and resources for developers.
➡️ Add links and external resources : Designers and developers can add links to resources useful to implementation (e.g. GitHub, Jira, Storybook).
➡️ Accelerate development with customizable code extracts : In developer mode, click on a model object to show a automatically generated code extract in section « Code » inspection panel. You can Customize Language (CSS, Swift, XML...) units of measurement used in these extracts.
➡️ View applied styles : You have access to styles and variables (colours, typographies, spacings, etc.) associated with the selected layer.
➡️ Download Assets : Developer mode can automatically detect icons and offer them for download.
➡️ Export Items : You can set export parameters on layers (pNG, JPG, SVG, PDF, etc.), as well as associated settings (sizes, suffixes, etc.).
Figma and front-end development
Integrate Figma design into HTML/CSS
The most classic step for a developer is to translate a Figma model into HTML and CSS. Thanks to Figma's developer mode, this task is greatly facilitated:
- The inspection panel allows see sizes, colours, typographies and spacings.
- The grids, constraints and flexibility elements can be observed, which helps to reproduce a reactive layout.
- Assets (icons, images, SVG) can be downloaded directly from the interface.
A good reflex is to synchronize the values declared in Figma with a CSS framework like Tailwind to match what is set on the model and what will be used in your web pages.
👉 At Be API, we work exclusively on WordPress and more and more on themes Full Site Editing (FSE). During the first steps of integration, we take care to recover all the values of the models (colors, spacings, typographies, etc.) to add them to the file theme.json which allows to report all CSS variables that are used to build the site pages.
Convert a design to React or Vue.js
Figma also facilitates work by components, which perfectly corresponds to a modern architecture with React, View or any framework based on a modular IU.
- Each Figma component (button, card, form field, etc.) may be associated with a React/View component in your basic code.
- The naming of components in Figma can reflect the code to improve traceability.
- Thanks to variants of components in Figma, you can anticipate the
props(size, state, style) in your code. - Plugins like Figma to Code, Anima, or Locofy allow to generate an HTML/JSX/Basic View skeleton, to be manually refined.
Developers and designers need to work closely together to ensure consistency between organizing modules on Figma and components on an application with React or Vue.js.
Automate workflow with Figma plugins for developers
Another force of Figma is its ecosystem and community. Several extensions are developed by third parties and facilitate, among other things, developers' working methods. Here is a non-exhaustive list of popular extensions:
Figma Tokens : Synchronize design tokens (colours, typography, spacing) with your project (Style Dictionary, Tailwind config, etc.)
Themer : Export/import whole themes to integrate them into a design system
Figma to Code : Automatic generation of React/View/HTML/CSS code
Story.to.design : Import Storybook components in Figma for reverse visualization
Content ReelAdd dynamic content to test the UI with realistic data
Good practices to collaborate effectively with designers
For optimal collaboration between developers and designers, it is essential to setting a clear framework from the start : coherent naming of components, shared system design, and use of variables (design tokens) to harmonize code and visual.
Figma allows a collaboration in real time, but it is mainly his system of Comments and contextualised annotations which facilitates exchanges: each element can receive a precise return, avoiding misunderstandings. Developers can ask questions directly about the model, and designers can answer them without multiplying screenshots or external documents.
In addition, use developer mode to access all specs without disrupting the model, and regularly schedule cross reviews to validate the alignment between design and implementation. Good communication, well-used tools and light but rigorous documentation are the keys to effective front-end/design collaboration.
Conclusion
Figma is not limited to the creation of models: it is a central tool for collaboration between designers and developers. By exploiting its features such as developer mode, contextualized feedback and rigorous structuring of components, it becomes a real lever to increase efficiency, consistency and quality in the development of web or mobile interfaces.
