gbks/bitcoin-wallet-ui-kit

A design system and UI kit for Bitcoin wallet applications.

The mighty Bitcoin wallet UI kit

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, and researching the same best practices. 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 project grew out of the Bitcoin Design Guide by the Bitcoin Design Community.

For more info, see the website. This repo is used for tracking issues, and hosting the source code for the custom Figma plug-ins.

bitcoin-wallet-ui-kit's Issues

Set up Lists / Penpot

Create a lists component with all states and properties from the Figma file that is easy to maintain, customize and use.

Explore a tutorial playground

Figma publishes playground files for new features. These are community files containing series of screens that provide step-by-step guides with hands-on tasks. We could create something similar for the UI Kit (instead of having users read walls of text or randomly browse and figure things out on their own).

Set up loader / Penpot

Merge MyMattress designs into the main kit

The MyMattress app design is based on the kit but introduced a lot of changes around multisig UX. Those can be merged from the MyMattress page into the main kit pages.

Project structure refresh

The UI kit has grown and evolved a lot, and more people are building on/with it. Initially, it was easy to keep everything in sync, but this has gotten more messy as things have matured. It's being used in very different ways by different people/projects, and a single Figma file cannot be the source of truth for everything anymore.

I'd like to mention two particular efforts that are awesome, but also require a bit of change of structure:

• The Android version of the UI Kit by Wisdom. Managing styles for two different operating systems in the same Figma file can be really messy and hard to work with. Easier to have dedicated files for iOS and Android.
• Creating a mega prototype for the Daily spending wallet reference design. The UI Kit has been pretty closely in sync with screens in the guide, but with this reference design becoming more specific, keeping this tie would limit the UI Kit at being a really good UI Kit.

Then we also have the iOS library that reez maintains, and projects built on the UI Kit like the new Core app, JoinMarket Web UI, and Arctica. Each of those have their own requirements (like Arctica being a desktop multi-sig app).

So my proposal would be the following structure:

• Simplify the main UI Kit Figma file to be a really good at serving as a foundation for designers starting new iOS projects (with templates for desktop as we have now). This would mean removing some of the pages and screens that are used in the guide, adding more variations for different types of projects, and updating documentation. This would continue to be maintained by me.
• Establish Wisdom's Figma file as the Android main file, maintained by him. This should generally be very close to the iOS file, but only include Android styles.
• Every project that uses the UI Kit (including the daily spending wallet) has its own Figma file maintained by its contributors. These Figma files have no requirement to be in-sync with the main file.
• Projects may choose to publish their files as remixes. This way, the project file is listed on the community page of the main Figma file for easier discovery (another project may want to base their design on a remix instead of the main file).
• Create a new page on bitcoinuikit.com to list those projects and files with descriptions.
• Put more emphasis on this repo as a place for coordination (it's barely used right now)

Result would be a lot more Figma files that would have to be individually maintained, but with a clearer structure and each one being more focused. With the limitations we have on our current crop of design tools, and our generally fairly loose style of open design collaboration, this is probably a good way to do things. As is usually the case, clear communication and documentation will be important to make this work and not get messy.

Simplifying the main Figma files would also make it easier to maintain code libraries based on the kit.

What do you think?

Upgrade "Item" component

Issue 1

As a UI kit user, I would love to change the states of the nested components easily, when I use the "item" component.

Now it's complicated, since one need to dig into the component to change the toggle state for example.
See image:

We could change this, with "nested instances".
See image:

Issue 2

As a UI kit user, I would like to toggle the frame of the "Item" Component on and off, easily."

Now I need to replace the whole component:

It would be easily fixed with a component variant:
Frame true/false

Set up colors & themes / Penpot

Find the best way to set up colors and light/dark themes in Penpot for maintenance, customization and usage.

colors: primary colors dark mode

Just saw you had a "Dark theme exploration" page in the Figma file, cool!

I know its an exploration, but I went ahead and added the dark mode of the neutrals to WalletUI since they were available.

Do you have the dark mode of the primary and accents?

I'd love to add them to WalletUI-

Set up inline tabs / Penpot

Create a inline tabs component with all states and properties from the Figma file that is easy to maintain, customize and use.

Create a 5-10 minute how-to video

This could get included on the home page as a crash course on how to use the kit. Some topics to cover:

• General intro and overview
• Colors, text, styles, components, templates
• Included user flows
• 15-minute rapid prototyping
• Customizing the theme
• How to contribute

Add short case studies to the website

Let's list some of the projects that use the UI Kit with a short descriptions, designs and links to those respective Figma files.

• Bitcoin Core
• JAM
• Design guide

This could be a new page or sub-section and can also include links to the latest workshop and the BitcoinDevelopers session.

Set up dropdown component / Penpot

*Added dropdown variants

Clean up layer names using Figma Autoname

This plugin allows for intelligent, automated renaming of layers. Chris did a quick test, see his screenshots below.

Before implementing this directly, let's first do a test in a duplicate of the main file and report back here to see if it causes any potential issues.

Remove rectangles used for spacing in favor of auto-layout padding

I cheated in a few places. Let's clean those up.

Introduce button states?

We created a whole set of states (hover, active...) for buttons in the Bitcoin Core App (see in Figma here). Do we want to port those over to the UI Kit?

If so, is it maybe time to split the Button into several sub-components to make them easier to manage. We have lots of configurations (3 sizes, 3 styles, 5 states, 4 content variations = 180). There is complexity, the question is just where do we put it.

• One massive Button component with lots of properties (as we have now)?
• Multiple components (IconButton, TextButton, TextIconButton, IconTextButton) that are almost interchangeable?

My initial hunch is to keep components simple (fewer properties) so there's less hidden (less guessing) and less explanation (spec sheets) needed. But let's discuss.

A follow-up discussion would be to document the standard treatments for focus, hover... and which other components would need updating.

Tag components with useful keywords

This makes them easier to find in the assets panel

Set up Keypad component / Penpot

This has already been started, but needs finalizing. Should test whether it scales smoothly, and enter proper number and letter values in the "Letters" state.

Create extended case studies

The info page lists a few projects that have built on the UI Kit. We can extend this into more detailed case studies to help designers and projects understand how they can use and work with the kit.

The Bitcoin Core App might be a good one to start with as there's an ongoing collaboration, and some designs that can be back-ported from the core app file to the UI Kit (button states specifically).

Create a custom plug-in

I already built some custom plug-ins for maintaining the UI Kit, like the screen export helper, which automatically preps screens in the Figma file export and rendering on the website. We also us the Lights plug-in for switching themes. I think it might be worth creating a custom plug-in for the UI Kit and publishing it to Figma community.

Design feature ideas:

• Theme switcher (select 1+ screens, click to toggle)
• Auto-format bitcoin/sats (select a text field, pick currency & locale, click to format)
• Auto bitcoin/fiat conversion
• QR code generator
• Search the design guide for info (not sure how to technically do this)

Maintenance feature ideas:

• Find instances whose component is external or deleted (done)
• Find instances of a main component (done)
• Find text without a text style

Admin tools:

• Prep screens for export to website

I already built a basic plug-in that does some of this, but it's more of a prototype. I'd like to wrap it up and get it out there.

Visually, I imagine something like this. I thought of making this way more playful, but I think plug-ins should not overshadow the actual design you're working on.

What other useful tools could we provide? Links to the website? ChatBTC integration?

Allow for copy/paste via the website

Figma Components lets you copy components that you can then directly paste into Figma. It also seems to keep component links intact. Can we have similar functionality for bitcoinuikit.com?

It might be possible to automate this via the screen export plugin. While touching that plugin, we can also look into exporting screens for the website as SVG instead of PNG. They should load faster and scale better, and I believe we're 100% vector-based in the UI Kit, so there should not be any big problems. However, SVG export can be really messy and easily end up with unusable SVG code, so that's something to investigate.

Mock-up initial set of screens / Penpot

Goal here would be to pick 5-10 diverse screens from Figma and mock them up in Penpot. This will be a good test for our components, to see how they work out in more complex layouts. I am also curious to see if we can render them on the API demo website.

Here are some examples:

Once we have figured out this initial set and resolved any workflow and other issues, it will be easier to build out more screens.

Set up search component / Penpot

• Added defaults size search box component variants with label
• Added small size search field component variants with label

Port icons / Penpot

Find the best setup for using the Bitcoin Icons in Penpot, both for maintaining and using.

Set up categories component / Penpot

Added categories component

Set up list / desktop only component

Added list / desktop only component

Review new Zeus app design for Lightning UI to port to the kit

The Zeus redesign is very thorough. Including some Lightning UI mockups in the UI kit could help promote more experimentation.

My initial assumption is that it is better so slightly separate on-chain and Lightning UI in the UI kit, as to not force designers into dealing with both. Based on how much unique Lightning UI we want to add, it could be in a single page, or have its own set of clearly labelled pages.

A first good step could be to review the Figma file below and identify unique Lightning UX. Zeus is for more experienced users who want detailed control over channels. There is probably some cut-off point where the UI kit stays more on the mainstream side. Just something to consider.

Zeus Figma file

Standardize icon structure for consistent color overrides

When switching an icon instance out, the new icon you pick should maintain the color overrides you added to the previous one. This does not currently happen because the icon layers have different structures, so Figma does not know how to maintain the colors.

Chris researched and the solution appears to be to turn the content of every icon frame into a union an give it the same name.

It may be possible to automate this via a script.

This should be done after #13.

Set up pagination dots / Penpot

Added pagination dots components

Missing variants

There are a couple of broken component variants used in the UI kit.
If I find them, I will screenshot and collect them here, we should fix them at some point:

Test use of shared libraries / Penpot

Shared libraries can potentially be very useful in improving our workflows, but also add a bit of complexity. Let's feel out what's possible.

One approach could be to split the icons into one library, as that's a separate project already. Second, the screens could be in a separate file from the UI Kit elements (colors, type, buttons, etc).

Things to look into:

• Is it possible to push updates to a main component in a separate shared library (and possibly break them in all other files that rely on this library)?
• If the UI kit essentially consists of three files, how do I duplicate the set and have the references be updated (so my own new file with screens draws from my own component and icons files)?
• What is the performance impact? Good, bad, same?
• We found that the asset search is not 100% thorough. Does this affect the use of shared libraries?
• Do they work across teams? If I am part of multiple teams, does each team need to import the library?
• Is it possible to pull in a new version of a library and have all references update accordingly?

Eventually, we could post the UI Kit files on the Penpot shared libraries page.

Move website design out of the main Figma file

Chris pointed out that this clutters up the component space. Let's move it out and publish it as its own community file.

Explore Penpot support

Figma is a great tool and has been an amazing platform for the UI Kit, but also has some shortcomings for open-source collaboration. Penpot is an open-source alternative that we could also use. Whether this would be as an additional publishing platform or as our primary one is to be explored. Edi, Chris, and I discussed that we'd like to investigate this further to see what's possible. We'll each do a bit of our own evaluation and then meet up at some point for a hands-on session.

8px grids & layout grids?

Do we want to switch to an 8px grid? Currently, the system is based on multiples of 5. So essentially we're shrinking the grid unit by 20%, but the bigger part is to ensure all components more strictly adhere to this.

Set up button component / Penpot

Create a button component with all states and properties from the Figma file that is easy to maintain, customize and use.

Navigation component / Penpot

Explore Penpot API usage to complement workflows

Penpot has an API we can use to access our files externally and build our own tools around. There is no plug-in system yet, but with the API we can make up for that. For the Figma file, I had built several custom plug-ins for various maintenance tasks. With an API we can do those as well, but go even further. For example, the website can directly pull from the Penpot file and render colors, text styles and screens from the source. It may also make it possible to create a Github-based collaboration workflow where we track the file in Github to use the branching/merging tools for public contributions. I am not totally convinced that's realistic, but one can dream.

So far I've set up a very basic Nuxt web app locally that uses the new Penpot access token system to load data from the API. I'll explore this further and report as I find things.

Investigate whether to use sections in the UI Kit

Sections are intended as helpful organizational tools to split a big page visually into different areas. Helpful, but may also lead to super gigantic pages. Is it better to have more pages that are each more focused? Or are there other ways to use sections? Let's discuss and use them if they are helpful.

Revise color palette & theming

I've been wanting to extend the color palette for a while. While designing, I've just needed a few extra colors to work with, so this comes from a very practical need. Instead of a palette of 5 colors (orange, red, green, blue, purple) with orange being the primary, I'd like to go for 12 accent color system like Apple has defined in their Human Interface Guidelines, plus 1 primary color.

I also looked at Material Design, but it's extremely complicated. On the surface, you pick one color, and it derives a palette for you. But you end up with 50 different, yet very similar, colors. If you try their Figma Theme Builder plug-in, the first thing it does is add 180 color styles to the file. Not sure how you can properly work with that...

Using the plug-in as defined in #49, we also don't need separate light and dark modes anymore. You simply apply a color set, and that may be light or dark or have a pastel palette or neon colors, etc. That simplifies color name. For example, instead of "Light/Red" and "Dark/Red" we just have "Red". So this change is both an addition and a removal.

Here's what that looks like. This shows two color sets, one being light and the other being dark. Using the plugin you can select one and apply it with a click.

Set up toggle component / Penpot

Added toggle component variants

Create a project kanban board for ongoing work and milestones

I set it up right here.

When new issues are created, we need to add them to the project (via the sidebar).

• At first, they will have no status
• Once we agree that this is something we want to work on, we'll assign the "To-do" status
• When someone wants to work on an issue, we assign it to them
• Once they start working on it, we can change the status to "In progress"
• Once complete, we can change it to "Done"

The project also has a milestone view, grouping the same issue not by status, but by milestone. That is a nice alternative for us to rally around specific milestones.

@chrislueders and @editwentyone, what do you think? Does this setup work for you?

Design a proper landing page for the kit

The main page for this repo currently serves as the landing page. Let's design a custom one that shows off the kit and explains its use cases well.

I started this design here.

figma: update specs/diff

Hi!

I was wondering if there was a diff or anything of the changes from the Figma:

• "Overall revisions of screens, focusing on mobile, and adding Lightning features." October 15, 2021
• "Clean-up & tweaks for more awesomeness." February 3, 2022

Its super helpful that you wrote comments for the changes like above to know what things in general have changed, so thank you for doing that extra, it is really nice that you've been doing that!

But I didn't know if there was an additional way to know in detail what items in what ways were added/revised/tweaked so I can make sure WalletUI stays matched with Bitcoin Wallet UI Kit. Any direction you can point me in or guidance as I make those updates to make sure I don't miss anything?

reez/BitcoinUI#53
reez/BitcoinUI#54

Set up dark mode in Figma

Using the Lights plugin, this is pretty straightforward and just requires creating a clean set of light and dark styles.

Port the home screen balance component from the daily spending wallet prototype

The component can be found right here.

It should also be renamed because it does not show the balance but is an amount input field. We don't want to show the balance here as any bystander could see it - bad for privacy.

Refresh the screens on the website with the latest designs

They are pretty outdated at the moment. Let's do a re-export.

Set up input component / Penpot

• Added Input field component variants without label
• Added Input field component variants with label

Set up Small icon text button / Penpot

*Added Small icon text button

Set up text styles / Penpot

Find the best way to set up text styles in Penpot for maintenance, customization and usage.

Update components to use properties

Hi there!

I propose utilising more properties within the guide, which I guess will affect mostly buttons but can be also in other components like lists or dropdowns, etc. I recorded a quick video about this.

In short, using more properties instead of variants will:

• make it easier and quicker to edit components
• make it easier and quicker to use components, modify variants depending on a case
• will allow for more flexible usage with less variants
• (supposedly) is more suitable for handoff

Re-import icons from the Bitcoin Icon Set

The current icons are way behind the latest release of the icon set. Let's re-import them. The trick here is to update all instances of the current icon components with the new ones. Is there a way to automate this?