This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

This AI section is still being developed. Please treat the content as contextual guidance only, as information may be largely incomplete and inaccurate at the time of reading.

MCP server

Learn what the Figma MCP server is, how it changes the workflow, and how you can use it with SGDS.

What is MCP server?

MCP stands for Model Context Protocol. It is a standard way for an AI tool to connect to another tool and use real information from it. In the simplest terms, it allows your AI to "see" what you're working on and respond based on that, rather than just your prompt. Instead of guessing, the AI can pull real context and use it to generate more accurate outputs.

About Figma MCP

Figma first introduced its MCP server to help teams generate code more accurately from Figma screens. Instead of giving AI only a screenshot, teams could give it real design context from selected Figma frames.

This meant the server could pass useful information to the AI, such as variables, components, tokens, and design context—guiding it toward correct outputs instead of generating something that only looks similar.

More recently, the remote MCP server has expanded beyond generating code from selected frames. It can now let agents write directly to the canvas, generate editable designs from live UI, and bring richer design context into the workflow.

Before Figma MCP

Figma screenshot

AI reads screenshot

Intent gets lost

Designers usually handed over screens, notes, and links, while developers or AI tools worked from screenshots and manual explanations. That made it easy for design intent to get lost.

When Figma MCP first arrived

Figma frame

AI reads design context

Code

With Figma MCP, AI can access design context directly from selected Figma frames instead of guessing from images. With a design system, it can better map components, variables, and layout context—producing more accurate outputs.

What it can do now

Figma canvas

AI reads full design context

Code

AI can work with richer design context, move more fluidly between code and Figma, and even write directly to the Figma canvas.

Before you start — Set up SGDS with Figma MCP

To set up your Figma MCP server and to turn your Figma designs into working code powered by SGDS components and utilities, you need these things:

Install and configure your AI agent

Choose your AI agent (Claude Code, Codex, Cursor, etc) and follow their documentation for their installation steps.

Set up Figma MCP

Read their documentation for the latest installation steps as their setup instructions are updated frequently. The necessary Figma skills will be installed automatically when you set up the Figma MCP plugin.

Install SGDS web component package

Run the following command if you have not have SGDS components installed:

npm i @govtechsg/sgds-web-component

Install SGDS agent skills

Run the following command to install the skills:

npx skills add govtechsg/sgds-web-component

Select all existing skills from the list. This pulls the latest skills from the skills/ folder of this repository into your local .agents/ directory, where compatible AI tools automatically pick them up.

You only need to complete this setup once. Once everything is in place, your AI agent will have the context it needs to work with SGDS — just prompt it and it will know what to do.

Working between Figma and code

Use the workflow that matches your starting point.

Figma to code

Code to Figma

Start here if you already have screens in Figma and want the AI to help turn them into SGDS-aligned code or implementation guidance.

Diagram showing the Figma to code workflow.

Go to your Figma screen

Choose the frame or layer you want the AI to work from. Make sure the Figma Dev Mode MCP server plugin is running locally before proceeding.

Give your AI the Figma context

With the Figma MCP server enabled, give the AI the right Figma context. You can do this in different ways depending on how your MCP setup works:

Desktop MCP: select the frame or layer directly in Figma, or open Dev Mode and copy the relevant Figma link.
Remote MCP: share the relevant Figma link with your AI client so it can pull the design context into the workflow.

Ask for SGDS-aligned help

Be explicit that you want the AI to implement the design using SGDS components and patterns where possible, not just produce generic front-end output.

Example prompt

Build this Figma frame using SGDS web components and utility classes. Refer to the SGDS skills for the correct component APIs, utility tokens, and layout pattern.

AI generates the code

The agent will read the selected Figma frame via the MCP server, reference the installed SGDS skills to identify the right components and utilities and generate code that replicates the design using <sgds-*> components and SGDS CSS utility classes.

Keep your Figma frames clean and well-structured for the best results.
Name your Figma layers descriptively — the agent uses layer names to infer intent.
If the output is not accurate, refine your prompt by specifying which section or component to focus on.
See Prompt tips for more effective results.

Start here if you send your code back to Figma for further design refinement.

Diagram showing the code to Figma workflow from you, to AI agent, to Figma MCP, to Figma output.

Decide which page or section you want to send to Figma

Choose the live page, flow, or section you want to bring into Figma. Tell your AI exactly what should be captured, so it can turn that UI into editable Figma layers.

Tell your AI where you want the screen or objects to be sent to

Tell the AI where the captured screen or objects should go in Figma. If you already know the destination, include the relevant Figma link in your prompt. Here are a few ways you can get it:

To get the link of a Figma page: Click the Share button at the top right hand corner and select Copy link.
To get the link of a frame: Right click on a frame and choose Copy/Paste as → Copy link to selection.

Prompt your AI to send the page or section to Figma

Be explicit about what you want sent and where it should go. Ask the AI to map the result to SGDS components, tokens, and layout rules where possible, and to flag anything that does not have a direct SGDS match.

Example prompt

Send my dashboard page to Figma at this place <insert link of figma's page or frame>. Map to SGDS as closely as possible and flag anything that does not have a direct SGDS match.

Make changes on your Figma

Once the screen is in Figma, tidy the file for future design work. Use clear names, keep the hierarchy clean, and replace temporary UI with SGDS components where possible. When you are ready to turn it back into code, refer to the Figma to code workflow.

Keep your Figma frames clean and well-structured for the best results.
Name your Figma layers descriptively — the agent uses layer names to infer intent.
If the output is not accurate, refine your prompt by specifying which section or component to focus on.
See Prompt tips for more effective results.

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.