You can do these on Figma to work faster
September 20, 2020Figma 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
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:
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 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
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:
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
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 🙂
🙌🏼Share this
📋More articles
Tools that I usually used as a Web Developer
For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.
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.
Kindle has changed my reading habits
Reading on a physical book and reading on a kindle give different experience. Those two things feel different when open the next page, highlights the text, holding it while reading, and so on. On this post, I wanna share with you what experiences that kindle will give to me compared to physical book.
Protect your form against spam bots
I was in the middle of embedding a third-party form on the website. The form snippet is just like the usual HTML form and the website is built using Next.js. At first, I thought it’s working well, fill the fields and submit it. But my team was told that we received various weird submissions with