
I Open-Sourced a Figma-to-Avada Shortcode Converter (AI + Claude Code)
I spent 14 hours last month converting a Figma design into Avada Builder shortcodes. Fourteen hours of matching padding values and clicking through dropdown menus. So I built a tool that does it with AI. Then I open-sourced it. Repo: github.com/andreata/figma-to-avada The workflow Export Figma frames as SVG Feed to Claude Code with optimized prompts Get back paste-ready Avada shortcodes A page that took 14 hours manually now takes ~30 minutes. How it maps The conversion isn't random. SVG structure from Figma maps predictably to Avada's shortcode hierarchy: Figma frame (auto-layout: horizontal) └── Child 1 (width: 33%) → [fusion_builder_column type="1_3"] └── Child 2 (width: 66%) → [fusion_builder_column type="2_3"] └── Text layer "Heading" → [fusion_title size="2"]...[/fusion_title] └── Text layer "Body" → [fusion_text]...[/fusion_text] └── Rectangle (fill: #432df4) → background_color="#432df4" Figma's auto-layout properties (padding, gap, direction) translate almost 1:1 to Avada's con
Continue reading on Dev.to
Opens in a new tab



