Base Component Pattern: Your Design System's Template
Think of a base component as a master template for UI elements. Changes to the master instantly update every copy, ensuring consistency. Use it for repeated elements like buttons or icons that need slight variations.
Why it exists
To solve the problem of inconsistency and inefficiency in digital design. Without a central source of truth, updating a simple button across dozens of screens requires manual, error-prone work. The base component pattern creates a single, updatable source to ensure designs remain consistent and scalable.
The mental model
A base component is like a master document template. You create the main template (the base) with all the core styling. Every document you create from it (an instance) inherits that styling. If you update the master template's font, all linked documents automatically update, but you can still change the specific text within each individual document without breaking the link.
How it works
In a tool like Figma, you select a design element and designate it as a component. This 'master' or 'base' is stored in your assets library. You create 'instances' by dragging the base component onto your design canvas. Any structural or style change made to the base (like border radius or fill color) is instantly reflected in all its instances. However, properties like text content can be overridden on a per-instance basis without affecting the base or other instances.
When to use it
Use base components for any UI element that appears more than once. This is fundamental for buttons, icons, input fields, navigation bars, and cards. It's the core practice for building a scalable and maintainable design system that can be shared across a team, ensuring everyone uses the same building blocks.
When not to use it
Avoid creating components for highly unique, one-off layouts or illustrations that will never be reused. Over-componentizing can add unnecessary complexity to your asset library. If an element is truly a single-use item, a simple group or frame is sufficient. The goal is reusability, not cataloging every single element.
One canonical example
Create a button component with specific padding, border radius, and font style. This is your base. Now, create three instances. On the first, override the text to 'Sign Up'. On the second, override the text to 'Log In' and the background color to a secondary brand color. For the third, use a variant defined in the base to set its state to 'Disabled'. If you later decide to increase the border radius on the base component, all three buttons will update instantly, while retaining their unique text and color overrides.
Interview question
If a designer updates the border radius of a base button component, what happens to its existing instances?
- a.All instances will update their border radius, but any unique text or color overrides will be lost.
- b.All instances will automatically update their border radius, while retaining any specific text or color overrides.Correct
- c.Instances will only update their border radius if they are manually detached from the base component first.
- d.Only instances without any unique overrides will update their border radius.
Why? this is the answer
The core principle of a base component is that structural or style changes to the base propagate to all instances, while instance-specific overrides (like text or color) are preserved. Option B accurately describes this behavior, ensuring consistency without sacrificing flexibility. Option A is a common misconception, as overrides are specifically designed to be retained.
Just read this? Test yourself on what you have been reading.
Read the original → designproject.io
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on ui design — each one lists the topics its interview covers.
See open roles