Figma Template & Component Library

For Project Management Institute

To improve efficiency and consistency across marketing pages, I created a Component & Template Library in Figma that directly aligns with Sitecore components. This system reduced design time by 50%, improved content author workflows, and ensured brand consistency across all digital marketing products.

Project Overview

My Role

  • Marketing Component Library Owner – Built and maintained a Figma-based Component & Template Library for the marketing department. Created components, patterns, and templates that align with Sitecore components to ensure a seamless design-to-development workflow. 

  • Documentation & Guidelines – Provided clear annotations, best practices, and usage guidelines to empower designers, marketers, and content authors.

  • Cross-Team Collaboration – Ensured alignment between marketing designers, Sitecore content authors, and the development team.

Collaborators

  • Marketing Department (Web Business Analyst, Web Platforms Lead, Sitecore Authors, Marketers)

  • Design Systems Team (Design Engineer, Design Operations Leader)

The Problem

Before this system, the marketing team faced inefficiencies and inconsistencies in creating Sitecore pages. Designers and Sitecore authors lacked a centralized resource, leading to:

  • Inconsistent branding & UI elements across marketing pages.

  • Time-consuming design processes due to the lack of reusable components.

  • Content authors struggling to implement designs correctly in Sitecore due to missing guidance.

  • Frequent consultations with the Sitecore team to clarify available components and templates.

  • Pages being designed and approved by stakeholders with components and layouts that were not feasible in Sitecore.

The goal of this project was to create a scalable Component & Template Library in Figma that:

  • Ensures consistency across all marketing pages.

  • Aligns seamlessly with Sitecore components for easy implementation.

  • Empowers designers, content authors, and marketers with clear documentation, best practices, and usage guidelines.

The Approach

  • Conducted stakeholder interviews – Spoke with Sitecore authors and marketers to identify workflow challenges and gaps in documentation.

  • Aligned with the Design Systems team – Collaborated to avoid duplication of efforts, ensuring a unified approach to library creation and documentation. Maintained regular check-ins to keep design systems cohesive.

  • Audited existing Sitecore components – Reviewed all available components to ensure accurate representation and annotation in Figma.

  • Identified areas for improvement – Partnered with the Web Platforms team and developers to refine and update Sitecore components based on usability and performance needs.

The Solution

For UX Designers

  • Developed reusable components and templates in Figma that align with Sitecore components, ensuring seamless design-to-build implementation.

  • Standardized styles, spacing, and interaction patterns to create a consistent and cohesive user experience across all marketing pages.

  • Incorporated responsive design principles, ensuring adaptability across desktop, tablet, and mobile.

  • Eliminated the need for recreating components from scratch, improving efficiency and allowing designers to focus on higher-level design tasks.

For Sitecore Authors

  • Created detailed annotations and implementation guidance to help sitecore authors accurately set up components in Sitecore.

  • Developed comprehensive usage guidelines and best practices, enabling Sitecore authors to efficiently build pages without requiring design expertise.

For Marketers

  • Built a centralized library showcasing all available Sitecore templates and components, giving marketers full visibility into design possibilities.

  • Established clear guidelines for headlines, body copy, CTAs, and images to maintain brand consistency and improve content effectiveness.

  • Provided detailed explanations on the purpose and best use cases for each template section, ensuring marketers can optimize messaging.

Impact & Outcomes

  • Streamlined Design-to-Implementation Workflow – UX designers now work with components that match Sitecore exactly, reducing confusion and saving time.

  • Faster Page Creation – Sitecore authors can now build pages more efficiently with clear annotations and component guidelines.

  • Increased Design Consistency – Marketing pages maintain a cohesive visual identity, reinforcing the brand across digital experiences.

  • Greater Adoption Across Teams – The library became a go-to resource for marketers, designers, and Sitecore authors.

By The Numbers

50%

Reduction in time spent designing new pages

40%

Fewer design inconsistencies reported during the testing phase

80%

Adoption rate among marketing designers and content authors in the first month

Previous

Checkout Flow Redesign
Next

Membership Experience