Components are one of the most powerful features in Figma, and auto layout is the companion tool that turns static designs into flexible, responsive assets. Together, they make it possible to build a design system where a single change updates dozens or hundreds of places at once. Learning how components and auto layout interact early in a project makes every later stage of design dramatically faster.
- Components are reusable design assets that exist as a main component and any number of instances that automatically reflect changes made to the main.
- Auto layout controls how child elements are sized, spaced, and aligned inside a parent frame, and it is what makes buttons and containers grow and shrink with their content.
- Constraints are a separate but related feature that governs how a child positions itself within its parent when the parent resizes.
This lesson is a preview from our Figma Masterclass Online. Enroll in this course for detailed lessons, live instructor support, and project-based training.
This is a lesson preview only. For the full lesson, purchase the course here.
The sections below introduce the core ideas behind components and auto layout, walk through building a reusable button, and explain how constraints and instance swapping fit into the same design workflow.
Creating Components and Instances
Any selectable object or group of objects in Figma can become a component. Right clicking and choosing Create Component is the quickest path, and the create component button also appears in the top right common actions area. Once created, a component frame turns purple in the layers panel, with a main component icon showing four diamonds. Dragging the component from the assets panel creates an instance, which is shown with a single hollow diamond and acts as a live copy of the main. Every instance follows updates made to its main component, which is the entire point of the feature.
Overrides and Updates
Changes made to the main component cascade to every instance, but changes made to a single instance are treated as overrides that stay local. Appearance changes like fill color and opacity can be overridden, and elements can be hidden on an instance, but new elements cannot be added and existing elements cannot be repositioned. What happens in an instance stays in that instance, and a right click reset brings everything back to the main component state. Overriding is useful for small variations like different text on otherwise identical buttons, but it can also suppress updates if the overridden property later changes in the main.
Finding and Restoring Main Components
An instance panel at the top of the right sidebar shows a small go to main component icon, and right clicking an instance also exposes the same action. If a main component gets deleted, Figma offers a restore component button that puts it back where it started. Because accidentally editing a main component can trigger unintended global changes, it is a best practice to keep main components outside the working design area. A dedicated section, above the frame hierarchy, titled something like Main Components, is the cleanest way to collect them, and section organization keeps frame names visible at every level.
Building a Button Component
Buttons are a classic use case for components. A simple button starts as a rectangle with a text layer on top, optionally grouped together. Turning that group into a component and creating an instance allows the text to be changed per instance while the rounded corners, fill color, and shadow all stay consistent across the design. The problem that shows up immediately is that changing the text in an instance does not resize the button, because the default frame is set to a fixed width. That is where auto layout enters the picture.
Adding Auto Layout
Auto layout can be toggled on from the layout panel or by pressing shift A, and it turns a frame into a container that lays out its children in a horizontal or vertical direction with configurable spacing and padding. On a button, switching the width and height from fixed to hug contents makes the button grow and shrink to match the text inside, and horizontal and vertical padding values control the breathing room around the label. Auto layout frames absorb the background rectangle as a fill color on the frame itself, which keeps the component tidy and removes the need for a separate background shape.
A few key auto layout concepts that apply to nearly every component:
- Hug contents sizes the frame to match whatever is inside, plus any padding, so the container breathes with the content.
- Fixed sizing keeps the frame at a specific width or height and is useful when extra room is needed for alignment.
- Horizontal and vertical padding values control the space between the content and the edges of the frame.
- The spacing between items setting controls the gap between children laid out horizontally or vertically.
Constraints Versus Auto Layout
Constraints handle positioning inside a parent frame, while auto layout handles sizing and direction. A child can be pinned to the top left, top right, bottom right, bottom left, or centered relative to its parent, and the constraint setting updates how the child moves when the parent resizes. Constraints are hidden by default and require a click on the constraints toggle to reveal the dashed blue indicators. Clicking the center alignment button on a single selected object also silently sets a center constraint, which is worth knowing so future changes behave the way the design expects.
Swapping Instances and Sizing Icons
Instance swapping is particularly useful for icons. Creating an icon library where every icon lives inside a frame of the same size makes swapping clean because the replacement slots into exactly the same position. Resizing a frame without scaling the artwork inside normally requires holding command on Mac or control on Windows while dragging, which is tedious across dozens of icons. A free plugin called Frame Resizer solves this by letting you select any number of frames and enter a target size, resizing every frame to the same dimensions while leaving the vector artwork untouched.
