DEV Community

Cover image for You can do these on Figma to work faster
Surya Wiguna
Surya Wiguna

Posted on

You can do these on Figma to work faster

Figma became popular these days to design a web/mobile user interface. That's because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.

Create a component

Design Component

Let say you need to make 50 buttons that has special style (color, border, corner, etc) on your design, and you make it all manually. That will slow your designing process just to make a bunch of similar looking button! What if you can make one button, style it, save it with its style, and you can reuse that? That's called component. In figma, you can easily make a component by right click one the object:

Creating component in figma

and then you can find your components in the Assets on the left sidebar. To use your component you can simply drag and drop from the sidebar to your canvas. One thing that useful about component is if you want to change all the buttons you just need to change the master component.

Adjust objects using smart selection

Smart Selection on Figma

Smart selection is a thing. It helps you to adjust spacing and arrangement objects faster. Especially when you using a grid view on your design. Select all objects, and you can see pink mark, next you can just drag one object to another to rearrange them and click and slide on the space between objects to adjust their spacing. For more info you can refer to their blog post here

Save your colors

Colors

Choosing color is another challenge when designing an user interface. Usually on design we'll need to define colors for primary color, secondary color, color for headline text, etc. On figma you can save your color styles, here's how:

Add color styles

  • Click your object first
  • On the right sidebar at Fill section, change the color as your desire
  • Click the four dots
  • Click plus sign
  • It will bring up "Create new color style" modal and you can name your style
  • Click create style

Selecting color

Your new color style is saved, you can use it by choosing Local Colors on below the color picker.

There are some things you can do to work faster with Figma. If you know other tips just drop it on comments, thank you for reading :)

Top comments (0)