Json to Wireframe - CopyandoPaginas

About this plugin

Landing Page Wireframe Generator (JSON → Figma)This plugin generates responsive landing-page wireframes directly in Figma using a JSON structure as the source of truth. You can import your JSON by pasting it from the clipboard or by uploading a file.For each breakpoint defined in the JSON, the plugin automatically creates a corresponding frame in your Figma file. Breakpoints follow the default Tailwind CSS scale:mobile: 420px;sm: 640px;md: 768px;lg: 1024px;xl: 1280px;xxl: 1536px.JSON StructureTo work correctly, the imported file must follow the TypeScript schema below:type Pages = Array<{meta: {breakpoint: Breakpoint;};data: FigmaNode;}>type Breakpoint = "mobile" | "sm" | "md" | "lg" | "xl" | "xxl";type FigmaNode = {name: string;layoutSizingHorizontal: "FIXED" | "HUG" | "FILL";layoutSizingVertical: "FIXED" | "HUG" | "FILL";width: number;height: number;maxWidth: number | null;paddingTop: number;paddingBottom: number;paddingLeft: number;paddingRight: number;marginTop: number;aspectRatio: null | "square" | "video";gridColumnCount: number;gridRowCount: number;gridColumnSpan: number | null;gridRowSpan: number | null;gridColumnGap: number | null;gridRowGap: number | null;gridChildVerticalAlign: "MIN" | "MAX" | "CENTER" | "AUTO";layoutMode: "NONE" | "HORINZONTAL" | "VERTICAL" | "GRID";primaryAxisAlignItems: "MIN" | "MAX" | "CENTER" | "SPACE_BETWEEN";counterAxisAlignItems: "MIN" | "MAX" | "CENTER" | "BASELINE";itemSpacing: number;characters: string;fontSize: number;textAlignHorizontal: "CENTER" | "LEFT" | "RIGHT" | "JUSTIFIED";fontFamily: string;fontStyle:| "Thin"| "Extra Light"| "Light"| "Medium"| "Regular"| "Semi Bold"| "Bold"| "Extra Bold"| "Black";textCase:| "ORIGINAL"| "UPPER"| "LOWER"| "TITLE"| "SMALL_CAPS"| "SMALL_CAPS_FORCED";textListOptions: "ORDERED" | "UNORDERED" | "NONE";fills: string | null;strokeWeight: number;strokes: string | null;svgString: string | null;children: FigmaNode[];};How to Generate the JSONYou can generate a fully compatible JSON file using the service copyandopaginas.com.br, then import it directly into this plugin to instantly create structured wireframes.