Building 100% reusable UI kits

Hey devs 🙂

Introduction

With 15+ years of UI kit building & design systems, my team is launching a platform (free beta access) that allows developers to build consistent & fully functional UI kits / design systems in days, instead of months. Giving you best practices with the most advanced system design/system design for reusing UI components, combined with access to 500+ open-source components that you can build anything with.

Yes it’s open source tech with no vendor lock. Which means you can export any part of your UI kit / project at anytime. Our goal isn’t to enhance your tech stack, not to lock you in.

Anyways, why should you care?

Well first what are the problems we are trying to solve, and how can we possibly build a UI kit this fast?

Reusability and consistency being the umbrella challenges that devs face on a daily basis.

For example, a few common issues…

• How do I rebrand my entire component library for a new project that has a totally different set of branding requirements?
• Collaborating with non-developers such as designers on available properties (colour tokens) to use is a pain
• How do I easily organise and inspect my library, to avoid rebuilding components that are already available (especially as a team)
• If the component has too many properties, it becomes hard to scale and reuse. Therefore encourages new components being made, which degrades the efficiency of the design system
• While component libraries such as Tailwind and Bootstrap are good off the shelf component libraries, they are typically hard and time consuming to customise to your own personal requirements, because they are built for certain use cases and styling
• The rise in design system and documentation tools such as Storybook and Zero height solve part of these issues, which is mainly communication between teams. However the effectiveness of a design system is based on the system design itself, which non of these offer. Therefore requiring you to still spend huge amounts of time and money developing a system that promotes reusability across your entire UI kit and design system code architecture.

How does Symbols solve this challenges?

A few key points…

• Aside from 500+ components being provided for you to build whatever you want, you can build are 100% customisable components. The properties can easily be override anytime
• Review and organise your component library into tags, to avoid building existing ones
• A highly advanced design system that does the heavy lifting of complex tasks at the code level, such as auto generated type scale for both typography and spacing. This makes creating responsive design much easier, as you no-longer have to set-up the spacing sequence for each component. Apply global design changes such as dark mode across entire library and more
• Use and fetch token names across your entire UI kit, which significantly reduces the lines of code = code becomes more reusable and scalable
• Easily build, test, document any part of your project in isolation, including functions, pages, individual components and the colours in your designs system
• Rebrand your entire UI kit/ project with automatic spacing/responsive changes, just by reconfiguring the design system menu
• With real-time collaboration and no-code / low-code tools, you can build your project with other developers and non-developers at the same time
• Avoid having to setup and maintain multiple design system tools / documents, as the platforms UX is setup to easily view your project as the documentation across all tech/non-tech teams
• Changes seen instantly to dev version of web project, before publishing to production

To note, the platform is highly configurable to your preferences. You do not need to follow the design system if you choose not to, and you can switch off certain settings of the design system, as it is treated as an overlay.

This month, we add canvas mode to the platform. Making Symbols, “Figma for developers”, with your entire functional/animated/interactive UI kits being available on a canvas. That also means the ability to test your entire UI kit in different modes, such as left to right accessibility, responsive devices, global modes and more.

What to see more functionality and try it out?

Here is a quick landing page I put together (I’m the marketing founder) that showcases Symbols in action via videos.

https://symbolsapp.framer.website/

Feedback is appreciated!
Any questions, let me know 🙂