Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

ServiceNow x Figma: Design to Enterprise Apps in Minutes

Andrew-Vitollo
ServiceNow Employee
ServiceNow Employee

3 weeks ago - edited 3 weeks ago

We are excited to announce that ServiceNow and Figma have partnered to help you rapidly jump from design to a functioning app. This integration lets designers, product managers, and developers focus on user experience and business logic without worrying about infrastructure or platform details.

 

This new capability is pivotal because it not only showcases an amazing partnership between ServiceNow and Figma, but it also demonstrates our ability to leverage MCP to rapidly expand the potential of Build Agent.

 

Examples

 

Scenario A: Prompt-Based Concept > Wireframe > App

  1. A product manager describes the concept in natural language in Figma.
  2. Figma Make generates low-fidelity layouts.
  3. Designer refines them.
  4. In the ServiceNow IDE, use the Figma design link in your Build Agent prompt to build a working ServiceNow app.

Scenario B: Screenshot > Low Fidelity > Wireframe > App

  1. Drop legacy screenshots into Figma.
  2. Figma Make converts them into editable low-fi frames.
  3. Designer updates components.
  4. In the ServiceNow IDE, use the Figma design link in your Build Agent prompt to generate UI + data.

Scenario C: High-Fidelity Figma Design > Production-Ready App

  1. Designer creates full high-fidelity mockups.
  2. In the ServiceNow IDE, use the Figma design link in your Build Agent prompt to generate UI, navigation, data models, and starter logic.

 

Deeper Dive

 

Figma and Build Agent represent a modern way to build apps where designers get more influence, developers get a head start and product teams iterate in days instead of months  

 

ServiceNow Build Agent is an autonomous AI agent embedded in the ServiceNow IDE, designed to ideate, generate, edit, troubleshoot and deploy applications and metadata using natural language instructions. It allows developers to describe features in plain English while the agent handles the technical implementation - an approach known as ‘vibe coding’. This enables rapid prototyping and full-stack app creation without manual coding, making development accessible to both technical and non-technical users.

 

ServiceNow Build Agent, in conjunction with the Figma MCP server provides a rich, structured set of design information that flows to Build Agent.

 

This includes:

  • Design Tokens: Colors, typography, spacing, and corner radii.
  • Component Properties: The structure and variants of individual design components.
  • Layout Logic: Auto-layout rules, constraints, and the hierarchical structure of the page.

This integration automatically generates the full-stack ServiceNow application including UI code, data models, and business logic scaffolding on the ServiceNow platform, ensuring that the output is secure, compliant, and ready for review, hardening and deployment.

 

In short, Figma shows what the app looks like, Build Agent makes the app real.

 

Ready to Launch?

 

You’ll need to setup an integration between Build Agent and Figma MCP Server. Make sure the following prerequisites are met prior to starting the integration.

 

Step 1: Validate your prerequisites:

 

  • Upgrade ServiceNow instance to either Zurich Patch 2 or Yokohama Patch 8
  • Upgrade the Build Agent plugin to version 1.2.1. Please note, this requires a Now Assist for Creator subscription.
  • Figma MCP Support* you must have a Dev or Full seat on a Figma Pro, Org, or Enterprise plan.
  • Your instance needs to be whitelisted for the Figma MCP Server. You will encounter connectivity issues if you do not complete this step. Please create a ServiceNow support ticket and include the following:
    • Subject: Figma MCP Server and ServiceNow Build Agent whitelist request.
    • Body: Include your (Figma app), it's <client_id> and the ServiceNow instance you would like to whitelist for the integration.
    • Alternatively, reach out to your ServiceNow account manager, and reference this blog post and they can assist on your behalf.
    • Once you have a confirmation that you have been whitelisted, proceed to the next step.

 

Step 2: Once you have validated the prerequisites, follow our setup documentation:

 

Connect Figma MCP server to Build Agent

 

Step 3: Using the Figma alongside Build Agent:

 

With the connection established, you can now use natural language to interact with Figma MCP server through the Build Agent.

 

For example, you can now use commands like:

  • Update my UI Page and build this <figma link>

 

Screenshot 2025-11-14 at 12.14.32 PM.png

 

 

Explore More Resources

 

For more information on the capabilities and features of the Figma MCP server, refer to the official Figma guide.

  • Structure your Figma file for better code:

https://developers.figma.com/docs/figma-mcp-server/structure-figma-file/

  • Write effective prompts to guide the AI:

https://developers.figma.com/docs/figma-mcp-server/write-effective-prompts/

 

 

We'd love to hear about your experience with this integration so let us know in the comments if you were able to successfully set it up and what designs you were able to build.

  • 3,031 Views
Comments
Andy Smith2
Tera Contributor
3 weeks ago

I'm having a bit of a nightmare getting this to work.

 

The Figma MCP Server documentation doesn't include the option to connect the ServiceNow IDE.

 

The Figma app I've created does not show the MCP section - as forewarned in the ServiceNow documentation.

 

The Figma support team state that OAuth is not required.

 

I can't get timely, responsive support from either ServiceNow or Figma.

 

Bumps on forehead territory, I'm afraid.

 

 

 

0 Helpfuls
Andrew-Vitollo
ServiceNow Employee
ServiceNow Employee
3 weeks ago

@Andy Smith2 thanks for your patience. I can confirm we received your support request. Figma hasn’t opened this up for general use, they need to whitelist your app id and instance. We are planning to batch the requests and will keep you posted. If anyone else has issues please reach out to our support team, we'll get you added to queue. 

Andy Smith2
Tera Contributor
3 weeks ago

Thanks for the update, Andrew.

 

I've raised a ServiceNow Support ticket (CS8724851) to request whitelisting (as per your community post). I'm pleased to say that Mike is working on the case - so that's very positive.

 

I've also been in touch with Figma Support to try to get that side of the integration set up as one of the other Pre-Reqs. Right now, I'm being told that the ServiceNow - Figma MCP Server integration is only available on Enterprise plans for Figma (min spend US$5000).

 

I'm sure that's a mistake and am politely challenging that position.

 

Sharing here, just in case any other newbie comes along and hits the same issues. 

 

Cheers,

Andy

0 Helpfuls
Andy Smith2
Tera Contributor
a week ago

Hi Andrew - just wanted to let you know that I've had my app/instance whitelisted - just found out an hor ago when checking my support ticket status. I can now see the MCP options in the Figma app config, so will revisit the configuration instructions and give it a go 🙂

 

I've uploaded screenshots of the effect of Whitelisting - I'm now seeing MCP options that simply weren't there before. 

 

Thanks for your help - very much appreciated. 

Andy

 

Figma App MCP Menu Option.pngOAuth Scopes MCP Connect Option.png

Andy Smith2
Tera Contributor
a week ago

Hi Andrew,

 

I've now got Build Agent connected to the MCP Server - and a Green status light/switch toggle (see screenshot).

 

Again, encouraging progress.

 

But when I ask Build Agent to do something "simple" - like "create a UI Page from the Figma design at RBM Figma – Figma" I get the little blue "working bar" for about 10 seconds then no result. 

 

I'm stumped when it comes to diagnosing this issue - there are no error messages, no logging that I can see and no way of knowing if the authentication is working.

 

Any tips on a simple end-to-end "connectivity and functional test" would be appreciated, as would any suggestions on how to diagnose "no result" problems.

 

In case this is more Support ticket territory, I've updated the existing ticket here:

 

Form - Now Support

 

Many thanks

Andy

 

 

Build Agent Connected to Figma MCP.png

0 Helpfuls
Andrew-Vitollo
ServiceNow Employee
ServiceNow Employee
a week ago

Glad to hear it @Andy Smith2, we are here to help. Let me take a look at the details you provided and coordinate with support. Just a quick update that we are batching requests, so thank you patience as you are submitting support cases.

 

I can can confirm that you not need a Figma Enterprise plan, this guide has the latest information.

https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions/ 

 

I also added a screenshot of taking a fictitious eCommerce brand 'Acme Fashion' that I used Figma Make to create, saved the design and had Build Agent build the home page. This is running on the ServiceNow platform, using React for the UI and has all the governance and security controls. We are excited for the possibilities this brings for our existing and new customers. 

 

AcmeFashion.png

 

Disclaimer: This demo uses fictional companies, data, and scenarios for illustrative purposes only.

 

 

0 Helpfuls
Version history
Last update:
3 weeks ago
Updated by:
ServiceNow Employee
Contributors