Step 1: Select or Create a Component

• Pick an existing component or whip up a new one. Just select the elements you want and hit Create Component in the top toolbar. Or, if you’re into shortcuts, use Ctrl + Alt + K on Windows (Cmd + Option + K on macOS).

Step 2: Access Component Properties

• With your component selected, head over to the right-hand properties panel. Look for the Component section. This is your control center for all dynamic properties.

Step 1: Create a Text Layer

• Inside the component, either create or select a text layer.

Step 2: Convert to Text Property

• In the properties panel, find the Text section. Click on the input field to turn it into a text property by enabling the Content setting.

• Give the text property a name by clicking the property name field. Something like Button Label or Header works great.

Step 1: Select an Element

• Pick any element within your component that you want to show or hide dynamically, like an icon or a secondary label.

Step 2: Create Boolean Property

• Go to the properties panel on the right, and find the Layer section.
• Click on the + icon next to the visibility (eye) icon.
• Choose Boolean and give it a clear name, like Show Icon.

Step 1: Create Variants

• With your component selected, click on the + icon next to Variants in the properties panel to create multiple states or versions of the component, like Default, Hover, Active.

Step 2: Define Variant Properties

• Once the variants are created, you can define properties for each. For example, color changes, size adjustments, or different text.

Step 3: Add Variant Property

• In the right-hand panel, under Variants, click Edit. Define naming conventions like State with options Default, Hover, Active.

Step 1: Create an Instance

• Drag an instance of your component onto the canvas from the assets panel or use Alt + drag on a component.

Step 2: Update Dynamic Content

• With the instance selected, the properties panel will let you update the text, toggle boolean properties, and switch between variants as defined earlier.

Step 3: Utilize Property Controls

• Use input fields for text, checkboxes for boolean properties, and dropdowns for variants to make each instance unique without breaking its connection to the main component.

By leveraging these steps effectively, Figma's component properties can significantly boost the efficiency and dynamism in design workflows, ensuring better consistency and quicker iterations.