Component

How it is used

In Figma, a main component controls all its instances, and variants cover states such as default, hover and disabled. Developers build matching components in code, so designers and developers should use the same names.

Example sentences

1. I turned the product card into a component so we can update it everywhere at once.

2. This date picker isn't in our component library yet.

Common collocations

• reusable component
• component library
• create a component
• component variant

Related terms

• design systemA shared collection of reusable components, design rules, tokens and documentation that keeps a company's products consistent and helps teams build faster.
• UI kitA ready-made collection of interface elements, such as buttons, forms, icons and navigation bars, that designers drag into their files to build screens quickly.
• design tokenA named value that stores a design decision, such as a colour, font size or spacing amount, so designers and developers use the same value everywhere.
• cardA rectangular container that groups related content about one item, such as a product photo, title and price, and often links to more details.

This word in other fields

The same English word can have a different meaning in another field:

• component · Software Engineering
• component · Web Development
• component · Game Development

More terms: Design Systems

• style guide
• design pattern