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.

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.

More Figma-related questions?

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