EnterprisePricingCustomersLog in
Thomas Lowry
Thomas Lowry
Designer Advocate at Figma

Combining techniques

In the example below, all of the techniques above have been used to create an extremely flexible tile component that accounts for different states and variances for use within mockups and prototypes.

Here is a summary of a few of the different component variations:

components 8
Copyright © 2018, Open Text. All Rights Reserved.

A well-constructed component can take on many different forms simply by swapping out nested components, and toggling the visibility of layers.

components 9
Copyright © 2018, Open Text. All Rights Reserved.

Breakdown

Nested within the tile component, shown above, are a number of elements which can be turned on/off, or swapped to different components.

Icons
The icon throughout are nested instances and can be easily swapped out for other icons.

Tile content
The content area in the tile is also a nested component. To create the base tile component, there is a placeholder component with a red dotted line which outlines the dimensions, and also establishes its constraints within the tile. I can replace the placeholder component with my actual content grid components. Combining this with the cropped “clip content” method, I can display a version of a “repeat grid” view which will grow with the parent component.

Scrollbar
The scroll bar is simply a nested component whose visibility can be toggled if we want to communicate that the content inside is scrollable.

Truncation
A small vector with solid white to transparent gradient is situated above the tile title text component. It’s visibility can be toggled on or off to show our fade-out truncation effect when required.

Search
Situated within the tile header, is a search input component that can be toggled as well. Since this particular element is a also a nested component, it allows me to swap out different states of the input field from placeholder, to populated, to populated with focus.

Here it is in action:

Try Figma for free.