Design often starts with establishing foundations. The goal of this project is to provide a ready-to-use foundation for bitcoin applications.
You will need a Figma account to use the kit. On the kit page, press "Duplicate" to create your own copy of the file. You can freely modify it and use it as you desire.
Duplicate on FigmaThere's also a companion plugin to quickly switch themes and keep the design system organized.
Get the Figma pluginLooking for an Android version of the design? There's one created and maintained by Wisdom:
Get it for AndroidPenpot is an open-source design tool with similar functionality to Figma. The Human Rights Foundation sponsored a Penpot bounty to port the UI Kit. Submissions are linked below, each of which is maintained by its creator:
With Penpot quickly evolving, and there being fundamental differences between the two design tools, we are actively exploring how to best adopt it in a broader way.
The UI Kit grew our of the need for creating mockups and prototypes for the Bitcoin Design Guide. It has since been used in many different ways, here are some of them:
Did you use the UI Kit? Share in Discord.
Chris is working on a video series with everything you need to know about the UI Kit, and using it for your projects.
Make sure to check out other videos in the tutorial series.
It's a 1-hour introduction and how-to that covers the basics as well as putting together a simple user flow.
How to use the Bitcoin UI Kit Figma plugin for switching themes and keeping the design system organized.
These are some examples where the UI Kit was used as a foundation to create a design system for specific projects. Got one to add? Post an issue on GitHub.
This project by the Bitcoin Design Community gathers resources and best practices for designer and design-contributors to open-source bitcoin projects. The UI Kit is used to streamline screen mock-ups in various pages and sections, like the Daily spending wallet reference design (see the Figma file).
The design of this new version of the Bitcoin Core QT wallet application is based on the UI Kit, with support for both desktop and mobile. See the Figma project and community files, and design documentation.
This web UI for JoinMarket makes CoinJoins simple and convenient. The UI design started by duplicating the UI Kit and adjusting it to project needs over time. It is implemented using Bootstrap. See the project Figma file.
The kit is a big work-in-progress and you are welcome to chip in. The project embraces the principles of Open Design and is primarily maintained by GBKS. If you have feedback, leave a comment in the Figma file or GitHub repo, or join us in Discord.
What's helpful:
To propose specific design changes, duplicate the file, make your changes, and leave a comment on the original file. We can then together review and merge the changes into the main file. You can also publish your file as a Remix.
You can also help out with code implementations:
The kit is published via Figma community under the CC BY 4.0 license. You can modify and use it freely for personal and commercial projects, and of course the best types — open-source projects.