Figma Script for Text Replacement & PNG Generation

Job ID: 38911751

Budget: $10 – $30 USD

Figma file: https://www.figma.com/design/n6YvRiT7BOsRPyt1RoDmQf/01-Post-Template?node-id=1-5&t=FcCk7cExfmVvZAnL-1

Write the script that does the takes the input JSON:

{
"words": {
"hello": {
"en": "hello",
"es": "hola"
},
"soda": {
"en": "soda",
"es": "refresco"
}
}
}


Go through each word and:
Replace text in layers named label_{languageCode} with the right translation.
Find and replace image in layer main_image with image_{word_key} (e.g., image_hello or image_soda).

Since script is sandboxed, the images would have to be added to the project with those names (image_hello, image_soda, etc.), so that's how you would locate the images.

Text Layer Tweaks:
Make the text fill its box width and center-align it.
If the text overflows, shrink the font size so it fits on one line.

Export:
Export the design as PNGs at @1x, @2x, and @3x.

Batch Process Files:
I have multiple design files (e.g., Yellow, Purple), it needs to run for all of them. I have attached only one. You will need to change other so their label names are correct. So the output would be post_{color}_{word_key}.png, for example post_purple_hello.png
Related categories: JavaScript Scripting Figma