Sketch file translation plugin

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 swasth.app, 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

Select Text layers you want to translate
Navigate to plugins → Translate
Select language that you want to translate to
DONE

Now to code

use skpm to create the initial project seed ( i found it easier compared to older js)
Generate google translate API key from GCP
Enable developer mode in sketch

JavaScript

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 {
    UI.getInputFromUser(
      "What language should we translate to?",
      {
        type: UI.INPUT_TYPE.selection,
        possibleValues: ['Arabic,ar',
          'Bengali,bn',
          'English,en',
          'Gujarati,gu',
          'Hindi,hi',
          'Japanese,ja',
          'Korean,ko',
          'Malayalam,ml',
          'Marathi,mr',
          'Odia (Oriya),or',
          'Pashto,ps',
          'Punjabi,pa',
          'Sindhi,sd',
          'Tamil,ta',
          'Telugu,te',
          'Urdu,ur'],
        description: "Full list of languages https://cloud.google.com/translate/docs/languages"
      },
      (err, value) =&gt; {
        if (err) {
          // most likely the user canceled the input
          return
        }
        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`)
        }
        )
      }
    )
 
  }
}

sketch-plugin-translate.js

JavaScript

const google_translate_fetch_translation_endpoint = "https://translation.googleapis.com/language/translate/v2?key=$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 =&gt; console.error(e));
 
 
}

sketch-fetch-google-translate.js

Sketch file translation plugin

This is how it works

Now to code

Comments