Playbook Helper Plugin

An all-in-one toolkit built to enhance the discovery and QA phases of the design process.

Role

Design Systems Intern

Duration

June - August 2024

Tools

Figma
Visual Studios Code
Coda
React
TypeScript

Team

Playbook Team

Overview

As a Design Systems Intern for the CBS Digital Design team in Summer 2024, I focused on improving design operations, including naming hierarchies, documentation, and overall efficiency.

Over the course of my 10-week internship, I led various projects, with my main focus being the Playbook Helper Plugin—an internal Figma tool designed to assist CBS designers with their daily tasks. Based on the recurring challenges the design team faced, I asked myself:

How might we enhance the discovery and QA phases of the design process?

Project Goals

Error prevention

Ensure designs are using tokens and components from the design system

Realistic design

Deliver mockups that mirror the final output to impress stakeholders

Product Preview

Linter

Deliver designs with confidence

  • Check for unimported libraries
  • Scan for colors and spacing not linked to a variable

Content Reel

Make your designs come to life

  • Replace placeholder content with real data
  • Pulls recent data from API endpoints

Sticky note

Capture every insight

  • Jot down every idea, comment, or observation
  • Speed up the annotation process
  • Eliminate copy-pasting from FigJam

01 / Understanding the CBS Design Workflow

Power of plugins

6 of 9 CBS designers use Figma plugins.

  • Figma plugins eliminate mundane tasks and fasten workflow
  • Every CBS Designer has used a plugin at least once
  • This demonstrates the growing popularity of internal design tools

Plugins can be most useful at either ends of the design process.

Designer 1

[Plugins] can be a lifesaver.

Designer 2

These statements demonstrate how CBS’s designers find value in plugins, and may shed some light into their impact at enhancing the workflow and saving time.

Design Process Allocation

Diving deeper into where CBS designers typically use plugins, they range in the following process:

  • Quality Assurance
  • Discovery
  • Review

This highlights how plugins are used at either ends of the design process. With the types of plugins CBS designers use in each phase, it brings up the question of if there is a way to streamline the total number of plugins being used.

Maintaining a competitive design environment

This project draws significant inspiration from existing Figma plugins, particularly those developed by Discord and Microsoft.

  • Figma plugins have become a powerful tool for enhancing team workflows.
  • However, they often require extensive configuration to cater to the specific needs of CBS designers.

As more design-focused companies recognize the benefits of custom plugins:

  • It highlights the value of Paramount’s CBS remaining a competitive, design-driven internal team.
  • Leveraging technology allows the team to streamline processes without sacrificing quality.

Inspiring the CBS Design Ecosystem

  • The Playbook team is dedicated to streamlining the design process and fostering innovation in our workflow.
  • Drawing from key insights from our designers and leveraging the power of plugins, I was inspired to develop a unique solution that empowers creativity and supports the entire CBS Design ecosystem.

03 / Planning & Design Iteration

Creating a game plan

  • As the sole designer and developer, I outlined the plugin’s motivations, needs, challenges, and progress tracker.
  • This framework established clear goals and milestones, ensuring weekly deliverables and aligning expectations for the plugin's development.

Linter

Clear linter issue messaging

I aimed to create a user-friendly way for designers to quickly identify and resolve design system issues. To enhance the linter feature's UI, I implemented the following:

  • Filter buttons to sort by issue type
  • Shapes and icons to represent different issue types (e.g., color variable, color style, spacing variable)
  • A summary displaying the total number of issues

Contributing to and using a design system

Since the plugin was built for Figma, I integrated several design systems to maintain a clear, familiar design language for our designers:

  • Figma’s native icons and naming conventions
  • Material Design Icons, commonly used by the Playbook team
  • Playbook's Components and Branding Guidelines

Final Screens

I designed and prototyped a total of 15 screens for the Playbook Helper Plugin. These screens streamline the user workflow and provide backend management tools for the design systems team.

Playbook Helper Plugin

Takeaways

Pacing yourself

As the sole developer and designer on this project, I learned how to take a product from concept to completion. This experience taught me the importance of prioritization and focusing on the most impactful aspects of development.

Designing for edge cases

I needed a clear understanding of the task at hand. With only a list of potential features to implement, it was my responsibility to transform those ideas into meaningful solutions that would genuinely enhance users' everyday experiences.

Future Considerations

Color Contrast

Ensure accessibility guidelines are met for designers in the discovery phase.

Features for Devs

Include developers in the process by offering dev-exclusive features

Linter Suggestions

Offer instant fixes for designers