For over a decade product designers have had the luxury of working with visual design tools that allow us to easily create components. This feature has sped up our workflows and drastically reduced inconsistencies and errors in our mockups and prototypes.
Naturally this was a huge win for creating and managing common bits of interface. Components save us days worth of work, alleviate tons of stress, and protect our work from inconsistency. But having a better way to manage things like buttons, form elements, cards, and nav-bars is just one piece of the puzzle. What about managing more foundational visual elements, like spacing, color, typography? Figma has a "styles" feature for color and text, but still dozens of folks have posted in the Figma Community Forum asking for a true token feature. And it doesn't stop there with those bedrock particles. For years people have been asking to be able to edit component instances, especially for anything list-like (such as tables and dropdowns). They're tired of the antiquated, and downright dangerous, hidden layer workaround. And if it's not that, they're running into conflicts between Figma's auto layout and prototyping functionality, where, despite building a well-constructed component in their library, they can't produce basic experiences like opening a dropdown menu in a modal because of z-index limitations.
These are all painfully frustrating dilemmas, and they're blocking talented designers from delivering their best work. Folks typically turn to plugins to work around these things, but they often produce results that feel inefficient, messy, or so unstable that they're downright risky. Figma is, as of today, the industry standard tool for product designers... so how is it they've gotten away with these gaps in their premier product's native feature set?
Well, what if I told you the gaps were never there to begin with? That Figma has already had the ability to support token-like management of things like spacing. That we've been able to edit instances this entire time?
The answer is components! The solution has been right under our noses, at our fingertips, well within our grasp since the moment any of us signed up for an account. Figma's implementation of components has been so thoughtful that all it takes is a bit of creative thinking to give components more jobs and responsibilities that will liberate our workflows. I'm talking gains to the same degree as when we all switched from Photoshop to modern design tools. Making this mental shift has the potential make you fall in love with design again by freeing you up to produce at the speed of thought.
You want editable instances? You need to learn how to use ✂︎ Placeholder components.
You need to iterate on a component and try it out in-context, but dread wasting time making dozens of repetitive updates as your ideas morph and change? ⍚ Base components will save you hours of work.
You're tired of making the same text overrides time and time again? Learn to use ⍂ Starter kit components and they'll do the work for you.
Those are just 3 examples of 7 unique types of components:
◈ Interface representatives are probably what come to mind when you hear the word "component." They're the "LEGO blocks" designers use to piece together mockups and prototypes, and they get named after bits of interface they represent: buttons, modals, nav bars, footers, form elements, etc. Their job is to take the visual design language of a product's brand and apply it to functional parts of a product, be it a website, mobile app, or software.
If you build using atomic design principles, which I recommend and encourage, you have smaller ◈ interfaces reps nested inside your bigger more complicated ◈ interface reps. Your "atoms" come together to form "molecules", those "molecules" compose "organisms", and eventually sets of "organisms" build up into "page templates."
◈ Interface reps are fine on their own, but when used in concert with the other types of components they help designers work even faster and smarter than ever before! In fact, the other types all exist to supprt ◈ interface reps. They are the center, the core, of the Figma component universe.
As a follow up to this post, I wrote a lengthy guide that goes deep on ◈ interface reps; I cover their definition, best practices and pitfalls to keep in mind when building, and detailed examples of how you can use ◈ interface reps alongside the 6 other types of components.
<a href="https://www.alicepackarddesign.com/blog/interface-representatives-are-the-center-of-the-figma-component-universe" class="button secondary" style="padding:16px,0px; margin:auto;">Everything you need to know about ◈ interface reps</a>
✂︎ Placeholders are often very simple components, sometimes just a single frame with a funky fill-color that's not part of your design system (this color makes it easy for designers to recognize it as a placeholder and not mistake it for something like an empty state). Some folks call these "swappers" or "slots." Where ✂︎ placholer's main components live, or whether you have one or multiple, matters very little because ultimately their job is to be swapped out with another component.
⍚ Base components can help you create strong foundations for ◈ interface reps, especially when you're working on and testing out new ideas. They allow you to create editable, flexible scaffolding and experiment with different versions without the need to make tons of repetitive updates as your ideas evolve. Because ⍚ bases can handle many different jobs, I've found it beneficial to be explicit about what job any given ⍚ base component is responsible for. Here's a sample list of things ⍚ base components can help you control:
<a href="https://www.alicepackarddesign.com/blog/base-components-are-still-useful-just-not-in-your-ui-library" class="button secondary" style="padding:16px,0px; margin:auto;">Everything you need to know about ⍚ bases</a>
✎ Content carriers are concerned with the content a component holds: the type of content, how much content, how that content behaves (e.g. does it break lines or not), and what it looks like (e.g. what type and color styles, what image cropping rules, etc.). Content is injected into them by way of overrides instead of swapping (remember, swapping is a job for ✂︎ Placeholders).
If you need to build fast, a ⍂ Starter kit is a great tool to have in your belt. ⍂ Stater kits are meant to be detached from their main component. They are simply collections of instances ◈ interface reps, that get used together often. The time-saving aspect is in not having to drag in dozens of tiny individual components from the asset panel, one by one. ⍂ Starter kits can also save you from needing to make the same old text overrides again and again. How many times have you overriden a text input field's "Label" layer to say "First name"? Probably a lot! ⍂ Starter kits can come in a lot of different sizes with different contents:
These components are for internal use only. They're not part of the product that designers are building. ✍︎ Annotations exist to help organize and make sense of Figma files. Unlike the other components, ✍︎ Annotations are only concerned with file hygiene. The only way they interact with other components, for example ◈ interface reps, is to make information about that ◈ interface rep more discoverable to anyone who might be exploring the Figma file.
Ridd, the man behind Figma Academy, recently posted a thread about a type of component that makes prototyping much easier and waaay more efficient: ⎌ Switchboard components. The same way we wouldn't not componentize a piece of interface we're using in more than one place, why would we draw the same kind of prototyping noodle more than one? That's what ⎌ Switchboards are for. They're particularly handy for larger prototypes that need to offer an "open world" or free-roaming experience (as opposed to following a scripted pre-defined path of clicks).
Want to know why I picked some of those pictograms, or why they're prefixed to the names to begin with? Looking for detailed examples of how these components get used in practice? Eager for a swipe-file that you can use to take some of these types of components for a spin in your own work? I highly recommend signing up for my newsletter to stay in the loop. I'm working on more detailed guides for each type of component above that include best practices, how-to-build tutorials, and mistakes to avoid. I'd also love your input on these concepts! My newsletter is the best place to start a discussion with me and share your thoughts.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. Readers get extra insight behind every post.
