Design systems prove to be in quite the demand, though their creation requires considerable effort. Cross-functional collaboration is essential in such a project, and the time spent working on a design system is well invested.
Kiwi aims to fix these initial high costs of creating a design system.
The reasons for implementing a design system withing your business are many, but the fact remains that they are still a major undertaking. From the compenents’ initial creation to their constant updating to fit product development, design systems are a laborious project.
An opportunity naturally then arises for a system that can fit the ever changing nature of a business.
Design systems and components essentially fulfill the same purpose: serve as a single source of truth in design. What they obviously differ in is complexity. Therefore, it is only natural to employ components in the construction of a design system. The extent to which we can do this is also magnified by Figma’s auto layout and variant features. Combine all of these along with a few fundamental rules, and you have yourself a versatile and editable design system.
Components are elements that enable you to maintain a consistent design. While working on Kiwi, we have devised several types that distinguished themselves through advancing complexity:
Base elements are components that stand on their own and are usually made up of text and icons. Base elements are essentially the founding pillars of any component in the design system. They represent the first auto-layout grouping. You will find them at the top of the Master Sheet.
Examples: text elements, icons
A basic component is a component that is made up of base elements. Is structure will exhibit:
Examples: buttons, chips, inputs, dropdowns, etc.
Any type of component can become a Master Component. To have this distinction, a component simply benefits from having one or more layers of nested components. The Master Sheet is simply home to all the levels of Master Components of a design element.
This hierarchical constitution of a master component aims to enable bulk editing of variants. Variants are the final product in the chain of component creation. Changes in the chain of component creation travel downward, so any edits above variants will ultimately affect them as well.
While the Master Sheet houses Master Components of a single design element, the Style Sheet is home to the entire design system’s colors, effects, and typography. Any component must have the published styles and effects applied to them for mass editing to work. Unlinked and undocumented colors and effects impede keeping the system organized. Should you want to edit or add a new style, we suggest doing so from the Style Sheet to keep track of all changes.
We classify edits by the type of element that they are affecting:
