Design system management at ProductPlan

ProductPlan is a product management tool that helps teams assess opportunities, build strategy, and deliver - all in one platform. Our design system is composed of brand guidelines and Figma components– all housed in Figma.

My role

  • Design new Figma components

  • Refactor old components as new Figma features are released

  • Add and update component documentation and guidelines

  • Consult engineering teams about language and component adoption

 

Goals

  • Create visual consistency across all product areas within ProductPlan

  • Improve mockup creation and prototyping velocity

  • Publish reusable and customizable components for design use

  • Create consistency of language and styling components used within the design system and engineering libraries

  • Meet accessibility standards

 

A glimpse into the design system

High-quality component documentation is crucial to an effective design library. This allows everyone to make quick and efficient decisions. Detailed documentation supports every aspect of the design system, and is organized, consistent, and easy to use. Our design system addresses accessibility, color, icons, logo styling, spacing, typography, component documentation, and more. Here are a few examples of what exists in the design system today:

 
 

EXample: Single-select dropdown component and its documentation

This is used throughout the app where a single selection needs to be made.

Utilizing the component library across product areas

Launch Management

Final Launch Management checklist mocks

Final Launch Management dashboard mocks

Launch checklist drawer

Strategy

Strategy overview page

Objective overview page

Metric configuration modal

New objective error handling

Discovery

Ideas page

Opportunities page

New idea creation drawer

Filtering ideas dialog box

Roadmapping

Timeline layout design

Timeline layout with roadmap history drawer

Roadmap index page with filter dialog box

Timeline layout with roadmap-level comments drawer

Roadmap setting modal with teams applied

Integrations

Custom integrations page

Delete token confirmation modal

The evolution of a design system

Our process:

  1. A proposed design is presented to the design team for critique

  2. Iterate on design based on feedback

  3. Create component in the Figma design library

  4. Document how, when, where, and why the component is used

  5. Publish component so it can be utilized across the design team

  6. Present component to the development team

  7. Communicate with engineers as the component is built and added to the dev library