Show HN: We made a platform that allows you to build UI kits in days not months(symbolsapp.framer.website)
symbolsapp.framer.website
Show HN: We made a platform that allows you to build UI kits in days not months
https://symbolsapp.framer.website/
8 comments
My slightly out of date iPhone has a hard time rendering this site. Choppy scrolling, delayed/choppy animations.
If it aint fast, it aint worth it
If it aint fast, it aint worth it
Noted! :)
Aside from performance, do you have any feedback on the content of the landing. Is it clear and does it hook you?
Thanks
Aside from performance, do you have any feedback on the content of the landing. Is it clear and does it hook you?
Thanks
Suggest you change the title to include open source. Looks like MIT.
Also does this work w existing frameworks like Tailwind?
Also does this work w existing frameworks like Tailwind?
Thanks for the feedback!
Yes, it can run projects with using existing frameworks, both if its Restful API or also it can be embedded into Tailwind UI.
Symbols was built to enhance your existing tech stack, with open source development. Not to force you to leave it, or vendor lock you.
Yes, it can run projects with using existing frameworks, both if its Restful API or also it can be embedded into Tailwind UI.
Symbols was built to enhance your existing tech stack, with open source development. Not to force you to leave it, or vendor lock you.
Is the exportable UI kit contain design or code?
Can I take landing page site design for my product?
Can I take landing page site design for my product?
It contains code :) However later on we will offer code to design, with two-way syncing between Symbols and Figma. Since this will allow designers to work with a properly structured design file with correct layers, like in code.
Think of Symbols as “Figma for developers”, whereby you can build, test, document and interact with fully functional UI kits on a canvas with an advanced design system. You can publish pages as a website inside the platform, or export any part of your project/UI kit to your existing tech stack. You aren’t vendor locked.
Think of Symbols as “Figma for developers”, whereby you can build, test, document and interact with fully functional UI kits on a canvas with an advanced design system. You can publish pages as a website inside the platform, or export any part of your project/UI kit to your existing tech stack. You aren’t vendor locked.
I think it is a very worthwhile project, thank you for your work
Thanks :)
Any feedback let me know!
Any feedback let me know!
My iPad crashed when I clicked to the video on the page.
I'm sorry but honestly I don't trust your solution simply based on how horribly slow the website even scrolls on my device.
Oh not great to hear that!
Can you please confirm if you are referring to the landing page or the actual platform itself?
Can you please confirm if you are referring to the landing page or the actual platform itself?
It works great on my Samsung S21
> Show HN: We made a platform that allows you to build UI kits in days not months
> Publish as a website
So i need Apache for my UI. /s
> Publish as a website
So i need Apache for my UI. /s
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. 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 tokens 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
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.
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/