Entity Design System

A Figma Library for web applications.

What is the design objective?

This Figma design system is inspired by my design work on previous SaaS projects.

The system is designed with special attention to specific workflows experienced in B2B and SaaS application design.

Many of the components are designed for large data display with a focus on data input and reporting.

OOUX Structure

Object Oriented UX (OOUX)

The design centers around the core entities that users interact with, rather than actions or functions. This structure is intended to simplify complexity and ensure flexibility while remaining agnostic to the applications expected functionality.

An example of entities would be projects, cases, claims, contracts, appointments, files, etc. These objects would contain properties and attributes.

You will find that some design choices have been influenced by some of my favorite systems including the Atlassian design system and Material design.

The system is designed with Figma and makes extensive use of variant properties with a strict architecture that is intended to speed prototyping and hand offs to engineer

What are the core specifications?

• Grid System: 8pt
• Scale Sequence: 8, 16, 24, 40, 64 (Fibonacci)
• Break Points (t-shirt size)
  • 0-480 (Small)
  • 481-768 (Medium)
  • 769-1279 (Large)
  • 1280 (X-Large)
• Typography: Roboto
• Default Color Palette
  • Blue (Primary)
  • Green (Secondary)
  • Orange (Tertiary)
  • Violet (Quarternary)

What is included?

The components are structured into three component types which are Elements, Patterns, and Views. Each component contains the following documentation.