Figma
Figma Image MarkupSend selected Figma layers into the Image Markup editor.
A Figma plugin scaffold that exports the current selection as a PNG, uploads it through the existing Image Markup storage API, and opens the shared annotation editor with the exported image already loaded.
Figmaprototype
Product Flow
From source image to clean revision
Designers and reviewers who want the same arrows, boxes, freehand notes, text callouts, PNG export, and optional clean-revision flow for Figma selections.
Select an image and start marking
Choose the image you want to edit from Google Docs, or upload a local image directly. The editor keeps every note anchored to the current image, so you do not need a separate instruction document.
Original image
Choose an image and start marking
Use visual markup instead of long explanations
Circle an area with freehand marks, point to issues with arrows, frame important regions with boxes, and add short text notes. Reviewers can understand the requested change by looking at the image.
Clarify this area
Keep both the annotated handoff and the clean version
Download the annotated PNG as the review artifact, then generate a clean revision when you need the final image without visible markup.
Annotated PNGClean revision
Setup and development steps
Configure Scripts
Deploy the Next.js app with the existing Image Markup R2 upload routes, Neon database, and session signing configured.
Connect Services
Open Figma Desktop, use Plugins > Development > Import plugin from manifest, and select plugins/figma/image-markup/manifest.json.
Test the Add-on
Run the plugin on a selected frame, component, image, or layer.
Figma Plugin
Plugin Directory and Feature Structure
plugins/figma/image-markupCurrent Figma selection export to PNG
Upload handoff through the existing Image Markup R2 API
Shared Image Markup editor launch with sourceR2Key preloaded
Generated revision insertion back into the current Figma page
Annotation tools, PNG export, and edit brief behavior reused from Image Markup
Production origin default with a local development origin override
Frequently Asked Questions
What is the current status of Figma Image Markup?
Current status: prototype.
Which Google Workspace hosts are supported?
Current hosts: Figma.
Where is the Apps Script implementation?
The Apps Script directory is plugins/figma/image-markup.