Back to Plugins
图片OCR翻译 Image OCR Translator

图片OCR翻译 Image OCR Translator

OCR & translate image text into editable frames

Plugin Preview

图片OCR翻译 Image OCR Translator preview

About this plugin

【Introduction】Image OCR Translator is a Figma plugin that automatically recognizes text within image layers using AI-powered OCR technology, translates it into your target language, and writes the results into a native Figma frame as fully editable text nodes — all in a single click.【Function Description】Auto-detection: Automatically scans your current selection for image-filled layers and pre-selects the first one for instant use.Dual OCR engine: Choose between OCR.space (free tier available) for text recognition, combined with Qwen (通义千问) AI for high-quality translation.One-step workflow: OCR recognition and frame creation happen together — no extra clicks required.Editable output frame: Results are written into a new Figma Frame placed beside the original image, containing native text nodes that can be double-clicked and edited directly on the canvas.Line-accurate layout: When bounding box data is available, each recognized line is placed at its original coordinates within the output frame, preserving spatial layout.Multi-language support: Supports source language detection and target translation in Chinese (Simplified/Traditional), English, Japanese, Korean, Spanish, French, and German.In-place re-write: After reviewing or editing the recognized text in the panel, click "Re-write" to regenerate the frame with updated content.【How to Use】Select a layer containing an image fill in Figma.Open the plugin — it will automatically detect image nodes and pre-select the first one.Choose your source language and target language.Select the OCR engine (Qwen recommended for best translation quality).Click "OCR Recognize & Write" — the plugin will recognize the text, translate it, and create an editable frame beside your image in one step.The result frame will be auto-selected and scrolled into view. Double-click any text node to edit it directly.To regenerate after editing the text in the panel, click "Re-write".【Notes】API Keys for Qwen and OCR.space are configured directly in code.js. Keep them private and do not share your plugin source.The free tier of OCR.space may have rate limits or lower accuracy for non-Latin scripts. For Chinese/Japanese/Korean images, the Qwen mode is strongly recommended.Font loading uses PingFang SC → Noto Sans SC → Inter → Roboto as fallbacks. Ensure at least one of these fonts is available in your Figma environment.Line-level coordinate placement requires OCR.space to return bounding box data. If not available, all text will be placed as a single block inside the frame.The plugin does not modify the original image layer.【介绍】Image OCR Translator 是一款 Figma 插件,能够自动识别图片图层中的文字,借助 AI 进行翻译,并将结果一键写入 Figma 原生 Frame,生成可直接双击编辑的文本节点,无需额外截图或切换工具。【功能说明】自动检测图层:插件打开后自动扫描当前选中内容,识别含图片填充的图层并默认选中第一张,即开即用。双引擎支持:支持 OCR.space(含免费版)进行文字识别,结合通义千问大模型进行高质量翻译。一步完成:识别与写入合并为单次操作,点击一次按钮即可完成识别 + 翻译 + 生成 Frame 全流程。可编辑输出 Frame:结果写入原图右侧新建的 Figma Frame,内容为原生文字图层,可在画布中双击直接编辑。逐行坐标还原:当 OCR 返回边界框数据时,每行文字按原始坐标放置,最大程度还原图片内的文字排布。多语言支持:支持简体中文、繁体中文、英语、日语、韩语、西班牙语、法语、德语等语言互译。二次写入:在面板中修改识别或翻译内容后,点击「重新写入」可刷新画布 Frame 中的文字。【使用方法】在 Figma 画布中选中含图片填充的图层。打开插件,插件会自动检测并默认选中第一张图片。选择源语言与目标语言。选择 OCR 引擎(推荐使用通义千问模式)。点击**「OCR 识别并写入」**,插件将自动完成识别、翻译并在原图右侧生成可编辑 Frame。生成后视图自动定位到新 Frame,双击文字图层即可直接编辑。如需修改后重新生成,在面板中调整文字后点击「重新写入」。【注意事项】Qwen 和 OCR.space 的 API Key 直接配置在 code.js 文件中,请勿将源代码公开分享,以免 Key 泄露。OCR.space 免费版对中文、日文、韩文等非拉丁文字的识别精度有限,建议优先使用通义千问模式。字体加载顺序为:PingFang SC → Noto Sans SC → Inter → Roboto,请确保 Figma 环境中至少有一种字体可用。逐行坐标还原依赖 OCR.space 返回的边界框数据;若无坐标信息,所有文字将作为整体写入 Frame。插件不会修改原始图片图层,所有输出均为新建图层。

Plugin Details

Version1
CreatedMay 3, 2026
Last UpdatedMay 3, 2026
Categoryediting & effects plugins
CreatorKingweiCheung
Stats5 installs, 0 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://api.mymemory.translated.net
    • https://api.ocr.space
    • https://dashscope.aliyuncs.com
    • https://translate.googleapis.com