[{"data":1,"prerenderedAt":472},["ShallowReactive",2],{"\u002Fdocs\u002Fautomate-figma-photoshop-canva-illustrator":3},{"id":4,"title":5,"body":6,"category":461,"date":462,"description":463,"extension":464,"heroImage":465,"meta":466,"navigation":106,"path":467,"readingMinutes":154,"seo":468,"stem":469,"tool":470,"__hash__":471},"docs\u002Fdocs\u002Fautomate-figma-photoshop-canva-illustrator.md","Automate Figma, Photoshop, Canva & Illustrator graphics",{"type":7,"value":8,"toc":453},"minimark",[9,14,18,21,25,32,47,56,61,358,361,365,375,379,390,394,405,409,449],[10,11,13],"h2",{"id":12},"the-problem","The problem",[15,16,17],"p",{},"You designed a social post in Canva, a banner in Figma, a product shot in Photoshop, an icon set in Illustrator. Now marketing wants fifty versions with different names, fifty different sizes, or a weekly refresh with new numbers — and none of those tools are built to be called from a script. Someone opens the app and does it by hand, every time.",[15,19,20],{},"Bluepic's IDML API is a plain HTTP endpoint built for exactly this: render a template with different field values, at scale, from your own automation. It doesn't speak Figma's or Canva's file formats directly — but a thin InDesign wrapper around your existing artwork (five minutes to set up, once) turns any of them into an automatable pipeline.",[10,22,24],{"id":23},"the-pattern","The pattern",[15,26,27,31],{},[28,29,30],"strong",{},"1. Export your artwork."," From Figma or Canva, export PNG, JPG or PDF. From Photoshop or Illustrator, keep the native PSD\u002FAI or export flattened — either works. PDF is the simplest universal choice if you're unsure.",[15,33,34,37,38,42,43,46],{},[28,35,36],{},"2. Wrap it in InDesign, once."," ",[39,40,41],"code",{},"File → Place"," the exported artwork into an InDesign document, add the text frames (or other elements) you want to control programmatically — a name, a price, a date, a location — then ",[39,44,45],{},"File → Export → InDesign Markup (IDML)",". This file is your reusable template from now on.",[15,48,49,50,55],{},"Draw each of those frames with headroom for your longest real value (a long store name, a long price string) — the frame's size is a hard ceiling for anything you substitute in later, not just a starting point. See ",[51,52,54],"a",{"href":53},"\u002Fdocs\u002Ftext-frames-and-best-practices","Text frames, bounds & best practices",".",[15,57,58],{},[28,59,60],{},"3. Render it from code.",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-js shiki shiki-themes github-dark","const variants = await getVariantsFromYourData(); \u002F\u002F e.g. 50 store locations, 50 SKUs, 50 event dates\n\nfor (const variant of variants) {\n  const textOverrides = {\n    '0:TextFrame_headline': variant.title,\n    '0:TextFrame_price': variant.price,\n  };\n\n  const form = new FormData();\n  form.append('idml', bannerIdml);\n  form.append('assets', backgroundArt, 'background.pdf'); \u002F\u002F your Figma\u002FPhotoshop\u002FCanva\u002FIllustrator export\n\n  const res = await fetch(\n    `https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Fidml\u002Frender?format=png&textOverrides=${encodeURIComponent(JSON.stringify(textOverrides))}`,\n    { method: 'POST', headers: { Authorization: apiKey }, body: form },\n  );\n\n  await saveFile(`banner-${variant.id}.png`, await res.blob());\n}\n","js","",[39,69,70,101,108,128,142,152,161,167,172,191,209,233,238,256,289,301,307,312,352],{"__ignoreMap":67},[71,72,75,79,83,86,89,93,97],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"snl16","const",[71,80,82],{"class":81},"sDLfK"," variants",[71,84,85],{"class":77}," =",[71,87,88],{"class":77}," await",[71,90,92],{"class":91},"svObZ"," getVariantsFromYourData",[71,94,96],{"class":95},"s95oV","(); ",[71,98,100],{"class":99},"sAwPA","\u002F\u002F e.g. 50 store locations, 50 SKUs, 50 event dates\n",[71,102,104],{"class":73,"line":103},2,[71,105,107],{"emptyLinePlaceholder":106},true,"\n",[71,109,111,114,117,119,122,125],{"class":73,"line":110},3,[71,112,113],{"class":77},"for",[71,115,116],{"class":95}," (",[71,118,78],{"class":77},[71,120,121],{"class":81}," variant",[71,123,124],{"class":77}," of",[71,126,127],{"class":95}," variants) {\n",[71,129,131,134,137,139],{"class":73,"line":130},4,[71,132,133],{"class":77},"  const",[71,135,136],{"class":81}," textOverrides",[71,138,85],{"class":77},[71,140,141],{"class":95}," {\n",[71,143,145,149],{"class":73,"line":144},5,[71,146,148],{"class":147},"sU2Wk","    '0:TextFrame_headline'",[71,150,151],{"class":95},": variant.title,\n",[71,153,155,158],{"class":73,"line":154},6,[71,156,157],{"class":147},"    '0:TextFrame_price'",[71,159,160],{"class":95},": variant.price,\n",[71,162,164],{"class":73,"line":163},7,[71,165,166],{"class":95},"  };\n",[71,168,170],{"class":73,"line":169},8,[71,171,107],{"emptyLinePlaceholder":106},[71,173,175,177,180,182,185,188],{"class":73,"line":174},9,[71,176,133],{"class":77},[71,178,179],{"class":81}," form",[71,181,85],{"class":77},[71,183,184],{"class":77}," new",[71,186,187],{"class":91}," FormData",[71,189,190],{"class":95},"();\n",[71,192,194,197,200,203,206],{"class":73,"line":193},10,[71,195,196],{"class":95},"  form.",[71,198,199],{"class":91},"append",[71,201,202],{"class":95},"(",[71,204,205],{"class":147},"'idml'",[71,207,208],{"class":95},", bannerIdml);\n",[71,210,212,214,216,218,221,224,227,230],{"class":73,"line":211},11,[71,213,196],{"class":95},[71,215,199],{"class":91},[71,217,202],{"class":95},[71,219,220],{"class":147},"'assets'",[71,222,223],{"class":95},", backgroundArt, ",[71,225,226],{"class":147},"'background.pdf'",[71,228,229],{"class":95},"); ",[71,231,232],{"class":99},"\u002F\u002F your Figma\u002FPhotoshop\u002FCanva\u002FIllustrator export\n",[71,234,236],{"class":73,"line":235},12,[71,237,107],{"emptyLinePlaceholder":106},[71,239,241,243,246,248,250,253],{"class":73,"line":240},13,[71,242,133],{"class":77},[71,244,245],{"class":81}," res",[71,247,85],{"class":77},[71,249,88],{"class":77},[71,251,252],{"class":91}," fetch",[71,254,255],{"class":95},"(\n",[71,257,259,262,265,267,270,272,275,277,280,283,286],{"class":73,"line":258},14,[71,260,261],{"class":147},"    `https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Fidml\u002Frender?format=png&textOverrides=${",[71,263,264],{"class":91},"encodeURIComponent",[71,266,202],{"class":147},[71,268,269],{"class":81},"JSON",[71,271,55],{"class":147},[71,273,274],{"class":91},"stringify",[71,276,202],{"class":147},[71,278,279],{"class":95},"textOverrides",[71,281,282],{"class":147},"))",[71,284,285],{"class":147},"}`",[71,287,288],{"class":95},",\n",[71,290,292,295,298],{"class":73,"line":291},15,[71,293,294],{"class":95},"    { method: ",[71,296,297],{"class":147},"'POST'",[71,299,300],{"class":95},", headers: { Authorization: apiKey }, body: form },\n",[71,302,304],{"class":73,"line":303},16,[71,305,306],{"class":95},"  );\n",[71,308,310],{"class":73,"line":309},17,[71,311,107],{"emptyLinePlaceholder":106},[71,313,315,318,321,323,326,329,331,334,337,340,343,346,349],{"class":73,"line":314},18,[71,316,317],{"class":77},"  await",[71,319,320],{"class":91}," saveFile",[71,322,202],{"class":95},[71,324,325],{"class":147},"`banner-${",[71,327,328],{"class":95},"variant",[71,330,55],{"class":147},[71,332,333],{"class":95},"id",[71,335,336],{"class":147},"}.png`",[71,338,339],{"class":95},", ",[71,341,342],{"class":77},"await",[71,344,345],{"class":95}," res.",[71,347,348],{"class":91},"blob",[71,350,351],{"class":95},"());\n",[71,353,355],{"class":73,"line":354},19,[71,356,357],{"class":95},"}\n",[15,359,360],{},"Linked PDF, AI, EPS and PSD assets are rasterized automatically on Bluepic's servers — nothing from Adobe or Figma needs to be installed anywhere near this script.",[10,362,364],{"id":363},"multiple-output-sizes-from-one-file","Multiple output sizes from one file",[15,366,367,370,371,374],{},[39,368,369],{},"width"," and ",[39,372,373],{},"height"," query parameters override the rendered size independent of the document's own dimensions — useful if the same layout needs to ship as a square post and a story-format crop. Render the same request twice with different dimensions rather than maintaining two separate template files.",[10,376,378],{"id":377},"where-the-field-keys-come-from","Where the field keys come from",[15,380,381,382,386,387,389],{},"Load your wrapper IDML into the ",[51,383,385],{"href":384},"\u002Fidml\u002Fapi","interactive API playground"," once, tick the override checkbox, and it lists every text element with an empty input — type into the ones you want to control and copy the generated ",[39,388,279],{}," JSON as your starting shape. From there, driving the same keys with real data from your own system is the whole job.",[10,391,393],{"id":392},"credits","Credits",[15,395,396,397,400,401,55],{},"Every account gets ",[28,398,399],{},"100 free credits a month",", 1 credit per rendered output. Fifty banners in three sizes is 150 renders; check usage or ask about higher volume on the ",[51,402,404],{"href":403},"\u002Fidml\u002Faccount","account page",[10,406,408],{"id":407},"next-steps","Next steps",[410,411,412,419,426,442],"ul",{},[413,414,415,418],"li",{},[51,416,417],{"href":384},"Get your API key"," and try the playground with your own artwork.",[413,420,421,422,55],{},"If the automation is specifically about shipping the same design in multiple languages rather than multiple data variants, see ",[51,423,425],{"href":424},"\u002Fdocs\u002Ftranslate-figma-photoshop-canva-illustrator","Translate Figma, Photoshop, Canva & Illustrator graphics automatically",[413,427,428,429,432,433,339,436,370,439,55],{},"Read the ",[51,430,431],{"href":384},"full API reference"," for every parameter, including ",[39,434,435],{},"pages",[39,437,438],{},"dpi",[39,440,441],{},"engine",[413,443,444,445,55],{},"If a field needs mixed formatting (part bold, a different color), see ",[51,446,448],{"href":447},"\u002Fdocs\u002Frichtext-override-format","Rich text format for overrides",[450,451,452],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":67,"searchDepth":103,"depth":103,"links":454},[455,456,457,458,459,460],{"id":12,"depth":103,"text":13},{"id":23,"depth":103,"text":24},{"id":363,"depth":103,"text":364},{"id":377,"depth":103,"text":378},{"id":392,"depth":103,"text":393},{"id":407,"depth":103,"text":408},"automate","2026-07-16","Batch-generate variants of artwork made in Figma, Photoshop, Canva or Illustrator — personalized fields, multiple sizes, hundreds of outputs — with no design software running in your pipeline.","md","\u002Fdocs-images\u002Fautomate-figma-photoshop-canva-illustrator.svg",{},"\u002Fdocs\u002Fautomate-figma-photoshop-canva-illustrator",{"title":5,"description":463},"docs\u002Fautomate-figma-photoshop-canva-illustrator","other-tools","_wddlFBbMZmVbG-1zKGGKilyC90YWNrnb5XV5jaIVaI",1784233655657]