Components in Figma
Today we are excited to release Components in Figma. By bringing concepts like composition, inheritance and unlimited overrides from engineering to design, Components move us closer to a world where we are able to easily reason about design systems as we go about our day to day work.
Just two weeks after I started working at Figma — almost a year ago — we kicked off the project of building Components. As someone who comes from a background in both design and engineering, I’ve noticed the way we design is very different than the way we build software. People expect complex user interfaces that are alive, connected and always improving. How can we keep up as designers? Engineers have already figured this out.
Components are a popular concept in engineering used in everything from iOS, Android, macOS, Windows, Unity, HTML and other technologies used for actually building user interfaces and games. React for instance is a way of building large UI systems without the headache of needing to understand everything at once, through composition of smaller parts into more complex behavior.
What if we applied this concept to design tools?
Designing with Components
Composition is a foundational part of design. It allows us to reason about a smaller part of a greater system and enables us to reuse existing parts saving us time on otherwise repetitive and tedious work. Adding the concept of components to a design tool makes the composition of complex designs more consistent and more efficient.
For instance, an address–book app might have a table which lists one contact per row. Designing a good list view requires finding the right type size, spacing, icons and other graphics. The same component can be used in many places at once, each at a different size with local modifications and differences:
Not only does this make it easier to reuse existing parts quickly but components also help with consistency. And since reused components are not copies, but instances of the same component, any changes applied later are immediately reflected across your design.
Our Approach to Components
At Figma, we believe that design tools should not get in the way of your creative work. Many tools have tried to tackle the problem of reusable design, but we believe our implementation is different.
When designing Components, our goal was to make them:
- easy to learn for anyone to get started
- powerful enough for advanced users
- flexible enough to work throughout the design process
Designing systematically shouldn’t slow you down — it shouldn’t require more overhead. It should allow you to build things faster and more consistently, without blocking your ability to be creative and solve new problems.
How it works
In Figma, Components works just like Frames, with the twist that duplicates of a component creates new instances rather than copies. We start out by selecting something that we want to make into a component and click the “Create Component” action in the toolbar:
At this point it’s just a Frame with a fancy purple outline. Well, until we create some instances.
We can hold the alt-key and drag, use the “Duplicate” action, or simply copy-and paste a Component to create instances:
With two instances, we now have three of the same thing. Each has an independent position on the canvas, but are otherwise identical.
Any change we make to our Component is immediately reflected in its instances:
There’s one important aspect that makes instances special: they are reflections of the component they represent and allow overrides to various properties, but restrict a few properties like position and size of objects inside, all to make it as easy as possible to manage and maintain Components.
Since any change to a Component is reflected in an instance, what happens if we change something inside an instance? Does that change simply disappear when the Component is modified? No, that’d be crazy.
Style and Property Overrides
Changes made to instances can be thought of as overrides of the original Component’s style and properties. Let’s see what happens if we override the color and stroke in our instances, and then change the original Component:
What happens here is that we said “for this particular instance, let the fill color be dark grey, and for this one let the color and width of the stroke be red and 6px, no matter what the values are for the original component.” When we later make changes to the Component, our overrides remain, but other properties which we didn’t override are reflected verbatim.
Any property of any part of an instance can be overridden, including any sublayers and their properties. This makes the possibilities virtually endless.
When we change our minds and want to clear the overrides from our instances, we can simply select the things we want to reset and choose “Reset Instance.”
Complex components
Earlier in this article we spoke about creating systems out of easily-comprehensible components and that components can contain other instances to form more complex behavior. Such “nested components” are as easy to create and work with any other object in Figma. Simply add an instance into a component, or create a new component from one or more selected instances:
Constraints
Figma is powerful in the way we can combine several features together. Constraints is one of these features that when added to a design, allows a whole new dimension of creative expression, especially in how things react to various sizes and positions:
Read more about Constraints in Grid Systems for Screen Design
This release of Components is just the beginning for us, but it is the foundation for a series of steps we are taking to bring design closer to engineering. As design becomes more complex and more people become involved in the design process, it will be even more essential that our tools become smarter and help us do work that can be automated so we can focus on solving design problems. Try it out and let us know what you think!
