Objects in Figma can have a range of properties applied to them. In this part of our Figma tips and tricks series we’ll look at ways to work with properties, better and faster!
1. Copy Single or Multiple Properties Between Objects
In Figma you can copy all properties from an object, or you can copy them one at a time. To copy all the properties an object has: select it, then go to Edit > Copy Properties, or use the shortcut (CTRL or CMD) + ALT + C, then select your new object and go to Edit > Paste Properties or hit (CTRL or CMD) + ALT + V.
To copy just one of the properties applied to an object: select the object, then go over to the Properties panel and click just to the left of a property (such as Fill). This will select that one property, so you can then hit (CTRL or CMD) + C to copy. (CTRL or CMD) + V will paste that property onto the selected object.
Holding SHIFT whilst selecting individual properties will allow you to specify exactly the ones you want to copy.
2. Smooth Out Corners With “Squircles”
You can control how corners are rounded by using something known as “squircles”. On an objects with rounded corners, click on the Independent Corners option in the properties panel to control each corner independently, then next to the radius values hit the menu icon to open up the Corner Smoothing slider. Changing this value will alter the way the curve is calculated, giving different corner smoothing effects.
3. Toggle Italic, Underline, and Bold
Much as you would in a word processing application, you can use shortcuts to toggle italic (CTRL or CMD) + i, underline (CTRL or CMD) + u, and bold (CTRL or CMD) + b when a text object is selected.
4. Scrub Values
Instead of typing values in, you can scrub through values in a settings field by holding down ALT or OPTION (depending on your platform), then dragging left or right in that field.
5. Nudge Color Values
You can refine the color picker values (or field) by hitting the up or down arrow keys. Nudge with larger increments by holding down SHIFT at the same time.
The way the color changes depends on which part of the HEX code is selected; either one of the three value pairs, or the whole code.
Figma Learning Resources
Those were five helpful quick tips for working with properties in Figma. Take things to the next level by watching our series of Figma courses on Tuts+:
- UI DesignIntroduction to FigmaAdi Purdila
- FigmaBeyond the Basics: FigmaAdi Purdila
- FigmaA Guide to Prototyping in FigmaAdi Purdila
- Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
The UI kits used in this tutorial are fully compatible with Figma and available from Envato Elements: