A component library is a collection of reusable interface elements — buttons, input fields, cards, navigation bars, icons — that you define once and then reuse throughout a prototype. In Figma, you create a main component and then place instances of it wherever it is needed; editing the main component updates every instance at once. This is the practical mechanism behind the design principle of consistency: instead of manually keeping twelve buttons looking alike, you maintain one definition and let the tool propagate changes.
For this course, components matter because your interface project will likely involve many screens that share the same controls. Building a small library early saves time, reduces visual inconsistencies that confuse users, and makes late-stage changes feasible rather than painful. Variants extend this idea by grouping related states of the same element — default, hover, pressed, disabled — under one component, so you can swap states from a tidy set of properties rather than hunting through a sprawling layer list.
As you watch the three videos below, pay attention to four things: how an existing selection is converted into a main component and what visually distinguishes a main from an instance; how variants are organized and named so the property controls read sensibly; how component properties let you expose text, booleans, and nested instances for swapping; and where components live once created — the Assets panel and, for shared work, a published team library. Try each step in your own file as you watch; components are easier to understand by building than by reading about.
A short official tip video that defines what a component is, explains the reasoning for using them, and demonstrates the process of creating them in Figma. It should cover the relationship between a main component and its instances, which is the core concept behind every reusable library. Expect the practical workflow of selecting existing elements on the canvas and turning them into a component.
Produced by Figma itself, so the interface and terminology match the current tool, and it directly addresses the first two subtopics — what a component is and how to create one from existing elements.
This tip explains what variants are and how to combine related components into a single variant set, including guidance on naming variants so the resulting properties are readable. At roughly ten minutes it is the longest of the three, allowing time for the naming conventions that trip up most beginners. Expect to see how multiple states of one element are managed under a single component rather than as separate items.
It is the dedicated treatment of the component variants subtopic, from the official Figma channel, and its focus on naming addresses the most common source of messy, unusable variant sets.
This video introduces component properties and walks through creating them. Properties are the mechanism for exposing configurable parts of a component — such as text content, the visibility of an element, or which nested instance appears in a slot — directly in the right-hand panel. It should clarify how a single flexible component can replace many near-duplicate ones.
It covers the slots, nesting, and composition subtopic, showing how components can be parameterized and combined rather than duplicated, and it comes from the same official source for consistent terminology.
Together these videos give you the component workflow needed for the module outcomes. Creating components and instances is a prototyping feature named explicitly in MO3, and reusing them across screens is what makes a multi-screen interactive prototype (MO1) practical to build and revise. Variants and component properties support MO2 by making consistency and clear affordances (distinct default, hover, and disabled states) easy to maintain across your whole file. Supplement the videos by exploring the Assets panel and team library publishing in your own project file, since those are touched on only briefly here.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.