Figma to Drupal

The aim of the "Figma to Drupal" module is to revolutionize the integration of design and development workflows by enabling the seamless generation of Drupal components directly from Figma designs.

This module would like to enables the seamless generation of Drupal components directly from Figma designs, transforming the way designers and developers collaborate. This innovative solution automates the conversion process, significantly reducing manual effort, minimizing errors, and accelerating the development cycle. Whether you're new to Drupal or an experienced developer, the "Figma to Drupal" module offers an intuitive and efficient way to bring your Figma designs to life within your Drupal projects, enhancing both productivity and creativity.

To resume, AI makes it easier to turn your Figma designs into code, streamlining the development process. With AI capabilities, you can export designs effortlessly, enhance the generated code, and even convert HTML to Twig when needed. Follow these simple steps to get started:

Additional Requirements

• Figma Access
• An account on Builder.io

Follow these simple steps to get started:

• Create an account at Builder.io.
• Install the builder.io plugin in Figma.
• Start exporting your design by following the steps shown in the video.
• Select the component you want to export.
• Open the builder.io plugin and generate an export design — this will give you multiple export options.
• Choose your preferred export settings and proceed to builder.io.
• Go to the Development tab and click Generate Code.
• Enhance the generated code using AI, such as adding links to titles or optimizing the structure.
• Convert HTML to Twig using AI if needed.

Video on how to proceed to generate Twig Drupal component from a Figma design

Video on how to manually proceed to generate Twig Drupal component from a Figma design

Demo with automation in Drupal CMS during the Dries note at DrupalCon Atlanta 2025

Join us on slack channel

#ai-contrib