Zelda BOTW UI Kit - Free Figma Resource

Introduction

Ever since Breath of the Wild was first released I have wanted to do a project centered around its user interface.

From the subtle animations that help guide the user to understand what is happening, to the intricate, yet simple menu systems, there is a lot more under the hood than I first expected.

I can now say for certain that a staggering amount of work went into the creation of the User Interface, and it shows everywhere when you begin look closer.

UI Challenge

In an effort to sharpen my user interface design skills, I challenged myself to build the entire user interface of Zelda: Breath of the Wild.

This Figma UI Kit is the result!

Also, it’s not just a dumb pixel copy… All of the components are built using Figma’s scaling and responsive tools, as well as variants and components. This thing is ready for anything.

Every single element on these pages, save for the 3D game screenshots (that I used as backgrounds) and the item spritesheets I created myself for this project. Every text element, UI piece, and icon were crafted from scratch using Figma and Illustrator.

This has been a wonderful project, and I have learned a ton about the effort and care that went into crafting this interface.