Introducing Symbols — a platform to create and maintain a Design System and UIkit. Imagine it as a marketplace of Legos, as if Legos were app components, and you’d have to stick them to each other to build an app.
We’re a team from Georgia making libraries that create an ecosystem of rapid-development tools in Javascript. Currently, we maintain DOM rendering framework, CSS methodology, Design System, and UIkit.
Our platform consists of 3 steps:
- Design System — defining your brand guidelines
- UIKit — a marketplace of reusable UI components adjusting your design system
- The Platform — to manage, test, and modify everything in a shared space
It covers:
- Syncing design and code processes
- Guidelines of making scalable and accessible UI
- UI automation and integrations
- Low-code environment and no-code online editor
The general picture is more like the following:
Usually, it’s handled by teams hired by large companies. Small and mid-sized enterprises can’t afford such specialized grouping. This process involves the design, code, and synchronization, but we unify it in a single flow. We understand the complexity of creating and maintaining a Design System, CSS, and UIkit — it is time-consuming, high cost, and still challenging to get the desired result. Adjusting current frameworks is usually complex and takes one more layer of a learning curve, a lack of reusability, scalability, and personalization.
On the other hand, we think the design system can’t be a single source if we define it in two different places — design and code. When the Design System does not consider coding approaches, it makes systematization impossible. Suppose design tools are the space for its definition — how can we calculate proper measurements across devices, and especially computable units (em, vw, etc.) in Sketch, Figma, or XD?
So, we decided to dive deep and make the system that would bring it to the surface. We discovered a new way of Design System that gets synchronized with CSS structure. We approach that by defining the same structure for both sides. We created the intermediary library to talk to both — design files and the DOM in JSON language.
We default our system to “em” units to make it more dynamic and scalable, meaning we can transform any component in size and space without breaking proportions.
It sets up some guidelines that do not really limit and still give us infinite variations per se (https://scaling.symbols.app/).
It will be affordable for everyone, including individual entrepreneurs and professionals. For us, documentation is for ones who want to dig deeper; for others, let’s make the process simple. It provides a testing environment for components to check them in different users’ preferences, including dark and light modes and responsive breakpoints. The platform also provides GUI to customize the Design System and components.
We have a monorepo setup and each component has individual versioning, which can be imported individually or in a bundle. Your changes and saved components will bundle up in a single NPM package that will be distributed to our npm server and you’ll get it just by running a command:
npm install smbls --saveEnjoy the process of editing! Creating functionally primed components for your App.
We have the first demo at the end of November. We’ll open our design system and components for invited users when we launch. Later — to everyone. You can check it out on GitHub, use it, and engage in discussions.
Meanwhile, we launched the waitlist campaign to get early stats about your needs and preferences; we’ll also use them for customized invitations.
To get an invitation, sign up for the waitlist at https://symbols.app/signup.
