[{"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 starts with ",[28,398,399],{},"100 free render credits per 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","1hZCNbOPV43Y1TGxH97X7zVS0HqPzgyQj_Jdm_O-jv0",1785414150677]