Figma to Drupal Canvas Using MCP

Figma to Drupal Canvas Using MCP and GitHub Copilot

Overview

This project demonstrates how to connect Figma’s Model Context Protocol (MCP) server to Drupal Canvas using GitHub Copilot.
With this setup, you can automatically generate Drupal Canvas components directly from your Figma designs — without writing front-end code manually.

The workflow shows how a local Figma MCP instance communicates with GitHub Copilot in VS Code, which then instructs Drupal Canvas to create or update components based on your Figma design structure.
It demonstrates how MCP can enable AI-assisted design-to-code workflows within Drupal.

Requirements

• GitHub Copilot installed in Visual Studio Code (Dev or Full seat)
• Copilot instructions file available on GitHub:
  
  https://github.com/Witzevds/figma-to-drupal-copilot-instructions-file
  
• DDEV (latest version) with Drupal 11 support
• Figma MCP server running locally

Setup Instructions

1. Initialize the Drupal project:

   mkdir canvas-demo
   cd canvas-demo
   ddev config --project-type=drupal11 --docroot=web
   ddev composer create-project phenaproxima/xb-demo --stability=dev

2. Install Drupal and open Canvas:

   ddev drush si -y
   ddev drush user:login canvas/editor/canvas_page/1

3. Connect Figma MCP to VS Code:

   Open your settings.json file in VS Code and add the following configuration:

   {
     "github.copilot.chat.agent.thinkingTool": true,
     "github.copilot.chat.summarizeAgentConversationHistory.enabled": false,
     "chat.mcp.discovery.enabled": true,
     "chat.mcp.servers": [
       {
         "name": "figma-connection",
         "transport": {
           "type": "sse",
           "url": "http://127.0.0.1:3845/mcp"
         }
       }
     ],
     "chat.agent.enabled": true,
     "git.replaceTagsWhenPull": true,
     "chat.instructionsFilesLocations": {
       ".github/instructions": true
     }
   }

4. Create a Figma component:

   Open a new Figma design and create a component — for example, a Pricing Table.
   You can use a plugin such as Sprout UI to simplify component creation.
   Ensure that all layers are clearly named and structured; Copilot relies on this structure to generate accurate output.

5. Enable the MCP server in Figma:

   In Figma, go to Preferences → Enable MCP Server.
   Add your local MCP server, which will automatically create a mcp.json file in your project folder containing the MCP server URL.

6. Add the Copilot instructions file:

   Create a .github folder in your VS Code project and place the instructions file from the GitHub repository inside.
   This file defines how Copilot should interpret your Figma structure and interact with Drupal Canvas.

7. Create a new component in Drupal Canvas:

   In Drupal Canvas, go to Components → New and choose a name (for example, “Pricing Table”).
   Canvas will automatically generate a YAML file for this component in the sync directory.

8. Sync Figma with Canvas using Copilot:

   Provide Copilot with:

   • The Figma dev link for your component
   • The name of the Canvas component you created

   Copilot will read the Figma structure via MCP and write the corresponding YAML layout, fields, and markup directly into your Drupal project.

9. Update Canvas and rebuild cache:

   Once the YAML file is written, Copilot can trigger a cache rebuild so your new component appears and functions within Drupal Canvas.

Result

Within a few minutes, you will have a fully functional Drupal Canvas component generated directly from your Figma design.
This approach demonstrates how MCP can bridge the gap between design and implementation, making front-end development faster, more consistent, and easier to maintain.

Status

This is a proof of concept intended for experimentation and learning.
It is not production-ready yet but provides a strong foundation for developers exploring AI-assisted design-to-code workflows in Drupal.

Try it Yourself

• Follow the setup instructions above.
• Download or review the Copilot instructions file on GitHub:
  
  figma-to-drupal-copilot-instructions-file
  
• Experiment with your own Figma components and provide feedback.

Video Tutorial

Watch this video for a visual guide to setting up the Figma to Drupal Canvas workflow:

https://www.youtube.com/watch?v=Ml3csokdvW8&list=PLKS30krzpAtp7eaXZTkdTDdGLQBdhp0EW&index=2

Author

Witze Van der Straeten

Exploring the intersection of AI, design systems, and Drupal Canvas automation.