This document uses so many terms of art, I don't know where to start understanding what special meaning "base component" is infused with. As a software engineer, I can't tell how much the learning here applies to me – and how much is specific to Figma's "components" concept.
I also have no idea what this guy is talking about but I can tell you "has a" is always better than "is a" and that inheritance is always a huge mistake. Even in UI.
It's entirely specific to Figma - the whole blog is, but the article pages should really have some kind of indication to avoid confused recipients of direct links.
Base components are a pattern really only used by designers building UIs in Figma.
The idea is you create a "base" component (let's say a button), then create more components that wrap the base component and apply overrides on top (like a different background color).
If you want to adjust the size of all your buttons, you edit the base component and your changes propagate to all the other components. [1]
This of course leads to a tangled mess of dependencies when you start building complex UIs in Figma, but it is the only way to make mass changes without having plug-ins automate it, or doing the tedious task of manually updating a bunch of components one by one.
I used to use .base components before, but IMHO with the latest Figma updates they are not needed anymore. Editing variants is superfast with the layer multiselect tool.
I created and maintained a fairly large design system that I did entirely using .base and it brought more pains than gains, so I redid the design system using a more modern approach and with component properties and some js magic and superhappy :)
11 comments
[ 2.2 ms ] story [ 46.1 ms ] threadThe idea is you create a "base" component (let's say a button), then create more components that wrap the base component and apply overrides on top (like a different background color). If you want to adjust the size of all your buttons, you edit the base component and your changes propagate to all the other components. [1]
This of course leads to a tangled mess of dependencies when you start building complex UIs in Figma, but it is the only way to make mass changes without having plug-ins automate it, or doing the tedious task of manually updating a bunch of components one by one.
[1] https://youtu.be/vVPSYSziRFY
I used to use .base components before, but IMHO with the latest Figma updates they are not needed anymore. Editing variants is superfast with the layer multiselect tool.
I created and maintained a fairly large design system that I did entirely using .base and it brought more pains than gains, so I redid the design system using a more modern approach and with component properties and some js magic and superhappy :)