Get the most out of Figma with these power features

portrait of Hessel

Hessel Beumer

Written by


Published


Topics

  • Design

At Yummygum, Figma seamlessly integrates into our daily workflow. Navigating the ins and outs of this tool is crucial for maximizing efficiency and overcoming any potential limitations. You  already know a few (perhaps because of our blog post about our 10 favorite Figma plugins) but in this blog post, I'll delve into 8 essential Figma features. Features that not only elevated our understanding but can also empower your workflow.

Copy as PNG

We believe in the power of sharing early and often to increase our efficiency and make adjustments in an early stage where needed. Here's a neat trick for a smoother sharing experience: after selecting an artboard (or section/element/component for that matter’ ), simply hit cmd + shift + C to swiftly copy your design to the clipboard as a @2x PNG. It's a quicker alternative to manual selection, ensuring your downloads folder stays tidy and clutter-free.

Double-clicking the icon next to the layer name locates an element and zooms in on it.

Zoom to layer

When dealing with extensive projects filled artboards, locating the exact element or quickly zooming in on something can feel like finding a needle in a haystack. Fear not! A simple trick is to double-click the icon next to the layer name. This transports you directly to that layer, centering it within your canvas. And for even smoother navigating within the group just hit the tab key. It's the little joys of making big projects feel a bit more manageable! Example above shows our work for Edgar.

Holding down the option key while double-clicking on an image adjusts the cropping

Crop image

Simply hold down the option key and double-click on an image frame to swiftly adjust the cropping in no time. Example above shows our work for The Feed.

Holding down option key while aligning items within a frame, aligns them relative to each other.

Align multiple layers

Effortlessly align multiple layers within a frame by holding down the option key and selecting the align icons in the top right. Experience small changes in the align icons as you hover over them. Example above shows our work for The Feed.

Holding down shift key while resizing elements with your cursor resizes elements using your nudge amount.

Change by nudge amount

Hold down the shift key as you resize with your cursor in the pixel value fields This method ensures that changes take place in increments set by your default nudge amount (8 at Yummygum); A useful technique that seamlessly applies to width, height, padding, and spacing values. Example above shows our work for Vio.com.

Select all with…

In Figma, there's a bunch of cool ways to select layers. Hit cmd + / type "select all," and you'll see some fun options like select everything with the same properties, effects, or text style. Alternatively you can use plugins like Similayer for even more controls

Using a 0px width and height frame helps design pseudo elements in edge cases.

Zero frame

In certain situations, it can be practical to create a frame with 0 width and height to ensure the parent form retains its original size. This proves useful for elements like text links with customstyling or layers such as patterns that are typically locked yet need to either just exist or have a parent container. To achieve this, add a frame to your file and adjust the width and height values to 0.001. Examples above shows our work for Helixers.

Import multiple images

Easily import several images using command + shift + K from within Figma. Decide whether to place or discard them. Click within your design file to paste individually, and for a customised size, hold down shift while dragging.

After going through these 8 tips, if you're eager to learn more about hidden features or have some hidden gems that might have slipped past us, please let me know! @ me on X. Our enthusiasm for learning is endless, and we're always eager to discover more!


Make your project our next obsession.

Let’s talk

We can't wait to talk about your ideas, goals, needs and dreams. Let's set up a call.

Start a project