Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma
Webdesign

Figma Component Tips

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Vector Tips
Figma Layout Tips

Figma allows us to design with components; repeatable objects which behave according to sets of rules which we define. Let’s run through some tips and tricks to help you make the most of components.  

Watch Tips

1. Combine Components to Propagate Changes Easily

A button, for example, might be a component comprising a shape object and a text object. We might have multiple instances of that button, each one slightly different but all adhering to some basic layout and display rules. On some instances, we might choose to remove the fill, leaving just a stroke, in which case we would override the fill color. When this happens, if we alter the component’s fill color all instances would reflect that change, except the one where we chose to override the fill.

But if we alter a property which hasn’t been overridden, those alterations would be visible across all instances of the button.

This manner of working with instances can be a really helpful mindset to get into when building UI designs.

Combine Components to Propagate Changes Easily

2. Create Symmetry by Flipping Components

If you want to create symmetry or mirroring, create a component out of one half of whatever it is you want to use. Create a second instance by holding down ALT and dragging the original, then press SHIFT + H to flip the duplicate. Now, whenever you alter the original, the duplicate will also be altered, but in reverse.

Create Symmetry by Flipping Components in Figma

3. Create Repeating Patterns by Tiling Components

You can use components to create seamlessly tiling backgrounds and repeating patterns. Begin by creating a single tile component at whatever size you need, then create more instances by holding down ALT and dragging the original, preferably a couple of times along each axis. Then, tweak the original tile to see your changes echo across all tiles, until the patterns match up seamlessly.

You’ll then be able to export that original tile as a standalone image, to use it wherever you need perfect tiling.

Create Repeating Patterns by Tiling Components

Figma Learning Resources

Those three tips should have demonstrated to you how useful components can be in Figma. To help you take things to the next level we have a series of Figma courses on Tuts+:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.