Sketch file translation plugin
Published02/01/2021
Stats2 min read ·
code
← Back to blog
Discussion
Add your thoughts
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.
dfs
.gif
sketch-plugin-translate.js
sketch-fetch-google-translate.js
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) => {
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`)
}
)
}
)
}
}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 => console.error(e));
}860 views
No comments yet. Be the first to share your thoughts.