Resources
← All tutorials
BeginnerAbout 25 min
Import screenshot → clean UI
Run Image → Screen on a HUD screenshot, review regions, then tidy structure in Compose.
Steps
- Import the screenshot into the project Library (drag file into Library or canvas without Shift if you only want the raw asset first).
- Drag the screenshot onto the canvas and use Image → Screen (or Shift+drop the image onto the canvas per current Compose behavior) to start extraction.
- In the review modal, accept solid panels first, reject obvious noise, rename ambiguous regions, merge duplicates, split overcrowded clusters.
- Apply to a new or existing screen. Toggle extract display modes in the toolbar to compare Original vs Refined vs Vector when available.
- Run Refine extracted from Smart Actions when you need client-side cleanup of crops; follow with Vectorize extracted if you want SVG-capable nodes.
- Group related chips, run Improve layout on selections where the Smart Action is offered, and link colors through Style Brain in the Styles panel.
Expected result
A layered screen derived from a screenshot, with reviewed regions and a cleaner hierarchy ready for export experiments.
For deeper reference, open Docs.