map-design-automation-v1

About this plugin

Design your map poster layout in Figma, then export it as a JSON template your server can render. The plugin reads selected nodes and outputs a clean schema with frame size, slots (type, rect), text styles (font, weight, size, align, color), and optional SVG masks for the map layer. Use variables like {{title}}, {{location}}, {{coordinates}}, and {{date}} to populate content at render time.What it’s for•Designers who want full control of map poster composition in Figma•Developers who render maps server-side and need a predictable template formatKey features•Export the current frame → JSON (no manual redlines)•Slot types: text, map (vector) with optional mask.path (SVG d)•Preserves text styles and bounding boxes for accurate server layout•Simple variable binding via {{variable}} in text content•Works with any map provider on your backendHow it works1.Lay out your frame (e.g., 11×14) and name layers like [slot:title], [slot:map], etc.2.(Optional) Copy a vector shape’s SVG path to use as a map mask.3.Run the plugin → it emits a JSON template (see example below) ready for your renderer.{"templateId": "11x14","frame": {"w":3300,"h":4200},"slots": [{"slot":"title","type":"text","rect":{"x":637,"y":2984,"w":2025,"h":262},"props":{"fontFamily":"Inter","fontWeight":600,"fontSize":200,"align":"CENTER","color":"#000","content":"{{title}}"}},{"slot":"map","type":"map","rect":{"x":409,"y":487,"w":2468,"h":2115},"mask":{"type":"path","space":"frame","d":"…SVG path…"}}]}