Shu Ha Ri - Figma Premium Design System

A comprehensive toolkit designed to elevate your design process and enhance your product’s user experience. Inspired by the Japanese martial arts concept of "Shu Ha Ri," our design system embodies the stages of learning and mastery, providing a structured yet flexible framework for designers at all levels.

Overview

The Shu Ha Ri Design System is built to support your journey through three stages of design mastery:

Shu (Follow the Rules)
Adhere to established design principles and guidelines to build a strong foundation.

Ha (Break the Rules)
Innovate and experiment while maintaining a cohesive user experience.

Ri (Transcend the Rules)
Achieve mastery and create new paradigms and approaches.

Component categories

Our system is organized into 64 component categories, each meticulously crafted to ensure consistency, accessibility, and usability.

Components and Variants: +7000
Styles: 100
Variables: 223

What you will find in each Component category

For every component category, we provide a detailed overview, including:

Component Page
An introductory page for each component, offering a comprehensive overview.

Description
A clear and concise explanation of the component’s purpose and functionality.

Anatomy
A breakdown of the component’s structure, highlighting its key elements.

Example of Use
Examples demonstrating where and how the component can be used effectively.

Guidelines of Usage
Best practices and guidelines to ensure optimal use of the component.

Variants
Display all variations of the component, showcasing different styles and states.

States
An exhaustive list of all possible states the component can exist in (e.g., active, disabled, focused).

Sizes
All available size options for the component, ensure flexibility and adaptability.

Full Instance Page
A comprehensive page showcasing all components' properties and states provides a holistic view.

Elevate your design experience

Discover how Shu Ha Ri enhances your design process with its versatile features. From a wide range of components to effortless customization and seamless dark mode integration, our design system is crafted to streamline your workflow and adapt to any project needs.

Diverse component library
A wide range of components to expedite your design and development.

Streamlined customization
Utilize variables to expedite and simplify your design adjustments.

Auto-Layout automation
Automatically adjust and organize your designs with Auto-Layout.

Variant-Powered workflow
Simplify your design process with components powered by variants.

Dark mode ready
Components designed for seamless dark mode integration.

Flexible typography
A versatile typography system that fits all screen sizes.

Who can leverage our design system?

Discover how our design system can transform various roles and industries. From startups to seasoned designers, see how each can benefit from streamlined workflows, enhanced creativity, and efficiency in their projects.

Startups
Speed up your journey from idea to market with our extensive component collection. Design, prototype, and iterate quickly.

Developers & Engineers
Enhance your freelance projects with precision and flair. Our design system equips you with the tools to shine in the creative industry.

Freelance Designers
Boost your freelance projects with precision and style. Our design system offers the essential toolkit to stand out and excel.

Agencies
Streamline your project timelines with a complete set of design elements. Achieve high-quality results with efficiency and creativity.

Students
Enhance your design skills with resources tailored for learning. Easily apply concepts and build expertise.

Designers (Junior, Mid, Senior)
Find inspiration at any career stage with our extensive design system. Grow, innovate, and excel in your creative design journey.