Scaling a Style Guide into a Design System

The initial style guide covered core elements like:

• Logos, colors, and fonts
• Buttons
• Form inputs (dropdowns, text fields, checkboxes, radio buttons)
• Responsive designs for desktop and mobile

After reviewing these components, I identified recurring patterns and collaborated with the design manager to establish consistent foundational rules for the design system.

I collaborated with the design manager to establish and add more to the core Design System Foundations. The pages added included:

• Spacing rules
• Page layout guidelines
• Breakpoint standards

Next, we organized all existing components into Atoms following the Atomic Design Principles by Brad Frost, grouping them by type on dedicated pages and sorting them alphabetically for easy reference.

Before adding more elements, my priority was refining the existing components. I ensured each had:

• Prototype animations
• Responsive sizing (desktop & mobile)
• Clear usage rules
• Detailed design notes (if needed)

Perfecting these foundational atoms ensured a smoother process when scaling up to more complex components (molecules and beyond).

With foundational rules, you can apply these guidelines to expand the design system with new components.

I utilized the foundational rules to add additional atoms first that were utilized on the companies applications and home page following our established template of:

• Component name and description
• Mobile and desktop versions
• Component Rules
• An example of where it’s already used

As I expanded the design system, we collaborated with the development team to ensure consistency across both teams.

The developers maintained their component library in Storybook. After reviewing their existing UI components, I added the missing components to the design system Figma file, ensuring the components:

• Followed the design system template
• Are organized by complexity and alpha order
• Updated based on the foundation rules

We then worked with developers to sync these changes in Storybook, ensuring alignment between teams.

When Figma introduced Variables, I explored how to harness this feature to enhance our design system’s flexibility and scalability. Through research and testing, I implemented Figma Variables and Modes to enable:

• Responsive typography (font sizes and line heights)
• Adaptive spacing (padding and margins)
• Dynamic corner radius sizing

With the power of Variables set up in the design system it allowed for streamlined design consistency and improved efficiency. These updates allowed for future expansion, integrating color modes and laying the groundwork for light/dark theme switching.

By implementing the design system in GuideStone’s web application, I stress-tested components through active UI/UX work. This practical application helped validate:

• Discoverability: How quickly designers could locate the right component

• Prototyping Functionality: Whether animations and interactions worked as intended

• Variable Clarity: If variable options were intuitive and well-documented

• Variable Reliability: Whether variables behaved correctly in different contexts

When a component didn’t meet standards, I would:

• Create a dedicated branch in the Figma design system file to address the issues

• Report updates to my manager if the fix required substantial time investment

• Propose solutions (like renaming components to improve discoverability when needed) and variable options for my manager to pick from

• Implement the updates.

All changes were meticulously tracked via branch names and descriptions before being merged into the main system for so I could do further testing and project implementation.