Using Figma for Employee Center Designs

[Ceanna]

This documentation will walk through locating the Employee Center Figma files on the ServiceNow community site, download and set up of the files and how to modify the file components. 

Checklist before you Get Started 

• Install Figma for Desktop (recommended) 
• Create a Figma Account if you do not have one already

Step 1: Set up your team and project folders 

1. Open Figma
2. Create a home for the Figma files 
   1. (If you are on Figma Organizations plan) Create a Team called “Shared Components” and a Project called “Employee Center” 
   2. (If you already have a Team space set up) Create a Project in your team workspace called “ServiceNow Employee Center.

Step 2: Download Figma Files and Setup your Project Space 

Now that you have set your project space up, it’s time to import your files into your project.  

1. Navigate to the ServiceNow Figma community by clicking this link: https://www.figma.com/@servicenow 
2. Locate the file “Employee Center Components & Styles”  
   1. Click “Open in Figma” or import the file into your Figma.  Note: if you don’t see this option, please refer to the Figma documentation for importing files.
   2.  Once opened, your file should be stored in “Drafts” 
   3. Right click on the file and move it to your project space 
3. Back in the ServiceNow Figma Community, locate the file “Employee Center Templates”  
4. Repeat steps 2a-2c 
5. Once in your project folder, import your files [Employee Center Templates] and [Employee Center Component & Styles] 

Checkpoint: At this point, you should have both files called “Employee Center Templates” and “Employee Center Components and Styles” loaded into your project folder. If not, go back through the steps. 

Step 3: Publish Libraries 

 For each file, publish it as a library so that you can access it in other files.  

1. In your EC Components file, you'll need to publish as a library
2. Click on the dropdown arrow next to the file name and select “publish library”. 
3. Repeat steps 3.1 and 3.2 in your EC Templates file.

Step 4: Working With Components 

1. Create a new Figma design file or open an existing one 
2. In your design file, open the Assets panel in the left sidebar. 
3. ClickLibraries to open the Libraries modal. 
4. To enable a library, locate the library you want to add from the list of available libraries and click Add to file.  
5. Add the library "Employee Center Components & Styles"
6.  If you don’t see the library you’re looking for, try toggling the dropdown (see screenshot below). 
7. To disable a library, hover over the Added button and click Remove. 
8. Exit to close the libraries modal. 
9. If you need additional support or if you are running into issues, follow the steps in Manage libraries in design files  

Step 5: Start Designing! 

1. You can now bring the assets into your design space by clicking into the asset and dragging it to the page. 

2. Follow Figma's documentation to learn more about how to modify and work with components.  

Additional Resources

• Review Figma's documentation site to learn more about working in Figma. 
• Get all the necessary steps, tools, and resources to start crafting experiences with the Horizon Design System.

[Ravi Chandra_K]

Hello @Ceanna,

Thank you for the article.

Can you please guide How can one get started in Figma, any resources to learn Figma would be helpful.

Kind Regards,

Ravi

[Ceanna]

@Ravi Chandra_K I would recommend reviewing  Figma's documentation site to learn more about getting started in Figma. 

Also, feel free to explore ServiceNow's Horizon Design System to learn more. Horizon is the design system for ServiceNow, built to empower, accelerate, and inspire creators across the platform. It provides UI components, patterns, styles, and guidelines for each of our primary app frameworks, all purpose-built to solve for common ServiceNow use cases.

[Daichi Ishikawa]

Hi, @Ceanna !

Thank you for sharing this interesting article!

Is this article applicable to the Figma Free plan as well?

I'd like to try it out first!!

[Ceanna]

@Daichi Ishikawa  With the free version of Figma, you are unable to share files or publish libraries. In the context of this article, the limitations here would be you could not publish the libraries. That said, you should still be able to leverage these files to build designs if you design within the same file as the components, opposed to in a separate file. 

More information can be found in Figma's documentation.

[Daichi Ishikawa]

@Ceanna 

Thank you for your quick response!