TranslateSheet is the most format-preserving Figma plugin for DeepL, built with deep Figma API integration to solve what other translation plugins can't: maintaining your exact typography, colors, and text styles through translation. 😊
THE ARCHITECTURE
Like my Google Sheets addon, TranslateSheet uses a hybrid architecture optimized for Figma's plugin sandbox:
Figma Plugin (sandbox) ⟷ Cloud Run Backend ⟷ DeepL API v3
The Figma sandbox handles real-time node selection, styled text segment extraction, and format reapplication. The Cloud Run backend handles DeepL API calls, user authentication, glossary sync via Firestore, and quota management with Stripe.
Result: Full DeepL API v3 feature access with true format fidelity.
DEEP FIGMA API INTEGRATION
1. Multi-Product Support
Works across all Figma products via editorType detection:
Figma Design – Frames, components, instances, text nodes
FigJam – Sticky notes, shapes with text, code blocks, tables, sections
Figma Slides – Slide nodes, tables
Figma Buzz – Marketing templates
2. Intelligent Text Extraction
Recursively traverses the scene graph to extract all text-containing nodes including TEXT (standard text layers with mixed style support), STICKY (FigJam sticky notes), SHAPE_WITH_TEXT (FigJam/Slides shapes), CODE_BLOCK (FigJam code blocks for translating comments), and TABLE (individual table cells with composite IDs for precise targeting).
3. Styled Text Segment Extraction
Uses Figma's getStyledTextSegments() API to capture 20+ formatting properties including core typography (fontSize, fontName, fontWeight, fills, textStyleId, fillStyleId), spacing (letterSpacing, lineHeight), decoration details (textDecoration, textDecorationStyle, textDecorationOffset, textDecorationThickness, textDecorationColor, textDecorationSkipInk), links and case (textCase, hyperlink), and list/paragraph formatting (listOptions, listSpacing, indentation, paragraphIndent, paragraphSpacing).
4. Missing Font Detection
Pre-flight check using Figma's loadFontAsync to detect missing fonts before translation starts—prevents the dreaded "Unknown error" when Figma can't load fonts mid-operation.
DEEP DeepL API v3 INTEGRATION
1. Full Language Support
40 core languages with glossary + formality support
81 extended languages via enable_beta_languages parameter
Regional variants: EN-GB/EN-US, PT-BR/PT-PT, ZH-HANS/ZH-HANT, ES-419
2. XML Tag Handling v2 for Format Preservation
The key "innovation": the plugin wraps styled text segments in XML tags (s0, s1, s2...), sends to DeepL with tag_handling set to xml and tag_handling_version set to v2, then semantically re-maps styles post-translation.
Example: "Hello world!" becomes "Hello <s0>world</s0>!" where s0 represents bold. DeepL translates it to "Hallo <s0>Welt</s0>!" and the plugin applies bold to "Welt" based on the tag position.
The plugin registers s0 through s19 as non_splitting_tags so DeepL treats them as inline markup, not sentence boundaries.
3. Glossary Sync
Full v2/v3 glossary API support. Create, edit, and delete glossaries directly from translatesheet.com. Glossaries sync across Figma, Google Sheets, and MCP integrations. Language pair validation happens at translation time.
4. Formality Control
Supports more, less, prefer_more, and prefer_less options for supported languages (DE, FR, ES, IT, NL, PL, PT, JA, RU).
5. Custom Instructions
Supports DeepL's custom_instructions parameter for target languages DE, EN, ES, FR, IT, JA, KO, and ZH. Users can provide up to 10 instructions like "Use informal tone" or "Keep brand names in English". Automatically uses quality_optimized model when custom instructions are enabled.
6. Context Parameter
Supports DeepL's context parameter for providing translation context without being billed. Useful for specifying domain, audience, or style guidance.
FORMAT PRESERVATION ALGORITHM
Dual-Mode Format Mapping:
XML Semantic Mapping (when DeepL returns tagged text)
Parse segment tags from translated text
Match segment index to original segment
Apply styles semantically based on tag position
Proportional Mapping (fallback for untagged text)
Calculate ratio between new and original text length
Map segment boundaries proportionally
Fill gaps with adjacent segment styles
Font Loading: Before any text modification, the plugin loads all required fonts asynchronously to ensure Figma can apply formatting without errors.
OUTPUT MODES
1. Replace In-Place
Directly modifies selected text nodes while preserving all formatting.
2. Duplicate & Translate
Clones selected frames/nodes, positions them to the right with a 40px gap, applies translations to the clones. Preserves originals. Works with multiple frame selection.
3. Side-by-Side Variants
Creates comparison view: original frame renamed with [Original], translated frame with [DE] (or target language code).
ECOSYSTEM INTEGRATION
TranslateSheet is part of a unified translation platform:
translatesheet.com – Web dashboard for glossary management, AI glossary generation, usage tracking
Google Workspace Add-ons – Sheets, Docs, Slides integration with same glossaries
MCP Server – Model Context Protocol server for AI tools also with glossary creation (Claude, Cursor, etc.)
One account. Same glossaries. Everywhere you work.
STACK
Plugin (Figma Sandbox): TypeScript, Vite, Tailwind CSS + shadcn/ui, React 18
Backend (Cloud Run): Node.js 20 + Express, Firestore, Google OAuth 2.0, Stripe, DeepL API v3
SECURITY & PRIVACY
GDPR-compliant: Text sent to DeepL for translation, not stored
Google OAuth: No password storage, tokens in Figma's encrypted clientStorage
TLS 1.3: All communication encrypted
SOC 2: Backend runs on GCP (Cloud Run)