Prototyping experiences with Figma

[AJ Siegel]

 

Background

ServiceNow's product design organization – known as the Experience Team (EX) – uses Figma as the primary design tool to create wireframes and prototypes of the screens that become our products with each release. To support the 500+ designers creating product-specific prototypes, the DesignOps and Design Systems teams curate libraries of components and styles that reflect our core design systems.

These libraries represent the widgets (Employee Center / Service Portal), components (UI Builder, Next Experience, Workspaces, and Classic Environment) and elements (Mobile) that make our UIs come to life.

For you, our customers and partners configuring our customizing solutions on ServiceNow, these libraries can serve as building blocks to explore ideas for your unique needs.

Within each kit are instructions on how to setup the libraries on your Figma Team or Organization plans so that colleagues across your organization can collaborate

To download the kit, visit our Figma Community profile

Our libraries provide components, styles, and templates for:

• Classic Environment
• Configurable Workspaces
• Employee Center
• Mobile
• Next Experience

Getting Help

If you run into any issues please post a question to the UX SIG and the team will respond within 5 business days.

Legal Disclaimer

Please review the attached legal disclaimer before working with the files

[fauverism]

So excited about this! Having this will help our team tremendously! Thank You!

[Arnold Yoon]

@fauverism You're very welcome.  Please provide us with feedback - we're always trying to make this better :). Lots of good things to come.

[Jodi Hartman1]

If I were any happier about this Figma functionality, I'd have to be twins!  Thank you!  Thank you!  

Question: Where can I find information about using Figma with UI Builder?

Thanks for all the great work you do to support the community!

[AJ Siegel]

Hey Jodi, thanks for the celebratory feedback! It's comments like these that help the team focus and continue to add value.

Can you expand on your question regarding Figma and UIB? Within the Next Experience Components file you have all the components that you can leverage with in a UIB-based application. In terms of layout, you would use the autolayout features of Figma to mimic the containers and flexbox layout model that UIB supports.

There are a couple ways we see teams working.

1. Designers live in Figma. They do all their prototyping, usability testing, and stakeholder feedback with Figma. They then hand off a link to the prototype to the ServiceNow developer to implement in UIB and any additional scripting
2. More platform-savvy designers may play a little in Figma and then move right into using UIB to setup the initial layout of the page(s). They may need help from a developer to hook up components to data resources depending on their experience and comfort with that level.

Let us know what else you are thinking about. Feel free to post specific question using the Start a Question button on the User Experience SIG homepage. Or this link will do:

https://www.servicenow.com/community/forums/postpage/board-id/sig-user-experienceforum-board

[Jodi Hartman1]

@AJ Siegel You answered the question for me.  That was exactly what I was looking for.  It would be cool to also have the Now Create process flows for Visio in Figma. 😉

Great work!  

@Arnold Yoon Great job on the videos!  This forum is shaping up beautifully.  Very helpful.  

[Arnold Yoon]

Thanks for the feedback @Jodi Hartman1 !  We welcome all suggestions and critical feedback too 🙂

[Swati Gupta2]

Hi

We notice some of the components (such as Announcement) that were part of the ServiceNow Figma library are no longer supported in Utah release. The Utah release seems to have a smaller library so we have a couple of questions -

1. How do we manage the components that were previously supported? 

2. As we are new to ServiceNow, can you please also advise if we need to change our library after every release of ServiceNow?

Thanks!

[VividSchwab]

Big thumbs up for Art Vanderlay making appearances in some of the Record Page Templates 😀

[alrahimkhan]

What is the difference between Next Experience and Core UI, where should I use what?

[AJ Siegel]

Hello @alrahimkhan Next Experience represents components you have access to when creating interfaces using UI Builder. This would include Configurable Workspaces.

The Core UI libraries represent what is in the traditional list & forms UI (also known as UI16 or Heisenberg if you've been around for awhile). 

Hope this helps.

[alrahimkhan]

@AJ Siegel Thanks for the clarification. Let's say I'm building a service now portal for ITSM usecase. Will I have the freedom to change the look and feel of the UI? For example: While users login into the service now backend and fill up an incident form, I want them to see different UI, like sharp edges input field, not curved edged input field. Same way, the font will be different, Instead of 2 column form, I will make it 3 column form. What's the level of changes acceptable.

[AJ Siegel]

ITSM Service Portal (/sp) is built on the Service Portal framework which is a different UI framework than Next Experience and Core UI. We do not have Figma resources for the IT portal as most customers are guided to leverage Employee Center for their employee-facing self-service experiences.

Employee Center is also built on the same Service Portal framework. We have an article on the theming possibilities with portals. Please read through Theming Service Portals to understand the possibilities 

[alrahimkhan]

@AJ Siegel  Thank you

[Christopher Bu3]

Do you have Manager Hub available in Figma?

[AJ Siegel]

@Christopher Bu3 we don't have ManagerHub available publicly. There are some available Figma assets for verified customers. Please contact us directly, experiencehub@servicenow.com

[MichaelC4953270]

Nice job on the Figma files for Service Now Employee Center! 

I am new to designing in ServiceNow but have been working with other Design Systems for many years now.

There are a few places where i was not able to edit the text because of missing fonts... "FontAwesome, Regular" was one of them... and these look to be the icons, Is there a place to download this exact version?  And is there any future attempts of just have an icon Figma file where the icons would just be referenced from? 

[AJ Siegel]

hey @MichaelC4953270  we'll forward this on to the design team that owns the Employee center Figma files (please confirm these are the ones you are talking about).

[ryancurrier]

Hi @MichaelC4953270,

Yes, you can download Font Awesome 4.7 version here. You'll also want to install the .otf font file.
You can reference this Font Awesome 4.7 cheatsheet to find, copy, and paste icons into figma.

Cheers! 

 

[LaurieS]

Hello. I'm trying to install the ServiceNow Figma libraries and no matter what I do, some of them just won't show up in the region. Is there anyone available to help answer questions about this?

• For some, the blue pen icon never turns gray (even after I publish it as a library).
• For others, the pen icon is gray and the button in the Library dialogue says "Added" but the library is not showing up in the Assets panel library drop down menu.
• Also, getting some puzzling messages about missing assets at times when publishing.

[fester2498]

We only get limited functionality and we need full functionality for the basic.

[AJ Siegel]

Hey @fester2498 I am not clear what you are asking. Figma is a third-party tool with their own licensing model and we recommending having at least Figma Professional to get the full value.

@LaurieS I just saw your note, so sorry it's been so long. Which libraries are you struggling with, feel free to DM me and we can figure it out.

[Deivid]

Hi @AJ Siegel and team, I am creating a new custom component using figma, I have the full license on the figma side, but I could not find the documentation on the servicenow side, on how to create the new custom component in the workspace. Is there any documentation or training on the serviceNow side? 
I found something using CLI, but it's a YouTube video and it's not that clear.

[AJ Siegel]

Hi @Deivid there are a few resources for external component development.

You can take the course on Now Learning or read the documentation on the Developer site.

[Gabriel Terra O]

Hi @AJ Siegel, I am looking for the "My Tasks" page from the Employee Center within the Figma templates. Do you know if this page will be included in a future version of the template, or should I create my own version?

[AJ Siegel]

@Gabriel Terra O We are working with the Employee Center team now to see if it will be possible to include this in our next release. Please stay tuned.

[AJ Siegel]

@Deivid please take a look at the Developer Portal and ServiceNow Docs (on CLI, component building for content on building custom components. There is also a Now Learning course. 

[RyanM4304729280]

Are the Next Experience libraries still available through Figma? The only link I could find took me to a Workspace library, and the Figma Resource page is only showing Employee Center, Native Mobile, Workspace, Core UI, and Accessibility Spec. Thanks!

[AJ Siegel]

@RyanM4304729280 to align with the naming conventions on the Horizon site, we renamed the Next Experience libraries to workspaces. You can read more about our Xanadu updates in the blog post.

[VivianaBrizuela]

Would love to learn more about this!

[MollyT]

Will there be a file created for the public sector digital service UI?

[Arnold Yoon]

Hi @MollyT - thank you for the comment - there are no plans currently for a PSDS resource, but it may be something we can explore in the future.