Info

Design often starts with establishing foundations. The goal of this project is to provide a ready-to-use foundation for bitcoin applications.

How to use it

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 Figma

There's also a companion plugin to quickly switch themes and keep the design system organized.

Get the Figma plugin

Looking for an Android version of the design? There's one created and maintained by Wisdom:

Get it for Android

Penpot

Penpot 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.

Use cases

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:

  • A foundation for a new bitcoin projects
  • A reference for solving specific user flow or interface details
  • Developers picking elements to include in their applications
  • Quick design concept explorations
  • Design tests for job applications
  • Hackathon projects
  • Design duels

Did you use the UI Kit? Share in Discord.

Get an overview

Chris is working on a video series with everything you need to know about the UI Kit, and using it for your projects.

YouTube video cover of the UI Kit tutorial series

Make sure to check out other videos in the tutorial series.

Watch the workshop

It's a 1-hour introduction and how-to that covers the basics as well as putting together a simple user flow.

YouTube video cover of the UI Kit workshop

Using the plugin

How to use the Bitcoin UI Kit Figma plugin for switching themes and keeping the design system organized.

YouTube video cover of the UI Kit plugin intro video

The UI Kit in use

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.

Bitcoin Design Guide

Three screen mock-ups of the Daily spending wallet reference design

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).

Bitcoin Core App

Three screen mock-ups of the Bitcoin Core App application

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.

JAM

Two screen mock-ups of the Jam web application

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.

How to contribute

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:

  • Point out mistakes (spelling, technical, visual)
  • Ask for components, screens, etc you think should be added
  • Propose specific improvements
  • Point out alternative approaches
  • Improve documentation
  • Whatever you think will move the project forward

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:

License

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.