L10N Estimator

Figma Localization

Comprehensive guide for localizing Figma designs

Metrics

Revision Rounds:

2 revision rounds

File Preparation:

  • • Text Boxes: 15 text boxes/hour (DTP Prep)

Breakdown:

  • • Desktop Publishing (text boxes/hour): Latin/Asian = 15, BIDI = 5
  • • Desktop Publishing: Graphics (Editable) = 10 graphics/hour, Graphics (Uneditable) = 5 graphics/hour, Screenshots = 20 screenshots/hour
  • • Revision 1 (text boxes/hour): Latin/Asian = 30, BIDI = 15
  • • Revision 2 (text boxes/hour): Latin/Asian = 60, BIDI = 30
  • • Word Count: 25 words per text box, 30 words per graphic

Source Material

Required files and assets from the client:

  • • Figma design files: Figma project links or exported design files with editor access to Figma projects
  • • Figma account access: Editor access to Figma files or exported design files for localization
  • • Editable graphics: Source files (.PSD, .AI, .SVG) for graphics containing text or requiring localization, if available separately
  • • Fonts: Information about fonts used in designs, especially custom fonts, or font file access
  • • Design system: Figma design system components, styles, and tokens if applicable
  • • Brand assets: Brand colors, logos, and style guidelines for maintaining visual consistency
  • • Reference materials: Style guides, glossaries, terminology databases, and previous translations
  • • Graphics inventory: List of graphics that need localization vs. those that are universal
  • • Screenshots: Replacement images if screenshots need updating

Best Practices

  • • Use Figma's text editing: Leverage Figma's native text editing features for efficient text updates
  • • Maintain component structure: Preserve Figma component structure and instances when updating text
  • • Handle text layers individually: Update each text layer separately, ensuring proper formatting and alignment
  • • Use auto-layout: Utilize Figma's auto-layout features to accommodate text expansion automatically
  • • Test text expansion: Account for text expansion and adjust frame sizes or use auto-layout as needed
  • • Update graphics separately: For graphics with text, export, localize, and re-import or replace in Figma
  • • Preserve design tokens: Maintain design system tokens, colors, and styles when updating text
  • • Check font compatibility: Verify that fonts used support target language characters; replace if necessary
  • • Maintain component consistency: Update component instances consistently across all frames and pages

Things to Consider

  • • Text expansion: Figma designs may need frame resizing or auto-layout adjustments for text expansion in target languages
  • • BIDI languages: Right-to-left languages require text direction changes and layout adjustments
  • • Graphics with text: Graphics containing text require separate localization workflow; may need recreation if uneditable
  • • Font limitations: Some fonts may not support target language characters; identify and replace early
  • • Auto-layout constraints: Auto-layout can help with text expansion but may need adjustment for complex layouts
  • • Component variants: If using component variants, ensure all variants are updated consistently
  • • Design system integration: Maintain consistency with design system when localizing components
  • • Export requirements: Consider export format and resolution requirements for final deliverables
  • • Collaboration access: Ensure proper Figma account access and permissions for localization work

Workflow

  1. File Preparation (DTP Prep): Access Figma designs, analyze text layers and graphics, identify localization requirements (1 hour per 15 text boxes)
  2. Text Extraction: Extract text content from all text layers, maintaining context and design structure
  3. Translation: Translate text content using CAT tools, maintaining terminology consistency and following style guides
  4. Graphics Localization: Extract text from graphics, translate, and update source graphics or create localized versions (1 hour per 10 editable graphics, 1 hour per 5 uneditable graphics)
  5. Desktop Publishing (Round 1): Update text layers in Figma with translated content, adjust frame sizes or auto-layout for expansion, update graphics, and replace screenshots (15 text boxes/hour for Latin/Asian, 5 for BIDI)
  6. Layout Adjustments: Resize frames, adjust auto-layout settings, update fonts if needed, and ensure proper alignment
  7. Component Updates: Update component instances and variants consistently across all frames
  8. Design Review: Review overall design consistency, visual hierarchy, and ensure all elements are properly localized
  9. Quality Assurance: Review all text, graphics, layout, and ensure design maintains brand consistency
  10. Revision 1: Implement client feedback and corrections (30 text boxes/hour for Latin/Asian, 15 for BIDI)
  11. Revision 2: Final corrections and refinements (60 text boxes/hour for Latin/Asian, 30 for BIDI)
  12. Final Output: Export designs in required formats (.PDF, .PNG, .SVG) at specified resolutions or deliver Figma files