Figma Translation Plugin - Complete User Guide

Installing the Plugin

1. Open Figma and navigate to the Plugins menu
2. Search for "Figma Translation Plugin" in the plugin directory
3. Click Install to add the plugin to your workspace
4. The plugin will appear in your plugins list for future use

Authentication Setup

The plugin uses secure Google OAuth authentication to manage your translation projects and settings.

Step-by-Step Login:

1. Launch the Plugin: From Figma's plugins menu, select the Translation Plugin
2. Login Screen: You'll see the welcome screen with the plugin logo and login options
3. Google Authentication: Click the "Continue with Google" button
4. Authorization: A new browser window will open for Google OAuth
5. Grant Permissions: Authorize the plugin to access your account
6. Automatic Redirect: The plugin will automatically detect successful authentication
7. Dashboard Access: You'll be redirected to the main plugin dashboard

Selecting Frames for Translation

The plugin automatically extracts text from selected Figma frames, identifying all text elements that need translation.

How to Extract Text:

1. Select Frames: In your Figma canvas, select one or more frames containing text elements
2. Open Plugin: Launch the Translation Plugin from the plugins menu
3. Project Selection: Choose or create a project to organize your translations
4. Automatic Detection: The plugin will scan selected frames and identify all text nodes
5. Text Inventory: View the complete list of extracted text in the translation workspace

Understanding Text Analysis

The plugin provides intelligent analysis of your text content:

• Language Detection: Automatically identifies Japanese and English text
• Content Filtering: Options to exclude numbers, symbols, and special characters
• Duplicate Management: Identifies unique text for efficient translation
• Context Preservation: Maintains the relationship between text and design elements

Language Selection and Setup

Setting Your Translation Languages:

1. Source Language: Select your original text language (Japanese or English)
2. Target Language: Choose the translation target language
3. Language Swap: Use the swap button to quickly reverse translation direction
4. Apply Settings: Your language choices are saved for the current session

Translation Process

Starting Translation:

1. Review Extracted Text: Check the list of text elements in the workspace
2. Apply Filters: Use filtering options to focus on specific content types
3. Start Translation: Click the "Translate" button to begin automatic translation
4. Review Results: Examine translated text and make manual adjustments if needed
5. Save Progress: Your translations are automatically saved to the project

Advanced Filtering Options

The plugin offers powerful filtering to help you focus on specific content:

• Language-Only Filters:
  • Only Japanese text
  • Only English text
• Content Filters:
  • Exclude numbers and symbols
  • Show only untranslated text
  • Display unique text only
  • Show newly added content

Understanding Dictionary Types

The plugin provides two types of dictionaries to help maintain translation consistency:

• Project Dictionary: Specific to your current project, contains project-related terminology
• General Dictionary: Shared across all projects, contains common translations

Adding Dictionary Entries

Creating New Dictionary Items:

1. Navigate to Dictionary: Access the Dictionary section from the export menu
2. Choose Dictionary Type: Select either Project or General tab
3. Add New Entry:
   • Enter Japanese text in the first field
   • Enter English translation in the second field
   • Click the + button to add the entry
4. Save Changes: Dictionary entries are automatically saved

Managing Dictionary Entries

Dictionary Management Features:

• Search Function: Quickly find specific translations using the search bar
• Edit Entries: Click on any dictionary item to edit the translation
• Delete Entries: Remove outdated or incorrect translations
• Bulk Operations: Edit multiple entries and save changes together

Understanding the Clone Feature

The Clone feature creates a complete duplicate of your selected design with all text translated. This preserves your original design while providing a fully translated version.

Using the Clone Feature

Step-by-Step Clone Process:

1. Complete Translation: Ensure your translations are complete and reviewed
2. Access Clone Button: The Clone button appears after successful translation
3. Initiate Clone: Click the Clone button in the translation workspace
4. Monitor Progress: Watch the progress indicator as the plugin:
   • Creates a duplicate page
   • Copies all design elements
   • Applies translations to text elements
   • Organizes the layout
5. Review Results: A new page will be created with "-Translated" suffix

Understanding the Toggle Feature

The Toggle feature replaces original text directly in your design with translations. This creates an in-place translation without duplicating your design.

Using the Toggle Feature

Step-by-Step Toggle Process:

1. Complete Translation: Ensure all translations are finalized
2. Access Toggle Button: The Toggle button appears alongside the Clone button
3. Initiate Toggle: Click the Toggle button to start the process
4. Monitor Replacement: The plugin will:
   • Store original text for potential rollback
   • Replace text elements with translations
   • Handle font loading automatically
   • Report any errors encountered
5. Review Changes: Check the updated design for proper text replacement

Toggle vs Clone: When to Use Each

Common Issues and Solutions

Login Problems

• Issue: Login window doesn't open
  Solution: Check if pop-ups are blocked in your browser, allow pop-ups for Figma
• Issue: Authentication timeout
  Solution: The plugin retries automatically for 6 minutes. Check your internet connection

Translation Issues

• Issue: Some text not detected
  Solution: Ensure text is not in hidden layers or locked components
• Issue: Translation fails for certain text
  Solution: Check for special characters or very long text strings

Clone/Toggle Problems

• Issue: Font loading errors
  Solution: Ensure fonts support target language characters, or change font before translation
• Issue: Layout becomes distorted
  Solution: Check auto-layout settings and text constraints in your original design

Best Practices

• Prepare Your Design: Use auto-layout and proper text constraints to handle different text lengths
• Test Fonts: Verify that your fonts support both source and target languages
• Organize Layers: Keep text layers properly named and organized for easier management
• Use Dictionary: Build a comprehensive dictionary for consistent translations across projects
• Review Translations: Always review automated translations for context and accuracy
• Save Frequently: While the plugin auto-saves, manually save your Figma file regularly

Getting Help

If you encounter issues not covered in this guide:

• Check the browser console for detailed error messages
• Ensure you have the latest version of the plugin
• Try refreshing Figma and restarting the plugin
• Contact the plugin development team for advanced support