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.
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.
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.
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.
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+:
FREEUI 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!
We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post