Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse AI

AI

NEW
IntroductionAgent skillsUse AI with SGDSFigma workflowsDevelopment workflowsPrompt tips

Figma to code

Use Figma MCP to move between design and code with SGDS as your source of truth.

What this means in simple terms

Figma MCP lets your AI tool read useful information from Figma, not just a screenshot.

Instead of guessing from a flat image, the AI can understand structure like frames, layout, spacing, components, variants, and styles.

If your team uses SGDS, this gets even more useful because the AI has a proper design system to follow instead of inventing its own patterns.

Why this helps SGDS teams

Without SGDS, AI may generate something that looks close but uses the wrong component, the wrong variant, or inconsistent spacing and behaviour.

With SGDS, the AI can follow a shared source of truth. That means more consistent outputs, less cleanup, and smoother handoff between designers and developers.

Choose your workflow

Figma to codeCode to Figma

This is the best starting point if you already have screens in Figma and want the AI to help translate them into SGDS-aligned code.

1

Go to your Figma screen

Locate and select your Figma frame.

2

Give your AI the Figma context

With the Figma MCP server enabled, share a Figma link to the frame or node.

  1. Click the Dev Mode toggle or use the keyboard shortcut Shift + D.
  2. Under MCP, click Copy example prompt.
3

Ask for SGDS-aligned output

Be explicit that you want SGDS-aligned output.

Example prompt Copy
Use this Figma frame and implement it with SGDS components and patterns. Map the layout to SGDS as closely as possible and flag anything that does not have a direct SGDS match.
4

Review before handoff

Before handing it off, check that the output uses the right SGDS components and variants, keeps the same hierarchy as the design, and includes any missing states or accessibility considerations.

A good practice is to keep your design file high quality with proper naming and SGDS components, so AI can match elements accurately and generate more reliable code.

Use this workflow when your team already has working UI in code and you want to bring it into Figma in a way that is still useful for design work.

1

Start from the real coded page

Start from the real implemented page, view, or component. Pick the exact coded screen you want to bring into Figma.

2

Ask the AI to move it into Figma

Ask the AI to capture or recreate the coded screen in Figma.

Example prompt Copy
Take this coded page and create a Figma screen that matches it using the design system where possible.
3

Rebuild with SGDS logic

Do not treat this as just a screenshot exercise. The goal is to rebuild the screen with the right SGDS logic:

  • correct components
  • correct variants
  • correct spacing and tokens
  • reusable design structure where possible
4

Tidy the Figma file for reuse

Once the screen is in Figma, tidy it up so it is usable for future design work. Rename frames properly, check hierarchy and spacing, and replace anything temporary with the correct SGDS library component if needed.

Useful skills

These skills are especially helpful in this workflow:

  • figma-implement-design for turning Figma designs into code
  • figma-generate-design for moving code or a live page into Figma
  • figma-use for creating or editing things directly in a Figma file
  • sgds-components for choosing the correct SGDS component
  • sgds-utilities for applying SGDS tokens and spacing correctly

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2