Writing Docs
Adding Images, Diagrams, and Screen Recordings
Use visuals to reduce ambiguity, not to decorate the page.
A strong documentation visual should help the reader locate something, understand a system, or follow a multi-step interaction more easily than text alone.
Use the right format for the job
Screenshots
Best for showing UI location, labels, or exact interface states.
Diagrams
Best for systems, flows, structure, or relationships between components.
Screen recordings
Best for interactions that involve movement, transitions, or multiple short steps.
Best practices
keep visuals tightly related to the text around them
use captions when context is not obvious
crop aggressively so the focal area is clear
avoid decorative images that do not support the task
Good documentation visuals should reduce support questions, not just make the page look finished.
Helpful resources
For broader Framer fundamentals and content-building workflows, Framer Academy is a useful companion resource.