Screenshot to Layout

Supercharge your design speed. Never re-type text from a screenshot again.

Watch this video for a demo.

Generate editable text from a screenshot (or sketch).

How to use

Select an image in Figma, run the plugin command “Process image”, and then see a Figma layout appear with editable text.

Useful to quickly start working on a new design based on a screenshot.

Get started

  1. Get the plugin from Figma community
  2. You will need a free Screenshot to Layout account to use this plugin. Go to https://figma.obra.studio/register to sign up.
  3. After signing up you will find an API key on your dashboard.
  4. Enter your API key in the plugin via Plugins > Screenshot to Layout > Show user interface
  5. From now on, anytime you want to convert a screenshot to editable text, either use the “Process image” button in the UI or run the process image command for quick access. Use the ⌘+/ menu and enter the words “Process image”.

Privacy: Do note that your image gets sent to a server, and the actual image data can be retrieved from the logs. We don't look at the image passing through this service, except for debugging reasons, but be careful with OCR'ing sensitive data.

Note: this plugin might shut down at any time if it gets popular due to the processing cost of sending your image to Microsoft Azure for processing.

Feedback & support

Stuck? Any suggestions? E-mail us for Feedback and support.