Text Localizer

Appearance

Workflow Tips ​

Learn how to optimize your localization workflow with Text Localizer. These tips will help you work more efficiently and maintain a clean, organized project.

Project Organization ​

Frame Structure ​

  • Keep related text elements in the same frame
  • Use clear frame naming for easy identification
  • Create separate frames for different sections or features
  • Organize frames logically in your file structure

Text Layer Organization ​

  • Group related text layers within frames
  • Use consistent naming patterns
  • Keep text layers at a manageable depth in your layer hierarchy
  • Avoid deeply nested text layers when possible

Efficient Naming Conventions ​

Text Layer Names ​

✅ Good examples:

  • welcome_header
  • navigation_home
  • footer_copyright

❌ Avoid:

  • Text 1, Text 2 (default Figma names)
  • header(text) (contains parentheses)
  • nav.home (contains periods)
  • $footer (contains dollar sign)

TIP

Consistent naming makes variable management much easier.

Handling Components ​

When working with components that have duplicate layer names:

  • The plugin will automatically handle numbering
  • First instance: Label
  • Additional instances: Label 2, Label 3
  • Plan your naming strategy knowing this behavior

TIP

This automatic numbering is especially helpful when working with repeated components, as you don't need to manually rename layers to make them unique.

Initial Setup ​

  1. Organize your design into clear frames
  2. Name all text layers properly before scanning
  3. Ensure frame structure is clean and logical

Regular Usage ​

  1. Select frame
  2. Generate variables
  3. Export CSV for documentation (if needed)
  4. Update text through Figma variables panel

Team Collaboration ​

Design Team Tips ​

  • Agree on naming conventions
  • Document frame organization
  • Share the localization workflow with new team members
  • Keep variable usage consistent

First Page Design Strategy ​

  • Start by setting up variables on your first page/screen
  • Generate variables for common elements like:
    • Navigation items
    • Headers
    • Buttons
    • Footer content
    • Common UI elements

Pro Tip

When you design your first page and create variables, these will automatically be available for your next pages. This means:

  • New designs will already have localized text bound to variables
  • Consistent text across pages
  • Reduced work in variable generation
  • Easier management of common UI elements

Subsequent Pages ​

  • Use existing variables from your "Localized" collection
  • Only generate new variables for unique text
  • Maintain consistency with existing variable names
  • Reuse common UI element variables

File Management ​

  • Use clear file names
  • Create separate pages for different features/sections
  • Keep your Figma files organized

Time-Saving Tips ​

Quick Actions ​

  • Pin Text Localizer to your plugins panel
  • Process related frames together
  • Use keyboard shortcuts for faster navigation

Maintenance ​

  • Regularly review variable usage
  • Clean up unused variables
  • Keep documentation up to date
  • Review and update naming conventions as needed

WARNING

Remember to check for naming restrictions before generating variables to avoid errors.

Next Steps ​