Figma recently revealed that the dev mode, previously free, will transition to a paid model. But what does this mean for you? Figma planned to discontinue the free access to dev mode by the end of January 2024. If you’re a developer, there's no need to worry. You can still access all the essential information from the Figma file without relying on dev mode. Are you curious about how to achieve this?
Keep reading for a quick how-to guide!
How we use Figma at icapps
At icapps, we employ Figma for crafting prototypes and UI designs, and showcasing them to clients. Developers get "viewer" access to Figma files, meaning they can't make changes.
Prior to diving in, make sure you have the right file link and proper authorization using your icapps email. Additionally, seek guidance from someone with functional knowledge to avoid misunderstandings.
Useful to know
Go to the main component.
For UI designers, consider conceptualizing reusable components to effectively build pages, screens, and designs. In Figma, frames can be designated as components, easily identifiable by a diamond icon next to the layer:
The significant benefit of adopting this approach lies in the seamless synchronization between modifications made to the original component and their instant reflection in all designs employing it.
When building a component as a developer, it is helpful to look at the original component, as there are often variants/states defined that you need to implement. You can do this by right-clicking > Go to the main component. Figma then opens the correct frame (on another page or even another file).
It may happen that you do not have sufficient rights to view the main component because it is defined in another file.
Deep select
You can use the so-called Deep Select to navigate between different layers efficiently. You do this by holding down ⌘ and then clicking on a layer. Figma will then select the deepest layer instead of traversing the "layer tree" (and having to click twenty times before reaching the correct layer).
If you need one of the intermediate layers, you can also hold down ⌘ and right-click to see a list of the layers at that point.
Exporting file(s)
Single file
Prepare your export by selecting the desired element and selecting the Export tab on the right sidebar. Then click on the Plus icon and fill in your settings.
Here you can, for example:
Adjust the dimensions of the exported file by specifying the desired width/height. You do this with suffixes w and h. For example, 512w will export a file that is 512px wide and adjust the height according to the ratio.
Make multiple exports by pressing the Plus icon several times. This can be useful for exporting different sizes on mobile devices.
Then click on Export.
For multiple files
You can efficiently export files by following these steps:
Prepare the exports for the different elements as described above.
You can export all files in bulk via ⌘ + Shift + E (or via File > Export).
Copy as SVG
You can quickly copy a layer as SVG to your clipboard by right-clicking > Copy as > Copy as SVG. This can be useful, for example, for icons.
Measuring the distance
Guidelines for measuring the distance between elements:
Select the element from where you want to measure.
Hold down the Alt key.
Hover over the element to where you want to measure.
You can also check margins/paddings in the right sidebar in the Layout section.
To get you further started, our colleague Helena has created a Figma Cheat Sheet with all the different shortcuts you can use in Figma. Super handy!
