Docs · Create
Create from an image or screenshot
Carry hierarchy, proportion, density, and visual language from a focused reference into working React.
5 min read
Outcome and prerequisites
The outcome is a structured, interactive React component that learns from the reference without becoming a static trace of it.
- Use a focused image of the component or section that contains the useful direction.
- Decide what should remain faithful and what must adapt to your product.
- Bring realistic content and know the behavior the screenshot cannot show.
Use the reference as direction
- 01
Attach a focused image
Use Add image reference in the canvas composer and choose the clearest crop available.
- 02
Name the useful signal
Call out the hierarchy, density, proportion, layout, or visual language worth preserving.
- 03
Explain the adaptation
Provide your content, behavior, and any structure that should differ from the reference.
- 04
Review it as software
Check structure, interaction, and responsive behavior—not only resemblance in the first frame.
- 05
Correct the largest mismatch
Refine hierarchy or structure before spending a pass on small color and spacing differences.
Expected result
You should have a live component that carries the reference's most useful relationships while using your product's content and behavior. Continue with the screenshot how-to for a narrow recipe or refine the result directly.