AI Figma

Turn a Figma design into a Drupal page, right inside Drupal Canvas.

AI Figma connects Figma to the Drupal Canvas AI assistant. Open the Canvas AI chat, paste a Figma link, and ask it to build the design. The assistant reads your Figma file and builds the page using your site's own components, colors, and fonts, filled with the real text from the design. No coding, and no new screens to learn.

How it works

AI Figma reads your design straight from Figma (colors, fonts, layout, text, and images) through the Figma API, on the server. It hands that information to Drupal's AI and AI Agents tools, so the assistant builds from the real design, not from a screenshot.

What you get

• Build Drupal Canvas pages from a Figma link, inside the Canvas AI chat.
• Uses your real design: colors, fonts, layout, text, and images.
• Adds Figma tools to the Canvas AI assistant so it can plan the page.
• Works with any Drupal theme. The Varbase AI Figma layer adds a Bootstrap 5.3 setup on top.
• Keeps your Figma token safe, encrypted with the Key and Easy Encryption modules.

Requirements

• Drupal 11.2 or newer
• The Drupal AI and AI Agents modules
• The Key and Easy Encryption modules
• A Figma personal access token with read access

Documentation

https://project.pages.drupalcode.org/ai_figma/

Works with

• Varbase AI Figma: sets it up for Bootstrap 5.3 (Vartheme) and adds design resolution and more AI tools.
• Varbase AI Figma Base: a recipe that sets up the whole workflow in one step.
• AI Agent Modes: choose what the assistant is allowed to do.
• AI Playwright: lets the AI see the rendered page.