Create a Design from JSON

Open Design Canvas (its Design files page) or Starters, choose Import JSON, paste the document in the drawer, and select Create Design file. The import creates a new editable Design file in the selected Personal or team context. It does not change another file. Website administrators can paste the same document or upload a batch under Admin → Design starters to add starters to the gallery for every account. The category field determines which gallery group contains it. Under Admin → Design starters, an administrator can see the initial and imported starters, hide an imported starter, or delete either kind. Deleting a starter removes it from the gallery without changing Design files already created from it.

On Admin → Design starters, administrators can select up to 500 .json files at once. Each file can be up to 1 MB, and the batch can total up to 7 MB. Exact duplicate JSON documents are skipped, including duplicates already in the gallery and repeated files in the same batch. Every file must be valid before any new starter in the batch is added. Choose files or paste one document in the text box; a submission accepts one method at a time.

Use the copy icon in the article's top right corner to copy the format. The complete example below can also be selected and copied. The whole JSON document is checked before anything is saved.

Document fields

{
  "formatVersion": 1,
  "title": "Event notice",
  "description": "Square event post with a title, date and image area.",
  "category": "social",
  "width": 1080,
  "height": 1080,
  "background": "#f4efe6",
  "layers": [{"type":"text","text":"Event title","x":80,"y":80}]
}

All fields except background are required. formatVersion is the number 1. title is 1–150 characters; description is 1–500 characters. category is exactly one of social (Social media), print (Print), work (Work), or screens (Screens and wireframes). width and height are whole numbers from 16 to 10000, in pixels. background defaults to white. Colours use six- or eight-digit hex, such as #24324a or #24324aff. layers needs at least one item. The import is limited to 1 MB and 1,000 layers, nested at most eight levels.

The importer creates a Frame at the specified size and puts the listed layers inside it, in order. Coordinates are relative to that Frame. It generates the internal layer IDs and parent links, so the JSON does not need them.

Layers

Each layer needs type: rectangle, ellipse, text, image, group, or frame. The optional name is the label in the Layers panel. x, y, width, and height are pixel numbers; the defaults are 0, 0, 100 and 100. Text defaults to 400 × 80. Width and height must be greater than zero and at most 10000. A group or frame may contain a children list of layers; only those two types may have children. A nested Frame can set clipContent to true.

All layer types can set rotation in degrees, opacity from 0 to 1, visible, locked, fills, strokes, strokeWidth, cornerRadii, and effects. visible, locked, and clipContent are booleans. cornerRadii has four numbers in top-left, top-right, bottom-right, bottom-left order.

Text layers require text. They may set font (a CSS font stack such as Inter, Arial, sans-serif), fontSize, fontWeight (100–900), lineHeight, letterSpacing, textAlign (left, center, right, or justify), and textResizeMode (auto-width, auto-height, or fixed). Set a width that fits the intended lines. Text defaults to auto-height and a dark fill. It remains editable after import.

An image layer is an empty image area. Its fill is visible until the person chooses an image in the editor. It may set imageFit (fill, fit, or stretch) and alt. Its default fill is grey. Do not put an image URL or image ID in the JSON.

Fills, strokes and effects

fills and strokes are lists of paint objects. A solid paint is {"type":"solid","color":"#24324a"}. A gradient uses type linear, radial, conic, or diamond, with an angle and stops such as [{"position":0,"color":"#f4efe6"},{"position":1,"color":"#d04838"}]. Stop positions run from 0 to 1. A paint may set opacity from 0 to 1 and visible to false. Up to 16 paints are allowed in each list.

effects is a list of up to eight objects. An effect has type drop-shadow, inner-shadow, or layer-blur. It can set x, y, blur, spread, color, opacity, and visible. The editor lets you change all of these after import.

Complete example

{
  "formatVersion": 1,
  "title": "Community event post",
  "description": "Square post with an event title, date and image area.",
  "category": "social",
  "width": 1080,
  "height": 1080,
  "background": "#f4efe6",
  "layers": [
    {"type":"rectangle","name":"Header","x":0,"y":0,"width":1080,"height":240,
     "fills":[{"type":"linear","angle":90,"stops":[{"position":0,"color":"#24324a"},{"position":1,"color":"#465c79"}]}]},
    {"type":"text","name":"Event title","text":"Community event","x":70,"y":68,"width":940,"height":100,
     "font":"Inter, Arial, sans-serif","fontSize":72,"fontWeight":700,"textAlign":"center",
     "fills":[{"type":"solid","color":"#ffffff"}]},
    {"type":"image","name":"Event photo","x":70,"y":300,"width":940,"height":540,
     "cornerRadii":[20,20,20,20],"fills":[{"type":"solid","color":"#d7dce2"}]},
    {"type":"text","name":"Date and location","text":"Date · Location","x":70,"y":910,"width":940,"height":64,
     "fontSize":38,"fontWeight":600,"textAlign":"center","fills":[{"type":"solid","color":"#24324a"}]}
  ]
}

The imported starter is a starting point. Change its placeholder text and choose images in the editor. An imported starter uses the same editable Layers as the starters already in Design.

If the import is rejected and the named field does not explain why, Contact support.