To start new projects faster and more efficiently, I have designed my own Design System in Figma. This has been completely set up with all the necessary elements that serve as a foundation for other designs. I have designed each chapter from scratch: Typography, Color, Forms, Icons, etc. Taking into account WCAG guidelines, rules have been drawn up on how elements of a digital product should look. All these rules and provisions are clearly included in Figma by using variables and tokens. The Design System can easily be updated if necessary.
Characteristic to Design Systems are the different phases (feedback) in which an element can occur. For important elements such as form fields and CTAs, the correct rules have been applied for each phase. A user will recognize the phase in which the element exists. An example is given here of the input field and dropdown menu. Click on the button below for a view of the complete Design System.
In most Design Systems many values are defined as variables and other values like size, color, etc, as tokens. This is also the case with this Design System. Things like radius, spacing, elevation and padding are all determined by using variables and tokens, as well as color and buttons. This way, changing design elements throughout the entire website is quick and easy.
For this Design System I created extensive color definitions. Each color is classified by category and meets the WCAG guidelines which is checked by means of a color contrast checker. The rich color palette can easily be used in other designs by means of variables. In addition, the colors are determined for each (feedback) phase. Click on the button below to see the design system in action by using it for my own ecommerce project.
For this Design System I have developed my own style and applied it to all elements to get a unique look and feel”. For example the use of thick strokes and small radius values combined with my own colors.