Varbase AI Figma

Design in Figma. Build in Drupal. No hand-coding.

Varbase AI Figma turns a Figma design into a real Drupal page you can edit. It builds the page with the Bootstrap 5.3 (Vartheme) components your team already works with. Paste a Figma link into the Drupal Canvas AI chat, and the assistant reads the design and builds the page for you.

What you can do

• Paste a Figma link and get a working page: hero sections, cards, calls to action, and more, laid out for you.
• Keep full control. Everything lands as normal Drupal Canvas components, so you can edit, restyle, or move them by hand.
• Stay on brand. Pages use your site's existing Bootstrap 5.3 look, not throwaway markup.

It reuses before it rebuilds

Before building anything, the assistant checks what your site already has: components, saved patterns, blocks, and views. It reuses them where it can, so your pages stay consistent instead of piling up duplicates.

From design to launch, in one chat

• Reads the design and plans the page, section by section.
• Builds the layout and places the content.
• Connects it to your site: set it as a homepage, add menu links and clean URLs, wire in Webforms and Views listings.
• Polishes it: checks accessibility and SEO, tidies the wording, and generates image alt text, meta descriptions, and translations.

Set it up your way, no code needed

You control how the assistant decides what to reuse or create from the settings page. A site builder can tune it without touching code.

Documentation

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

Works with

• AI Figma: the engine it builds on.
• Varbase AI Figma Base: a one-step recipe that sets up the whole workflow.
• AI Agent Modes: choose what the assistant is allowed to do.

Sponsored and developed by Vardot.