How to create large component sets in Figma | by Sepeda Rafael | Nov, 2021


For simplicity, you can create a component set (a component with variants) based on the basic “Cell” component that allows you to select the type of content, row height, and other options. However, in this case, the designers would have to manually combine cells into columns and then into tables each time. We can make life a little easier for them and create special components for columns.

To get started, I’ll use Auto layout to assemble a simple table column by combining several instances of “Cell” and one “Header”. At this point, I need to create a column with as many rows as I might need for design. Let’s say 8 (I rarely use more in my projects). If you need more, add as many as you need. However, it’s important to compromise here, as more rows can increase the number of variants you will need to create.

So that the columns can be further resized, for each cell and header within the Auto layout I will set the horizontal resizing to Fill container.

Horizontal resizing
Horizontal resizing

Now I need to rename all the even cells to “Even cell”. This is to make it easier to select them for the zebra-style columns.

I will create a copy of the column and select all “Even cell” cells in it.

In this particular case, I have not many cells and, basically, I could just select all “Even cell” cells manually. However, since further working on the component I will need to do this in a more complex objects, let’s just figure out how to do it automatically.

I will use a wonderful plugin Find in page.

After installing the plugin, it takes a few simple steps to select all items by name:

  1. Select the copy of the column I created.
  2. Run the plugin.
  3. Specify the settings:
  • Phrase to look for: Even cell
  • Search in: Selection
  • Match whole word: On
  • Search for: Layers

In this example the design is simple, with few layers, so the search is quick and the plugin will select all the “Even cell” layers, i.e. it will select all the even numbered instances of a cell. All I have to do after is change the background color to whatever I want the even numbered rows to use based on my original template.

I will repeat the procedure for the same column and now use the plugin to select all the dividers in the cells. They are called “Divider” and I need to hide them, as they are not needed for zebra tables:

  • By selecting Object > Show/Hide Selection in the menu.
  • Or by using hotkey ⌘ + Shift + H.

Because this will also make the header separator disappear (which I don’t need), I need to bring it back. Since it is only one cell, I will “unhide” it manually.

Columns for 2 table types



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here