Improving Designer Workflow with Design System
3 Team Members
May - October 2025
Design System Guy
Overview
I worked on the foundation of AMD Software first design system.
During my internship with AMD’s User Experience team, I helped shape the design system that unifies the look, feel, and behavior of AMD’s digital products. From designing interactive prototypes to refining component behaviors and documenting patterns, I worked to create a system that empowers designers and developers to build cohesive experiences with clarity and efficiency.
Context
Laying the groundwork for change.
When I first joined, the team didn’t have a proper design system in place. Everyone had their own way of organizing files, assets were scattered, and the products often felt like they were stitched together without a common thread. At the same time, the team was transitioning its design assets from Adobe XD to Figma, which created the perfect moment to rethink how everything was organized.
Context 1.1 - problem overview
GOAL
Establish a clear and consistent design foundation.
Create a unified design system that organizes assets, standardizes components, and brings consistency to the current AMD Software experience.
Improve design-to-development handover efficiency.
Create a scalable system that streamlines collaboration and ensures faster, more consistent design-to-development handover for the current AMD Software.
audit
Collect existing design assets.
I gathered all existing design assets, including screens, components, icons, and older explorations from multiple teams and past projects. I then organized them into clear pages, grouping related elements to understand the current ecosystem.
Audit 1.1 - grouping design assets
lAYING THE fOUNDATION
Color, spacing & text-styles.
With the foundation set, I moved on to defining the three core pillars of the visual language: color, spacing, and typography. These elements appear in every component, so getting them right was essential!
Foundation 1.1 - color, spacing & text-styles
Documentation template.
To ensure the design system was easy to understand and adopt, I created a clear documentation template that standardized how every component and pattern should be presented.
Foundation 1.2 - documentation template
BUILDING THE COMPONENTS
Defining component properties.
To make components more consistent and easier to use, I defined clear properties for each one, such as size, state, type, and icon options.
Building 1.1 - component properties
Applying design tokens.
I applied color and typography tokens across all components to ensure they worked seamlessly in both light and dark mode.
Building 1.2 - applying design tokens
Slot method.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content.
Building 1.3 - slot method
NEW PROJCECT DIRECTION
Shifted focus to improving experience for future software.
As the team redirected efforts toward the next generation of AMD Software, I didn’t get the chance to fully test the design system built for the current product :(
However, this shift created a new opportunity to build a fresh design system from the ground up with stronger foundations, updated visuals, and patterns that better supported the future direction of the software.
New direction 1.1 - a new fresh start
NEW GOALS
Support future initiative with a scalable system.
Build a future-focused design system that serves as the foundation for the upcoming rework of AMD Software, ensuring designers and developers can collaborate efficiently as the product evolves.
Lessons From Earlier Attempts
Color mismatch.
I discovered major inconsistencies in how colors were used across the product. Without clear guidelines, teams applied colors differently depending on their interpretation, leading to unclear states, mismatched styles, and a lack of visual hierarchy
Lessons 1.1 - color mismatch
Styling gaps.
I also found significant inconsistencies in component styling, one example is with buttons. Different screens used different sizes, corner radiuses, spacings, and even interaction states.
Lessons 1.2 - styling gaps
tAKING IT TO THE NEXT LEVEL
The push for a better color foundation.
To keep the design system flexible, I defined primitive tokens as the base color palette and used semantic tokens to apply those colors throughout the components. This allowed components to rely on intent-driven values rather than fixed hex codes.
Updates 1.1 - primitive tokens
Once the primitives were set, I mapped them to semantic tokens named by purpose or state. This ensured components always referenced meaningful, role-based tokens, which made updates much smoother and more consistent.
Update 1.2 - semantic tokens
A proper spacing & radius tokens.
To bring consistency to layouts, I introduced numeric tokens for spacing and radius based on a structured 4-point scale. By defining a predictable set of spacing and radius tokens, layout decisions became clearer, adjustments were safer to make.
Update 1.3 - structured spacing & radius tokens,
Streamlined text styling.
Text styles were inconsistent across different parts of the product, with each feature using its own font sizes and line heights. I simplified this by consolidating everything into a single, structured typography scale with clear header and body levels.
Update 1.4 - streamlined text-style
BUILDING THE COMPONENTS
Dissecting the designs.
After the designs were approved by stakeholders, I began breaking the UI into smaller, reusable components to establish a maintainable foundation. This process also revealed common UI patterns that could be reused across other screens and future designs
Building 2.1 - dissecting the designs
Applying proper color structure.
With the help of pre-defined color tokens, I could easily assign colors to components according to their semantic role. This not only sped up the design process but also ensured consistency across the system.
Building 2.2 - proper color structure
Applying foundational design tokens.
With predefined foundational tokens, all design assets can be categorized by token type, allowing designers to simply apply the appropriate tokens based on the asset type.
Building 2.3 - applying design tokens
Supporting multiple variants.
Instead of creating endless variants that would complicate the system, I chose to use the slot method. By treating slots as flexible placeholders, I gave the components room to adapt their content while still maintaining a consistent and polished appearance.
Building 2.4 - slot method
dOCUMENTATION
A big challenge between design and development is interpretation. What looks clear in Figma can become unclear in development, leading to misalignment in implementation and back-and-forth.
To solve this, I created guidelines that outline each component’s behavior and variants so designers and developers know exactly how things should work without the guesswork. Designers may also benefit from getting a proper understanding of how to use the design system and the components.
Guideline 1.1 - UI components behavior guideline
Guideline 1.2 - usage guideline
IMPACT
Consistent & maintainable mockups.
Once we started using system assets, things just felt more consistent. For example, colors were unified and the number of random hex codes floating around dropped way down. It also made our mockups so much easier to maintain, since updates could be applied quickly and carried across all designs without extra work.
Impact 1.1 - consistent color usage
No more guess works.
Additionally, with pre-defined values, designers no longer have to guess values like spacing & radius. It is as easy as picking from a set menu! This not only sped up decision-making but also gave every screen a cohesive rhythm and flow.
Impact 1.2 - consistent radius & spacing
THE NEXT STEP
Proposing documentation using Supernova.
The next step is to create the documentation in Supernova, as it transforms the design system from static Figma files into a living, developer-ready source of truth. Supernova automatically syncs design tokens, components, and guidelines while generating platform-specific code and versioned documentation.
It also includes an AI assistant that allows internal team members to ask questions about components or usage, making it easier to discover, and understand the design system.
