Model Online / On-Site
Duration
Modules 5 modules

Course Objective & Scope

When multiple product squads repeatedly design and code the same buttons, forms and modals in isolation, velocity drops and the customer experience fractures. This course teaches how to build, document and govern a living Design System shared by design and engineering.

Running a UI inventory, multi-tier design token architecture (primitive, semantic, component), accessible component API design, syncing Figma libraries with Storybook and code repositories, authoring usage guidelines, SemVer releases and governance models are practised hands-on. Participants produce a token schema, a component specification and a governance checklist for their organisation.

Who Should Attend?

  • UI/UX and Design System designers building or scaling shared libraries
  • Frontend and mobile engineers developing shared UI component packages
  • Product and engineering leads aligning multiple squads across web and mobile
  • Prerequisite: practical experience with Figma or component-based frontend development

Key Takeaways

  • Conduct a UI inventory audit to prioritise foundational tokens and core components
  • Structure a three-tier design token taxonomy that supports multi-brand and multi-theme products
  • Align Figma component properties directly with frontend component props and APIs
  • Document usage dos/don'ts, WCAG/keyboard/ARIA requirements and interactive Storybook examples
  • Run contribution workflows, semantic versioning and adoption tracking across product teams

Curriculum

Design System Foundations, UI Audits and Architecture
  • Differences between a style guide, a component library and a full Design System
  • Running a UI inventory, Atomic Design and classifying primitives versus patterns
Design Tokens: Taxonomy, Tiers and Multi-Theming
  • Global/Primitive, Alias/Semantic and Component-specific token tiers
  • Colour, typography, spacing, elevation and breakpoint tokens; Style Dictionary and W3C format
Component Architecture, API Alignment and Accessibility
  • Interactive states, slot/composition patterns and matching Figma props to code APIs
  • Keyboard navigation, focus rings, contrast ratios and ARIA attributes
Figma-to-Code Synchronisation and Documentation
  • Storybook, Figma Code Connect and automating token delivery via CI/CD
  • Writing clear usage guidelines, dos/don'ts and live interactive docs
Governance, Versioning and Enterprise Adoption
  • Centralised, federated and hybrid team models; RFC and contribution workflows
  • Semantic versioning, deprecation policies and measuring component adoption

Other Courses in This Category

  • Interactive Prototyping: From Rapid Flows to High-Fidelity Validation

    Interactive prototyping for digital product validation: from paper and lo-fi flows to hi-fi prototypes, Smart Animate and micro-interactions, realistic forms/carts with variables and conditional logic, and usability test readiness.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View
  • User Research: Qualitative, Quantitative and Usability Testing Methods

    Practical User Research for product and design decisions: research planning and hypotheses, in-depth user interviews, moderated and unmoderated usability testing, card sorting, synthesis and actionable insight reporting.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View
  • AI-Powered UI/UX: Designing with AI Tools and Building AI-Native Interfaces

    Dual AI mastery for product designers: accelerating research synthesis, wireframing/UI generation (Figma AI, v0, Relume) and UX writing with AI; plus UX design patterns for copilot, agentic and generative AI products.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View
  • Digital Marketing Strategy and Full-Funnel Execution

    End-to-end digital marketing strategy and channel execution: customer journey and funnel design, SEO and content, Google Ads and paid social, email/CRM lifecycle automation, conversion rate optimisation (CRO) and ROAS/CAC measurement.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View
  • Content Marketing Strategy: Topic Authority, Production and Distribution

    Strategic content marketing for B2B and B2C brands: buyer journey and search intent mapping, topic clusters and pillar pages, brand storytelling, multi-channel distribution and repurposing, and content ROI measurement.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View
  • Lead Generation: B2B Demand Generation, ABM and Funnel Conversion

    Lead Generation for B2B and high-consideration sales: ICP and buyer intent signals, demand generation and lead capture, high-converting landing pages, LinkedIn/Google and outbound/ABM plays, lead scoring and CRM/sales handoff.

    UX/UI & Digital Marketing Corporate
    Live Course
    5 modules
    View

Get in touch