Design

Figma took away your (free) dev mode, now what?!


22 MEI 2024
Scroll

Figma recently changed it’s plan which means that you now have to pay for your developers to get full access to your designs. So now what? Pay €12 per developer/month, switch back to another service such as Zeplin OR simply keep on reading and find out how you can still get all your spacings and exports from Figma without paying.

The profile picture of the author of this blog post
Christoph van Ochten
Lead Designer

Fabrikate ❤️ Figma

Let it be clear, we absolutely love Figma. Especially the fact that you can easily work with your fellow designers & developers in one file without the hassle of switching context in another tool for your design handoff.

Let’s get started with getting your developers back to work in Figma

Step 0: Create an account

without an account you’ll only have view-rights - so do yourself a favour and create a free account for Figma before starting

Get your code & measurements

Measurements

to measure a distance between two elements, select anything then hold option/alt and hover over the second element to see the distance between the two.

Code Snippets

You probably think that Figma added this feature to it’s paid dev-mode, right? Wrong! They just hide it really good, select the element that you want, on the left you’ve got a representation of this element in layers. Right-click on the main/top layer, go to ‘copy/paste as’ → Copy as code and select for which technology you need it: CSS, iOS, Android

Export file as…

Select the desired component/element, go to your right-panel and click on the tab ‘Export’. Now you can see the component-name: click on the ‘+’ icon and select your preferred image-type (PNG, JPG, SVG, PDF) > click the big ‘Export’-button and save it to wherever you want.

figma-gif-ezgif.com-video-to-gif-converter.gif

Can’t reach the right layer/element?

Sometimes it might look that you can’t reach a specific element within your component, that’s probably because it’s nested and sits a couple layers deeper. You can explore different layers by holding the ⌘-key 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) OR you can select the main component and take a look at the tree-structure in your layer-panel on your left to directly select the targeted layer.

Get in touch with one of our experts: info@fabrikate.be

Share
Share this article:
Have a challenge in your mind?
Feel free to get in touch and we'll get back to you!
Get in touch