Creating components in Figma - Formula Evaluation Walkthrough

Sample Data

This data represents design elements for a UI button and icon that will be combined into a component in Figma.

Cell	Value
A1	Button
A2	Text: Submit
A3	Color: Blue
B1	Icon
B2	Shape: Circle
B3	Size: 24px

Formula Trace

Create Component(Button + Icon)

Step 1: Select Button elements (A1:A3)

Step 2: Select Icon elements (B1:B3)

Step 3: Combine Button group + Icon group

Step 4: Create Component from combined design

Cell Reference Map

  A       B
+-------+-------+
|Button | Icon  |
| Text  | Shape |
| Color | Size  |
+-------+-------+

Arrows: A1:A3 and B1:B3 feed into the component creation

The Button elements in column A and Icon elements in column B are selected and combined to create the component.

Result

  C
+---------------------+
| Button with Icon    |
| [Submit] (Blue)    |
| (Circle Icon 24px) |
+---------------------+

The final component shows a button labeled 'Submit' in blue color with a circle icon sized 24px next to it. This component can be reused in designs.

Sheet Trace Quiz - 3 Questions

What is the first step in creating a component in Figma?

A Select and group design elements

B Export the design as an image

C Write code for the component

D Delete unused layers

Key Result

Creating components involves selecting design elements, grouping them, combining groups, and converting into reusable components.