Why This Workshop?
You don’t have to be a designer to build powerful, elegant, and user-friendly experiences on ServiceNow. Whether you're a product manager, developer, content strategist, or architect, our workshop—“Configuring with Horizon & Figma”—was created just for you.
We know that experience creators often struggle with questions like:
- What components should I use?
- How do I ensure consistency across UIs?
- Where do I even begin in Figma?
This session demystified all of that.
🎯 What Attendees Learned
We designed this workshop to introduce the Horizon Design System and teach how to use Figma to create ServiceNow experiences—no design background required. By the end of the session, participants had:
✅ Explored the Horizon Design System's components, patterns, and templates
✅ Gained hands-on Figma experience—even if they’d never opened the tool before
✅ Created their first UI prototype using reusable, configurable design elements
✅ Understood how to collaborate more effectively with cross-functional teams
✅ Learned how to reduce design debt and decision fatigue using a systems approach
💡 Horizon: One System to Empower All Creators
What is Horizon?
At its core, Horizon is ServiceNow’s unified design system—a central source of truth for building modern, usable, and consistent user experiences across the platform. But it’s more than a set of Figma files or documentation. It’s a full ecosystem of tools, guidance, and shared language for creators of all backgrounds—whether you write code, craft content, or manage products.
You’ll find Horizon at horizon.servicenow.com, where it functions as your launchpad for great design.
🎯 Why Horizon Matters
We created Horizon because building intuitive, effective user interfaces shouldn’t feel like reinventing the wheel each time. Horizon exists to:
- Streamline decision-making
By offering reusable, pre-approved components and patterns, Horizon helps eliminate the guesswork in design decisions. - Promote consistency
Using the same elements and guidelines across teams ensures a unified look, feel, and behavior—boosting trust and usability. - Accelerate delivery
Developers, designers, and non-designers alike can assemble experiences quickly using templates and component properties—no need to start from scratch. - Enable collaboration
When everyone speaks the same design language, cross-functional teams work faster and communicate more effectively.
🧰 What You’ll Find in Horizon
Horizon is organized to help you both learn and build:
✅ Learn & Grow
- UX best practices from ServiceNow’s design SMEs
- Pattern documentation that explains how and when to use specific design approaches
- Content, accessibility, and AI guidelines to create inclusive and intelligent experiences
✅ Get Work Done
- Design system references for each app framework (like Workspace, Service Portal, Native Mobile, and UI16)
- Component libraries with configuration guidance for each building block
- Figma libraries with ready-to-use components, templates, and styling assets
- Links to supporting docs, like developer APIs and UI Builder integration tips
It’s all curated, searchable, and continuously updated—no more chasing down slides, PDFs, or Slack messages to find out “what’s latest.”
🔍 What Makes Horizon Different?
You might wonder, “Do I really need another design resource?”
Here’s the thing: Horizon isn’t just another URL. It connects the dots between all the tools and processes you're already using at ServiceNow—Figma, UI Builder, documentation, and platform guidance.
Think of Horizon as your single point of reference—whether you’re starting a new app, building a portal, configuring a form, or writing documentation. Instead of digging through 5 different sources, Horizon brings it all together.
🧱 Horizon’s Core Building Blocks
Here’s how Horizon breaks down the building of UI experiences:
- Components
These are modular UI elements like buttons, forms, modals, and lists. They’re flexible, configurable, and mapped to platform capabilities. - Patterns
Think of these as recipes or playbooks. They help you solve specific UX problems—like how to handle loading states or display notifications—with best-in-class guidance. - Templates
Full-page layouts assembled from components and patterns, designed for common workflows. Use these to jumpstart your project or as a reference.
Pro tip: Start with a template > adapt using patterns > tweak individual components = a fast, efficient way to build UIs.
🧩 App Frameworks Covered
Horizon provides tailored resources for ServiceNow’s primary app frameworks:
- Workspace – For agent-focused productivity tools
- Service Portal – For self-service experiences
- Native Mobile – For building on-the-go mobile apps
- UI16 – For traditional admin experiences
Each framework has its own Figma libraries and implementation guides, ensuring you design experiences fit for purpose.
📎 Integrated Across the Platform
Horizon components are not just for Figma. They’re connected to:
- UI Builder – Build apps using the same logic and component structure
- Developer APIs – Understand how to implement designs in code
- Design documentation – Align your work with ServiceNow standards
This integration means less friction between design and development, and fewer surprises when translating ideas into reality.
🛠️ Hands-On Design Challenge
During the workshop, attendees used Horizon to:
- Identify the right components for a real-world UI challenge
- Explore patterns that guide how those components come together
- Use templates to scaffold their designs in minutes
- Build out a Figma prototype with confidence and clarity
This hands-on experience proved that with Horizon, anyone can design better—not just designers. We ran a 4-part activity to help attendees practice everything they’d learned:
- Choose a framework & problem: e.g., Workspace or Portal
- Set up Figma & import templates/components
- Sketch wireframes & assemble your UI
- Configure components and present your solution
The most rewarding part? Watching participants light up when their prototype came to life in Figma—some for the very first time!
Useful Resources
📥 Download the full deck (attached below)
