Heads up: It's a work in progress
View it on Figma.
Many designers on Bitcoin products find themselves designing the same set of UI components that have already been thought through by others. The goal of this UI kit is to provide a strong foundation for prototypes, concept explorations and real projects to kickstart their design processes. By not having to worry about the basics, designers can then focus on what makes their products unique. This is part of my work for the Bitcoin Design Community.
This kit ideally evolves over time to include more best practices, use cases and application types, based on the needs of open-source Bitcoin designers and projects.
The design system in the kit includes the basics:
- Colors
- Icons
- General UI elements (buttons, toggles...)
- Common navigation components (tab bar, side bar...)
- Screen templates
Additionally, there are components specific to Bitcoin wallets, such as:
- Balance display
- Transaction display
- Address input
- Fee selection
- ...
It also includes detailed user flows, such as:
- Onboarding
- Creation and import of single and multi signature wallets
- Sending
- Receiving
- Settings
- Transaction management
- Coin mixing
- ...
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.
Some use case ideas:
- The foundation for a new Bitcoin wallet project
- A reference for how to solve a specific user flow or interface execution
- Create mockups and prototypes to include in the Bitcoin Design Guide
- Developers can pick certain elements from the UI kit to include in their application
- What else...?
Also check out the WalletUI project on Github by reez. He's turning this kit into an iOS library. Super cool!
The kit is a big work-in-progress and you are welcome to chip in. If you have feedback, leave a comment directly in the Figma file or message me on Twitter. What's helpful:
- Point out mistakes (spelling, technical, visual)
- Ask for components, screens, etc you think should be added
- Propose specific improvements
- Point out alternative approaches
- Let me know if you made use of the kit
If you want to propose specific design changes, just duplicate the file, make your changes, and let me know. I will then review and merge the changes into the main file. If you have access to the Figma Community features, you can also publish your file as a Remix (learn more).
The kit is published via Figma community under the CC BY 4.0 license.