Home Original page

[Feature] Implement twig component by jaugustin · Pull Request #239 · bernaferrari/FigmaToCode

Summary

This MR introduces an experimental workflow for exporting Figma designs directly to Twig + Tailwind components.

The goal is to streamline the design-to-code workflow and improve consistency between UI and implementation.

How it works

  • Component mapping: Each Figma component instance is replaced with a Twig component, using the Figma component’s name as the Twig component name.

  • Property binding: Figma component properties are converted into Twig attributes.

  • Component composition: If a Figma component includes a Frame named TwigContent, its content will be rendered as HTML/Tailwind inside the Twig component tags.

Example

You can test it, on the Figma example file: https://www.figma.com/design/2SO4cvRbzKcTIPdY76FEDW/Figma-to-Twig?node-id=2185-255&p=f&m=dev

image

<div class="w-[400px] px-8 py-10 bg-white inline-flex flex-col justify-start items-start gap-10 overflow-hidden">
  <div class="self-stretch pb-10 border-b border-[#eeeeee] flex flex-col justify-start items-start gap-5">
    <div class="justify-start text-black text-base font-normal font-['Roboto_Mono'] leading-6">Simple component</div>
    <twig:ButtonBrand />
  </div>
  <div class="self-stretch pb-10 border-b border-[#eeeeee] flex flex-col justify-start items-start gap-5">
    <div class="justify-start text-black text-base font-normal font-['Roboto_Mono'] leading-6">Component with properties</div>
    <twig:TextRow disabled="false" error="There is an error" help="Coucou ça va " label="Label" placeholder="e.g. Placeholder" />
  </div>
  <div class="self-stretch flex flex-col justify-start items-start gap-5">
    <div class="justify-start text-black text-base font-normal font-['Roboto_Mono'] leading-6">Component with nested content</div>
    <twig:ToggleRow checked="false">
      <div class="flex-1 inline-flex flex-col justify-start items-start gap-1 overflow-hidden">
        <div class="self-stretch justify-start text-[#222222] text-base font-normal leading-6">Label of the toggle</div>
        <div class="self-stretch justify-start text-[#777777] text-sm font-normal leading-5">This is description isn’t part of the component but was added through TwigContent component swap</div>
      </div>
    </twig:ToggleRow>
  </div>
</div>

Notes

This feature is experimental and may evolve based on design and dev feedback.
This feature is enable with a Twig button in tailwind tabs

image