Localizing sets of images

Share your knowledge Ask the community
1

Hello!

I have got a set of 8 screenshots with their caption. And 8 variations for each set, that’s 64 screenshots.

Now, I need to translate the captions for these 64 screenshots to around 40 languages. Obviously, this would involve a lot of work to do by hand. So I wonder if there’s a way to automate this?

I’ve found there was an extension called Craft that helped with this but it doesn’t seem to exist anymore. And Data Populator doesn’t work.

Is there any way to minimize the work using Sketch alone? I was reading about using symbols and overrides but I am not sure if they would help for this use case? Is there any way for me to feed these with a json file including the caption translations?

Any ideas on how to approach this are very welcome! Thank you!

PS: I searched the forums for a similar problem but couldn’t find anything!

2

hi,
check out the instructions for working with the data

You need to create a json file that contains the name and the path to the image.

you can probably even form json yourself in gpt so that you don’t have to translate it with your hands)

3

Hi Kozeev,

thanks for your reply!

I don’t need to “localize” the image, only the captions :slight_smile:

I’ve made some progress, but maybe you have a thought on what I currently have:

  1. I created a symbol for each caption. (8 captions)
  2. I created the 8 variations of each screenshot with their caption symbol. (64 screenshots)

Now, can simply go to the symbol, and using Data, exchange it for the correct caption text. It automatically changes to the 8 captions, and I only need to do this once per caption. This is already a great improvement!!

  1. I Duplicate the Page and Symbols for each new language (40 times). So that I only have to repeat step 1 again for each language, substituting the text from the language Data.

Does this sound reasonable or would you improve part of the workflow?

Final question: The 8 variations of each screenshot do share the caption text (and its styles). However, I need to adjust the fontsize (4 captions have one size, 4 have a different one). Should I do this with a different Override, a Nested Symbol or is there a more obvious way I am missing?

Thanks again for your help and thoughts!

4

it seems to me that I understood everything correctly and you just need to formalize the structure correctly and everything will work through the data.

json

[
  {
    "image": "screenshot_01.png",
    "caption": "Welcome to the app"
  },
  {
    "image": "screenshot_02.png",
    "caption": "Sign in to continue"
  },
  {
    "image": "screenshot_03.png",
    "caption": "Profile updated"
  },
  {
    "image": "screenshot_11.png",
    "caption": "Data En"
  },
  {
    "image": "screenshot_22.png",
    "caption": "Data Es"
  },
  {
    "image": "screenshot_33.png",
    "caption": "Data De"
  }
....
]
5

Thank you Kozeev!

1 Like
6

Hey Mezod,

About this last bit:

You can change sizes with a Text Style. If you need two sizes, create two Text Styles and assign one to the text layers in the symbol source. Once it’s been assigned, you can override the caption instances that need the other size.

If you always set the same captions to have the same size, you can assign the corresponding Layer Style right from the start so you can save the override step.

I hope this helps!

7

This is awesome, thanks Jorge! :smiley:

1 Like