How to create UI Builder pages from Figma templates?

From creating custom apps to designing self-service user interfaces, ServiceNow UI Builder offers a seamless, intuitive platform with over 100 out-of-the-box web components and extensive customisation capabilities. 

Whether you’re a developer looking to craft engaging workspaces or an architect aiming to supercharge productivity of you organisation, UI Builder as part of the ServiceNow App Engine Studio and the NOW platform is the key to delivering consumer-grade experiences tailored to specific user criteria. Explore the endless possibilities of UI Builder and transform your digital business workflows with its innovative features.

About ServiceNow UI Builder

ServiceNow UI Builder is a tool that allows organizations to create and customize workspaces and user interfaces. It provides a modern, intuitive layout system with reusable, context-aware components, making UI design simple. Some of its capabilities include creating engaging, personalized experiences for different user criteria, building quickly with out-of-the-box web components, and customizing pages with a variety of context-aware components. Organizations can leverage UI Builder to deliver workflows that connect people, functions, and systems, personalize experiences, and design self-service user experiences with a responsive portal interface. Developers can use UI Builder to build new pages or customize existing pages for Agent Workspace and portals using the Now Experience UI Framework. Additionally, UI Builder offers a code editor for further customization, allowing developers to use CSS, HTML, JavaScript, XML, and JSON to create a custom look and feel for their applications.

Watch our webinar about Figma based UI Builder pages

In the webinar we are showing step by step how to build modern portals or workspaces using Servicenow UI Builder from scratch based on Figma templates. Damir, ServiceNow expert at teiva Systems, shows to the participants the ServiceNow UI Builder tool’s features and capabilities, such as its drag-and-drop interface, components, templates, and customization options.

Additionally, the session will focus on how to design and create custom, user-friendly interfaces for ServiceNow applications, even without extensive coding skills. Attendees will also gain insights into UX design principles and best practices to enhance user satisfaction, usability, and accessibility.

The webinar will further demonstrate how the UIBuilder can be employed to customize applications to meet specific business needs, thereby improving overall user experiences.

Lastly, it might include real-world use cases and examples demonstrating how organizations have successfully utilized UIBuilder to enhance their applications and user interfaces.

Check out next webinar about UI Builder, App Engine Studio, and other topics under Webinar section.

How Teiva Systems leverages UI Builder to build employee experiences?

After our experts understood the requirement and we are sure, that custom pages pr agent workspaces are the right capabilities, we proceed with detailed requirement gathering, design and implementation.

To build workspaces with UI Builder, you can follow these steps:

Create a Workspace

Use the UI Builder to create a workspace with a single builder, delivering engaging, personalized experiences for all users.

ServiceNow Workspaces are prebuilt pages or dashboards for specific target audience that contain reports and action elements. You can empower your operations and business teams with targeted, purpose-built information on a single, configurable workspace.

Currently, there are pre-built workspaces for Service Operations, Cloud Operartions, Hardware Asset Management, Enterprise Asset Management, CMDB Monitoring and Management, Security Analysis, Cloud Cost Management, Enterprise Architecture. But you can also build your own.

Utilize Out-of-the-Box Components

Build quickly with over 100 out-of-the-box web components or create your own, allowing for extensive customization.

ServiceNow’s Next Experience Components provide an extensive set of pre-built elements for crafting user interfaces on the Now Platform®, designed to enhance user experience and streamline data management. These components range from interactive elements like action bars and buttons to data display tools such as calendars and forms. They are integral for creating intuitive and efficient UIs, allowing for easy interaction, organization, and visualization of data. With features like email components, avatars, and digital signatures, they cater to various functional needs, making them versatile for different user scenarios. The overarching goal is to offer customizable, user-friendly interfaces that simplify complex workflows and data processes within the ServiceNow ecosystem.

Customize Pages

Design self-service user experiences with a responsive portal interface, and personalize experiences by engaging teams and supercharging productivity with collaborative workspaces from scratch or from existing templates.

Target Experiences for Different Audiences

Easily target experiences for different audiences with variations to your pages, defining interactions so users can make changes and act on platform data, all from a single UI.

Match Page Design to Organizational Styles and Standards

Create, edit, and keep data private in multitenant environments, matching page design to your organization’s styles and standards.

By following these steps, you can leverage the UI Builder to create custom workspaces and deliver engaging, consumer-grade experiences based on specific user criteria.

Further materials and resources:

• Next Experience Academy #11: Workspace and UI Builder Tips and Tricks
• UI Builder Product Page
• UI Builder Docs

In conclusion, ServiceNow UI Builder is a gateway to creating intuitive, efficient, and tailored digital workspaces. Its integration with Figma templates paves the way for seamless and aesthetically pleasing user interfaces, underlining the significance of this tool in the realm of digital transformation.

Are you ready to explore the endless possibilities with ServiceNow UI Builder and transform your digital workflows?

Teiva Systems is a ServiceNow Premier Partner and provides advisory, architecture, implementation, training and support services. Teiva Systems specialises in building custom applications and integrations with ServiceNow App Engine leveraging platform capabilities like common data model, security, integration layer.

Kostya Bazanov is ServiceNow Leading Architect and Technology Advisor since 2011. He acted in various roles such as technical consultant, implementer, solution architect, team lead in national and global projects and ServiceNow platform rollouts. Kostya is certified in ServiceNow ITSM, Discovery, Event Management, Application Development and other critical modules and capabilities.

Kostya Bazanov, Managing Director, Jan 07, 2024