An all-in-one toolkit built to enhance the discovery and QA phases of the design process.
Design Systems Intern
June - August 2024
Figma
Visual Studios Code
Coda
React
TypeScript
Playbook Team
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?
Ensure designs are using tokens and components from the design system
Deliver mockups that mirror the final output to impress stakeholders
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.
Diving deeper into where CBS designers typically use plugins, they range in the following process:
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.
This project draws significant inspiration from existing Figma plugins, particularly those developed by Discord and Microsoft.
As more design-focused companies recognize the benefits of custom plugins:
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:
The plugin includes three core features: Linter, Content Reel, and Sticky Note. I explored two navigation options:
Since the plugin was built for Figma, I integrated several design systems to maintain a clear, familiar design language for our designers:
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.
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.
Ensure accessibility guidelines are met for designers in the discovery phase.
Include developers in the process by offering dev-exclusive features
Offer instant fixes for designers