FIGMA Tips & Tricks

By StartxLabs
Date 29-07-20
FIGMA Tips & Tricks
" FIGMA Tips & Tricks"

 

CODE INSPECTION AND LAYOUT MEASUREMENTS:

‌In Figma, the Code panel offers an easy way to extract code information from a specific page element. The code will be displayed by clicking on a layer. So if you are developing Natively for Web/Android/iOS you can get benefitted of this feature and can use the exact same code and values.

 


‌MEASURING AND SPACING:

‌It’s a simple process: Click on the element you’d like to measure, then hover the pointer onto another layer.

You can use ALT while hovering over the element to view the spacing relative to the closest Grid, Module or Guide

 


‌QUICK EXPORTING IMAGE ASSETS AND SVGS:

‌Copy an item on the clipboard as CSS, SVG, or PNG:

 

 

‌EXPORT IMAGES FOR MOBILE APP:

For mobile app we need to export up to 3X variant so we need to add 1X,2X and 3X. Tap on the element you need to export, on the right hand side you’ll see the “Export” option, tap on “+” icon to get appropriate dimensions.

 

 

‌EXPORT A FULL-RES NON-IMAGE:

To Export full resolution image select the image and do as shown in image below to get.

 

 

‌WHATFONT

The WhatFont Tool comes as a browser extension available for Chrome and Safari and as a bookmarklet. It helps you in finding the font family shown on a Webpage.

 

 

Notch / SafeAreaView spacing

After introduction of Notch, now designers have started showing some blank space on top just below the status bar to depict the notch space. So that space should get included behind Notch not below Notch in our application.

 

 

 

Similar margin padding, fonts

Sometimes we notice the difference in Margin and Padding on different screens provided by design team, instead of blindly following those number kindly keep the same common margin and padding and reach to design team for that.

 

Don’t follow the numbers (like spacing around and font sizes, border with)

Do not rely on Numbers directly for web, please verify the Resolution if it is set to 100% or 150% before putting the numbers.

If you are developing the React Native or any cross platform mobile Application then you shouldn’t use the supplied figures as the figures supplied are in Pixels whereas iOS works in “pt” and Android works in “sp“ or “dp”

So many a times we need to match the look and feel instead of just following those

 

 

Rulers

We can use in Ruler mode to see the alignments of Element if the designers have provided the option.

Short Key: Shift+R or
Manually: option>view>Rulers

 

Keep looking at this space for more tips & tricks

"We transform your idea into reality, reach out to us to discuss it.

or wanna join our cool team email us at [email protected] or see careers at startxlabs"

subscribe to startxlabs

startxlabs