Design-stage localization

Guides

• Guide to design-stage localization
• How to use Figma plugin
• How to use Sketch plugin
• How to use Adobe X plugin

Design Stage Localization step-by-step guide video playlist

Mastering Key naming in Figma for Design-led localization

Blog content

1. design-led localization workflow

Best Practices

• If you use components from a library

  • Export components to Lokalise project first
  • Use Auto-link existing translations when exporting component instances

• Give considerable thought to your key naming pattern:

  • Consider a custom one if required (e.g. [%Artboard_Name][%Element])
  • Ensure all team members use it consistently
  • Use key names that work for multiple platforms if necessary

• Only export to Lokalise screens requiring translation

  • Use the feature to exclude non-translatable elements (numbers, dates, etc.)
  • Consider batching exports and splitting pages into smaller groups (e.g. one flow per Figma file)
  • Keep parent frames/sections under 16Kx16K dimensions

• Export wisely

  • Use the Auto-link existing translations for exporting content without creating new keys
  • Use Merge duplicates to avoid multiple key creations for identical content
  • Avoid using Auto-link and Merge duplicates options if needing different keys for each Figma content item

Community content

1. UX content and design stage localization by Rosa Vieira de Almeida
2. Podcast - Start Localization at the Design Stage - Nimdzi LIVE! EP.36
3. Lokalise + Sketch: The main challenges when designing for a global audience