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 format

Key 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 backend

How it works

1.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…"}}

]

}