If you have ever copied the same button across twenty screens, then changed its colour twenty times, you already know why components exist. A component is a reusable master element in Figma: change the master once, and every copy updates. Variants take that idea further by grouping related versions of one component, such as a primary button, a secondary button, and a disabled button, into a single set you can switch between. Used well, they keep a design consistent and save hours of repetitive work.
Start with one component, not a library
Pick a small element you reuse often, such as a button or a form field, and turn it into a component before you try to build a whole library. Select the frame, choose Create component, and give it a clear name that describes what it is, not where it first appeared. Button/Primary is more useful than Homepage button, because the same button will appear on many pages. Then use copies, called instances, everywhere else instead of duplicating the original. When you need a different label or icon, edit the instance properties rather than detaching it, so the connection to the master stays intact. If you are still learning how frames resize, read our guide to Figma Auto Layout basics.
Add variants for the versions you actually need
Variants work best when each variant changes one clear property, such as state, size, or style. A button set might have properties for type and state, giving you combinations like Primary/Default, Primary/Hover, and Secondary/Disabled without a pile of separate components. Resist the urge to create every possible combination in advance. Start with the versions your design already uses, and add new ones only when a real screen needs them. Too many unused variants make the set harder to browse and easier to misuse. Name properties in plain words your team will understand, keep the layer structure identical across variants so text and icons swap cleanly, and test each variant on a real screen before you publish it. A tidy set also supports a consistent design system later, because the same rules already apply everywhere.
Keep variants tidy as the set grows
As a project grows, review your components regularly and remove variants nobody uses. Check that names still make sense, that colours and spacing match your styles, and that new variants follow the same layer structure as the old ones. If two variants look almost identical, merge them and use a property instead. Document the set briefly: which variants exist, when to use each one, and which ones are off limits. A short note inside the file is enough, and it saves your future self from guessing. Components and variants should reduce decisions, not add them, so the test is simple: if a new designer can find the right variant in under a minute, the set is working.