Sketch file translation plugin

April 2, 2021 (3y ago)

Translate your sketch files automagically

If you are someone like me who uses sketch on a daily basis be it for prototypes or designing for products for Bharat use case like, then ability to demo apps/prototypes in local languages helps cut through a lot of noise and questions.

It also helps in ensuring you design for content that's not just in English but other Indian languages as well. I wrote a simple sketch plugin that will fetch translations of your current prototype and helps you visualize without having to manually copy paste and format etc.

This is how it works

  1. Select Text layers you want to translate
  2. Navigate to plugins → Translate
  3. Select language that you want to translate to
  4. DONE



Now to code

  1. use skpm to create the initial project seed ( i found it easier compared to older js)
  2. Generate google translate API key from GCP
  3. Enable developer mode in sketch
export default function () {
  const doc = sketch.getSelectedDocument()
  const selectedLayers = doc.selectedLayers
  const selectedCount = selectedLayers.length
  let values;
  if (selectedCount === 0) {
    sketch.UI.message('No layers are selected.')
  } else {
      "What language should we translate to?",
        type: UI.INPUT_TYPE.selection,
        possibleValues: ['Arabic,ar',
          'Odia (Oriya),or',
        description: "Full list of languages"
      (err, value) => {
        if (err) {
          // most likely the user canceled the input
        selectedLayers.forEach(function (layer) {
         // let source_text = layer.text
          let translated_text = fetch_lang_prefs(layer, locale); // fetch translated strings from google translate API
          UI.message(`Updated ${selectedLayers.length} text layers with ${value.split(",")[0]} language`)



const google_translate_fetch_translation_endpoint = "$YOUR_API_KEY";
export function fetch_translated_text(layer, locale) {
  let data = {
    "q": layer.text, //current value in layer
    "target": locale, // target locale code
    "source": "en" // I'm defaulting to english as source, you can always add a new UI.Selector and capture source lg as well

  //construct body 
  let options = {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"

  fetch(google_translate_fetch_translation_endpoint, options).then(function (text) {
    let res = (text.json())
    let translated_text = parse_gapi_response_json(res) //API contract for google translate
    layer.text = (translated_text)
    .catch(e => console.error(e));