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
General
Intuitive navigation
The plugin includes three core features: Linter, Content Reel, and Sticky Note. I explored two navigation options:
- I chose the Side Panel for its balanced and seamless navigation.
- The Menu Bar option was ultimately discarded, as it felt top-heavy when paired with the Linter feature.
Option 1
Side Panel
Option 2
Menu Bar
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.
