Components in Figma | Figma Blog (opens in new tab)
Figma’s 2016 Components release applies software-engineering ideas such as composition, inheritance, and overrides to interface design. Components let designers reuse shared elements as linked instances, so updates remain consistent while local customizations are preserved. The result is a design workflow that supports both systematic reuse and creative flexibility. ## Designing with Components - Components help designers break complex interfaces into smaller, understandable parts. - Reusable elements can appear in multiple locations, at different sizes and with local modifications. - Unlike duplicated copies, component instances remain connected to their source. - Updates to the original component are automatically reflected across all instances, improving consistency and reducing repetitive work. - Examples include repeated address-book rows containing shared typography, spacing, icons, and graphics. ## Figma’s Design Goals Figma aimed to make Components: - Easy for new users to learn. - Powerful enough for advanced design systems. - Flexible throughout the design process. - Low-overhead, so systematic design improves speed without limiting experimentation. ## Creating and Using Instances - Any frame or selected object can be converted into a component through the toolbar. - Duplicating, copying, pasting, or Alt-dragging a component creates instances rather than independent copies. - Instances can move independently on the canvas while retaining their connection to the source component. - Changes made to the main component propagate immediately to its instances. - Certain internal properties, such as the position and size of nested objects, are restricted to make components easier to maintain. ## Style and Property Overrides - Instance changes are treated as overrides of the original component’s properties. - Designers can override fills, strokes, colors, widths, and properties of nested layers. - Overrides remain intact when the source component changes. - Properties that were not overridden continue to update from the source component. - Overrides can be removed with the “Reset Instance” action. ## Complex and Nested Components - Components can contain instances of other components. - Combining nested components makes it possible to build larger systems from smaller, reusable parts. - Designers can add instances to an existing component or create a new component from selected instances. - Nested components are intended to work like other Figma objects, keeping complex systems manageable. ## Constraints - Components can be combined with Figma’s Constraints feature. - Constraints allow elements to respond to changes in size and position. - Together, components and constraints support reusable designs that adapt more intelligently across layouts. Components provide a practical bridge between design and software development: create shared building blocks once, reuse them widely, and preserve controlled customization through overrides. Teams building consistent, evolving interfaces can use them to reduce duplication while keeping designs adaptable.