🚀 Design system

A modern setup to collaborate between researcher, designer, developer and team leader 🎉

See Demo

I asked 20 people about design systems

Design System Survey

They work full-time as

• 5: UX Designers
• 5: UI Designers
• 7: Developers
• 3: Team leaders

Their company size

• 0%: 1 to 5
• 28%: 5 to 50
• 36%: 50 to 500
• 36%: more than 500

Does their company use such systems?

• 100%: yes

Who decided about using such systems?

• 80%: Team
• 15%: Team leader
• 5%: Other

Facts about Designers

• 80%: call such systems Design systems

Facts about Developers

• 80%: call such systems Styleguides

Evaluation

The list elements are not sorted by priority

People want to

Highlevel jobs

• Save time
• Maintain consistency
• Ensure correct implementation
• Share thoughts on decisions

Lowlevel jobs

• maintain their work in the most simple way
• reduce communication efforts
• reduce maintenance efforts
• collaborate within different teams
• deliver consistent interfaces
• deliver consistent guidelines and specifications
• deliver consistent code
• deliver releases
• share thoughts on decisions
• automate component updates
• automate guideline updates
• automate specification updates
• automate code updates
• ensure correct implementation (design -> code)
• combine design and code

Gains

• Faster implementation of projects
• Reduced communication efforts
• Focus on collaboration
• Consistency of code and design
• Scalability through modularity
• Code Embedded examples (research development requirements)
• Templates Documentation Templates

Pains

• Keeping the design system up to date
• High manual effort
• Lose overview
• Keep sensible company data private
• Too many different systems

Gain creators

• Offer Components, Guidelines and Specifications
• Offer Code
• Offer Releases / Branching Systems
• Offer Editor for designers to contribute
• Offer Repository integration for developers
• Work in progress

Pain relievers

• Reference components
• Automate build process
• Corporate solutions on own servers
• Wrapper combining multiple repositories (design / dev)
• Work in progress

Product/Service/Outcome

Highlevel

• Work in progress
• Everybody: use Git or Github or Gitlab to versioning and share
• Designer: check Gitbook to maintain content (sweet interface)
• Designer: check Github Pages to serve content (markdown to html via jekyll)
• Designer: check Git Large File Storage git-lfs
• Developer: check Storybook to integrate documentation within your app repository
• Everybody: check Github CI
  • to build your work in an automated way (listen to push on master)
  • to serve a wrapper template around your repositories (design / dev)
  • to map and sync both repositories through componentID, variantID and versionID
• Everybody: check visual regression testing to maintain binaries (automated visual testing)
• Everybody: develop a solid repository structure. Mine would be an adapted atomic design pattern (styles, atoms, molecules, organisms, templates, flows). Track it, collect and evaluate data, iterate and improve.
• Designer / Corporate setup to secure sensible data:
  • use Git or Gitlab to versioning and share
  • use Markdown WYSIWYG Editor to write .md-files with an interface
  • use Github CI to serve content (listen to push on master)
• Everybody check Prismic.io to maintain content

Lowlevel

• Work in progress
• Designer: this could be an interface deployed via Github CI / Github Pages

Installation

• Designer: create a Gitbook Account and integrate your Github repository
• Designer: change Github Settings to activate Github Pages
• Work in progress