Overview

Branchout is a comprehensive design system created in Figma. Without a client or formal requirements, this project served as a valuable practice ground to test and develop my design skills while deepening my understanding of design systems.

My intention was not only to improve my own capabilities but also to share this system with the Figma community - giving back to the design community that has taught me so much.

The result is a practical toolkit that allows designers to quickly create mockups for various interface types while providing a helpful resource for others who might be starting their own design journey.

Project Goals

• Learn and introduce myself to Figma’s advanced features including auto layout, variables, and tokens to work more efficiently on future projects
• Create a reusable component library that enables rapid interface design
• Demonstrate my current level of design skills
• Approach this project like a real-world design system, prioritizing clarity and usability

Process

I began by establishing the core elements that would serve as the building blocks for the entire system.

Foundation

Color System

To create a color palette, I used Figma variables, starting with raw values (primitives) before translating them into semantic tokens like primary action, warning, and success.

Throughout the process, I gathered inspiration from various websites, experimented with color generators, and ensured accessibility by checking color contrast.

Typography

Developed a consistent type scale for headings, body text, and UI elements. Inter was selected as the typeface for its balance of elegance, readability, and versatility.

Effects

Defined shadows, overlays, and other visual effects to create depth and hierarchy.

Variables & Tokens

To make the system truly efficient, I created styles and variables:

• Created primitive variables for raw values (specific colors, spacing units, corner radius)
• Built tokens on top of primitives for semantic usage (primary action, warning, success)
• Established spacing tokens to maintain rhythm and consistency across designs

Using variables transformed how I approached UI consistency. Instead of manually tweaking values, I could adjust everything systematically — one change, and the whole system adapted.

Component Development

Once the foundations were in place, I built a comprehensive component library designed for flexibility and reusability:

Inputs & Controls

Button, Button Group, Input, Toggle, Checkbox, Radio, Dropdown, Textarea

Feedback & Indicators

Alert, Badge, Toast, Tooltip, Status, Progress Circle, Loader

Navigation

Breadcrumb, Tab Bar, Segmented Control

And More…

Card, Calendar, Modal

Each component was constructed using auto layout to ensure flexibility and responsiveness.

Testing Through Real-World Examples

The true test of any design system is how well it functions in practice. After research process for each app is done with some wireframes, I applied components to create several different static interface designs in approximately one hour each:

Music Player

A consumer entertainment application focusing on content display and media controls:

Medical Dashboard

A healthcare interface with a calendar & data visualizations:

Login Screen

A simple, authentication page with multiple sign-in options:

Email App interface

Email interface with inbox management and message display:

A Modern Note Taking App

A productivity tool interface with collaborative features:

Key Learnings & Reflections

The Branchout Design System started with a question rather than a problem: “Do we really need another design system?” It’s a fair question in a world full of them. But looking closer at existing systems, I noticed each one makes unique choices that serve specific needs.

This sparked my curiosity about the decisions behind these systems. Why choose certain fonts? How do you determine heading hierarchies? What guides color relationships? Which components should be included?

Diving into these questions transformed what initially felt overwhelming into something both challenging and fascinating. Through building Branchout, I gained:

• Hands-on experience with Figma’s advanced component features
• Understanding of how design tokens create consistency across applications
• Ability to develop flexible components that work in multiple contexts
• Skills in maintaining visual integrity while supporting diverse use cases

The project wasn’t about fixing something broken—it was about understanding the thoughtful decisions that make design systems work, and applying those insights to create something cohesive and adaptable.

Download

You can download Branchout now, it’s live on Figma Community!

Next Steps

Just like tree branches strive to expand, I hope that this project will “branch out” too!

• Gather feedback from the design community on Branchout Design system
• Add interactive prototyping to bring these static designs to life
• Expand the system with additional components and patterns
• Apply the system to more complex design challenges

Branchout isn’t an endpoint — it’s a launchpad 🚀

Conclusion

What excites me most about Branchout isn’t what it is now — but in its potential for transformation.

By designing interfaces across different industries (entertainment, healthcare, productivity), the system demonstrated its practical utility and versatility. By sharing this project, I hope to showcase not just my design skills, but also my commitment to learning industry best practices and creating efficient workflows for future design work.

This design system is an invitation — to designers curious about systematic approach, to those seeking a starting point, or professionals looking for a flexible framework. Feel free to explore, critique, and reimagine Branchout. After all, design is a collaborative journey, and every perspective adds depth to the conversation.