@bankai/nxp-design-system v0.4.0
Nexperia Design System
Development
Install all dependencies
yarn installRun component documentation
yarn docsBuild the component documentation
yarn docs:buildPublishing the design system
For each new version you will need to run the yarn publish command. Here you will be asked to update the version of the package. Versioning is done using the semantic versioning method. This is the standard used for NPM packages.
Because this package will be published as a private package you will also need to have set up the requirements to do this.
Project organization
The architecture of a design system differs a bit from a standard software project. This is because a design system serves a dual purpose. On one side it provides a single source for shared components and styling for Nexperia on a code level and on the other side it serves as way to document and safe guard the design decisions.
Design Tokens
The most basic values are Design Tokens. In this DS they are first defined as core tokens (color pallette, used fonts and base sizes). These core tokens serve as a basis to define the semantic tokens.
UI Components: UI Elements vs UX Patterns
The DS only exports the UI elements as UI components. The patterns are merely recipes on how to best compose elements together to build common UI/UX patterns. By only defining the elements as components the DS remains flexible and the Designer and Developer are not forced to use a specific UX pattern for an application design.
Technical architecture
This project uses the React framework to construct its UI elements and UX patterns. the Design Tokens are defined in a JSON format and used by PandaCSS as a styling framework. Separating the design tokens into JSON format allows them to be used outside of CSS too (like in SVG).