Nested components

Figma lets you nest components within components. This means you can structure them in all sorts of modular ways. Here are a few different ways to use nested components:

Building blocks

Often I will create a “building block” component, and use that as the basis for another component. For example, in these buttons, I have created a basic rounded rectangle for the button shape and turned it into a component. This component does not get published to my team library, instances of it just get used in other components that I build, like the actual button components (which do get published).

The advantage to this method, is that all of my buttons and button states make use of this base component (with style overrides applied) which maintains a link back to that base “building block” component. Should I need to make a globalized change, such as changing the button shape, I can simply go back and edit the original component and the change affects all of the components which are based off of it.

Each button nests the building block component within it, and applies style overrides to the base component to create the different states.

Instance swapping

Another advantage to nesting components is that you can swap/replace them out for other components. For example in the tile header below, I just have to build one component for the tile header, and simply swap out the nested component for a different one. If you are familiar with Sketch, you are probably already familiar with this concept, however, the interaction In Figma to swap out components is different (drag & drop).

Shortcuts:

To swap out a component — Hold option when dragging. To swap out a nested component (within another component, frame or group) — Hold ⌘ + option when dragging.

Instances of different icons can be swapped out for others from your document or shared team library.

Masking

Update: The usefulness of this method has been depreciated thanks to the introduction of global styles in Figma 3.0. To do this, make some swatch components (a shape with a fill), and put an instance of the component on a layer above the artwork you wish to mask. With both layers selected, apply a mask, and all you have to do to change the color is use the method outlined above to swap instances of the fill component, with another swatch.

Show/hide components

Because you can access the layer stack of each instance, there are times when it makes sense to house the various states within a single component. The simplest example of this is a checkbox or radio button. Rather than have two components (checked and unchecked), you can simply include the “checked” state in your component. Showing and hiding the checked layer will toggle the state.

Accessing the layer stack of each instance allows you to show/hide layers.

Shortcuts: Select the checked layer and press the Delete key to hide the layer. Alternatively, ⌘ +Shift + H, will also toggle the layers visibility.

Cropping components

Think of components as jacked up frames—all of the same things that you can do with frames also apply to building components, including being able to crop them.

Create a component, and configure the constraints within it—while holding ⌘, drag the frame of your component to crop the contents, or adjust the dimensions in the properties panel. The contents of your component may shift if you haven’t setup the constraints, so make sure you do that first. This is great for creating a “repeat grid” of rows/columns, or setting up tabular data. You can create more rows than you need, and use this method to show only the number of items that you want. Couple this technique with constraints, and you can even setup components which will hide or reveal content as their parent component expands and contracts. Make sure “Clip Content” is checked in your properties panel to see the cropped result.

Groups of instances can be assembled as components and then cropped using the “clip content” option.

Setting up the cropped grid components:

1. Setup your initial repeatable componentInstances of this component will get repeated for each row or column. This could include nested components, text boxes, image placeholders (shapes with a fill), etc.
2. Setup the constraints Configure the constraints for the repeatable element, think about how you want it to react in relation ship to the parent component (which will be your grid).
3. Adjust the frame sizeHold ⌘ while adjusting the component frame size to enlarge the dimensions of component so that you can build in the padding of your component into its overall size(if applicable to your design).
4. Duplicate instancesDuplicate your repeatable element, you can use the Pack Horizontally or Pack Vertically commands in Figma (under the Arrange menu) to make sure all the components are perfectly butted up against one another. This is why I recommend building the padding into your component.
5. Make your “grid” componentTurn your group of repeated instances into a new component.
6. Setup the constraintsSetup the constraints within your new grid component; think about how you want each of the grid items to respond when your grid container is cropped, and the direction it will expand.
7. Clip contentCheck off “clip content” in the properties panel. This will hide the content which exceeds the boundary of the frame.
8. Adjust the frame sizeHold ⌘ while adjusting the component frame size to crop the component to the desired amount.

Once you start setting up these grids, the possibilities are endless. Overriding text, symbols, and adding images are a breeze!

This technique, combined with “Place Images” (Shift + ⌘ + K), allows you to populate a grid with image content very quickly.