How nice would it be if designers can submit their design decisions to Github and they would be immediately visible on the website?
Ring is a Global Valtech Project to create a re-useable component library, built on best practices and experiences within the company, to enable designers and developers to launch projects faster with less building from scratch.
- Components are based on atomic design principles with properties allowing for customisation of all visual aspects of branding.
- Design and tech are connected: every component or feature is connected to a design token.
- Uses composable architecture making it easier to build applications to meet each project’s needs.
- Supports headless content platforms from Adobe / Sitecore / Contentful / Contentstack as well as headless commerce solutions from Commercetools.
Ring UI is a headless user interface that is independent of the data and the technology used in the Back-End. Ring UI provides the architecture and the guidelines for:
- Focusing on Web Standards. Like HTML and CSS, which usually are forgotten and solutions are over-engineered with JavaScript.
- Separations of concerns to empower reusability across projects, and identify common and custom requirements.
- The tooling to assure quality, performance, security, accessibility and developer experience.
- Design tokens to improve the collaboration between Front-End and Design.
- API contracts to improve the collaboration between Front-End and Back-End.
Ring UI is a collection of ready-made components and features (page sections) to accelerate the front-end development.
How did I contribute to the scope of the project?
- Creating components in Figma
- Connecting the components to tokens
- Setup the foundation in the Figma Token Plugin
- Create Tokens in JSON and sync on Github
- Working on a meaningful JSON structure closely with the dev team
- Understanding the process of using the tokens in code and how the setup
- …
