Back to Plugins
Json to Wireframe - CopyandoPaginas
Generate responsive landing-page wireframes in Figma from a JSON file.
Plugin Preview
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 Structure
To 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 JSON
You 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.
Plugin Details
| Version | 1 |
|---|---|
| Created | December 8, 2025 |
| Last Updated | December 8, 2025 |
| Category | website-templates |
| Creator | João Henrique |
| Stats | 0 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:main.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the website-templates category.