Components and Instances

By the end of Section 2 the habit row exists on the Today screen, twice on Habit detail (“Similar habits”) and once in a search result. Then the brief changes: rows need a 16 px corner radius instead of 12. You find three of the four copies. The fourth ships with the old radius, and a sharp-eyed user posts a screenshot.

Components exist so that a design decision lives in one place.

Main components and instances

Select the habit row frame and press Cmd+Option+K (Ctrl+Alt+K on Windows), or use the create component button in the toolbar. The frame becomes a main component, shown with a component icon in the layers panel. It is the source of truth. Move it to the Kit page you created in Lesson 1.1, so the screens hold only uses of it.

Every copy you place from now on is an instance: a linked copy. Drag one from the Assets panel, or copy the main component and paste it. Change the main component and every instance updates, in this file immediately and in other files once you publish it as a library (Lesson 3.5).

Overrides: what an instance may change

Instances are not frozen. You can override content and appearance on any instance: change the text (“Read 20 pages” to “Drink water”), change a fill, hide a layer, or swap a nested instance for another component. Those are everyday edits and do not break the link.

What you cannot change on an instance is its structure. You cannot add a layer, delete one or reorder children; you can only hide what is there. (The one exception is a slot, an area a component author marks as open for free content, which you meet in the next lesson.) That limit is deliberate. Structure is the component’s job, and if every instance could rearrange itself, there would be no component left.

Overrides have one important rule: an overridden property stops following the main component. If you changed one row’s streak color to red for a “streak at risk” mock-up, and later the main component’s streak color changes, that row keeps its red. Figma keeps your override because it assumes you meant it. To bring a property back in line, use reset overrides from the instance’s options in the right sidebar.

Build small, then nest

Look at the habit row and find the pieces that appear elsewhere. The check button also appears on Habit detail. The habit icon, a rounded square with a glyph, appears in the New habit sheet’s icon picker. Make those components first, then use their instances inside the Habit row component:

Kit page
├─ Check button          main component
├─ Habit icon            main component
└─ Habit row             main component
   ├─ Habit icon         instance
   ├─ Text stack         frame
   │  ├─ Habit name      text
   │  └─ Streak          text
   └─ Check button       instance

Now a fix to the check button, say a clearer focus ring, reaches every habit row on every screen and the standalone button on Habit detail. Each level stays small enough to understand.

Name components the way you named layers: by role. Figma groups components in the Assets panel by slash names, so Controls/Check button and Controls/Chip appear together under Controls. Keep the structure shallow; two levels is usually enough for a kit this size.

Detaching: the emergency exit

You can detach an instance (Cmd+Option+B / Ctrl+Alt+B), which turns it into a plain frame with no link. Sometimes that is right: a marketing illustration that borrows a row’s look, or a one-time exploration on the Scratch page. On a product screen, a detached instance is a future bug. It will miss every fix, and nobody will remember it exists until a user posts a screenshot.

Your row is now one component with linked instances. But Steady needs the row in several states: unchecked, checked, and missed yesterday. Making a separate component for each would be the copy problem all over again. Variants and component properties solve that next.