Bland UI Kit
Creating an open-source UI Kit
Bland?
Bland is a collection of the components I intend to use for my project going forward. I am releasing it so everyone has access to it too.
A backstory…
I love creating reusable components in Figma and always wanted a place to store them. I made one before but had too many issues with it. I am here with a much improved one. While building this, I researched some popular design systems — IBM, Ant, Goldman Sachs, Untitled, etc.
I was mainly looking out for
• their token naming system, • the way they arranged their files, • how they made their components.
All these influenced how I created Bland. It was painstaking but very rewarding.
Some features of Bland
• I used Autolayout to make the components very responsive, • I used variables for more intuitive naming of my tokens, • I used component props to make the components versatile. • and so on…
Carefully designed components
These components were designed to be responsive and customizable.
Buttons
Checkbox
Text Input
Notifications
Tooltip
Tabs
Perpetually updated
By the way, I am still working on this.This version is just an update to what I’ve done so far. Keeping it as simple as possible, I’ve checked the following off.
Basics like — Typography, Color, Shadow, and Spacing
Components like — Buttons, Text Input, Checkboxes, Radio buttons, Tooltips, Toasts, Notifications, Alerts, Banners, etc.
And yeah, there are lots of blank pages there. I am still working on those. I’ll share updates weekly. Note that there might be slight changes to these components as I move on.
Why did I create this?
Apart from having a dedicated place for my components, here are four other reasons.
I wanted to apply an organizational structure to my variables. Push it to the edge and see how much I can keep it under control.
The last UI Kit I created has many flaws.
Using components saves me a lot of time.
I find this fun.