Issue with MCP–Figma Integration: UI Not Rendering as per Figma Design
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
4 hours ago
Hi everyone,
I’m working on a project where we’re using the MCP server and Build Agent to generate UI layouts in ServiceNow based on our Figma designs. However, after connecting MCP with Figma, the UI output produced in ServiceNow does not match the expected design.
The issue:
- The first image is the design we expect (from Figma).
- The second image is the UI we actually get after MCP renders it in ServiceNow.
The spacing, alignment, and overall layout are noticeably different. It looks like the MCP output is not accurately translating the Figma design.
Has anyone faced this mismatch issue before?
- Has anyone else faced this UI mismatch issue between Figma and MCP?
- Are there any specific configurations needed inside MCP for accurate rendering?
- why are build agent not able to replicate exact design ?
- Do we need to follow specific constraints, naming conventions, or auto‑layout rules in Figma for correct MCP interpretation?
- Are there any known limitations or recommended fixes?
- Any best practices to ensure MCP renders the UI exactly as in Figma?
Additional Prompt Provided to MCP (for context):
Prompt used:
Implement this design from Figma.
@https://www.figma.com/design/DzpAcQZOnvAwT8e6XM8ZHq/Customer-Portal---ServiceNow?node-id=0-1&p=f&t=…
Pay attention to the details and variables used in this file of the UI page. Create the design exactly as in the Figma link.
Any guidance or best practices would be greatly appreciated!
.png){kind=link}
.png){kind=link}