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
- A product manager describes the concept in natural language in Figma.
- Figma Make generates low-fidelity layouts.
- Designer refines them.
- 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
- Drop legacy screenshots into Figma.
- Figma Make converts them into editable low-fi frames.
- Designer updates components.
- 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
- Designer creates full high-fidelity mockups.
- 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.
(*Note: Your instance may need to be whitelisted for the Figma MCP. If you encounter connectivity issues, please create a ServiceNow support ticket including your (Figma app) <client_id> or reach out to your ServiceNow account manager.)
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>
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.
