We use design systems to keep our components easily maintainable, consistent, and to make the design and development process much easier.
I follow Atomic Design principles from ideation and design of each component all the way to the implementation and templating of each page.
To help with managing the design system’s parts and components, I like to use Figma because it’s asset library can sync with all the associated mocks and prototypes. I can also install plug-ins to applications like Storybook that allow me to make updates to an component and push those changes to Storybook so that my front end dev can implement those changes.
Here are a few snippets of the actual design system for portfolio purposes.
The naming convention we use for each component is meticulously thought out to make the development process much easier. We name elements the same as their codebase naming so that when a developer is working on a design, they will have no need to guess what color or component they are meaning to use.
