Make the source understandable
The design file should reveal structure and decisions without requiring the developer to reverse-engineer every frame.
Source file and versions
Share an accessible Figma, Sketch, or equivalent source file, identify the approved page and revision, and separate current screens from experiments and archived work.
Confirm: Can everyone point to the same approved version?
Components and states
Define reusable controls, variants, pressed and disabled states, focus, selection, loading, error, empty, warning, modal, and navigation behavior.
Confirm: Are states named consistently across screens?
Screen flows
Show entry, exit, back, timeout, interruption, confirmation, failure, and recovery paths, including physical-button or encoder actions.
Confirm: Does every control lead to a documented result?
Prepare target-ready visual material
Embedded output depends on exact pixels, formats, memory, licenses, and rendering behavior.
Typography and assets
List font families, weights, sizes, line heights, glyph ranges, licenses, icons, images, source vectors, transparency, compression, and ownership.
Confirm: Who prepares or approves target-optimized assets?
Resolution and layout
Design at the target resolution and orientation, mark safe areas, clipping, alignment, scaling rules, minimum touch targets, and behavior for long or missing content.
Confirm: Are measurements in target pixels rather than presentation scale?
Motion specification
For every transition or animation, document trigger, start and end state, duration, easing, frames or source, looping, interruption, and fallback behavior.
Confirm: Can motion be tested without guessing intent?
Connect visuals to product behavior
The design becomes buildable when visible states are mapped to real or representative events and data.
Data mapping
Map each value, unit, label, range, precision, update rate, command, acknowledgement, invalid value, and error state to the visual element that represents it.
Confirm: Is representative data available for review?
Localization
Provide languages, translations or ownership, glyph coverage, expansion expectations, text direction, unit rules, truncation, wrapping, and fallback fonts.
Confirm: Which language set is included in acceptance?
Target assumptions
Record the MCU or MPU, display, color depth, input, runtime, LVGL version, toolchain, memory constraints, existing drivers, and review environment beside the design.
Approve without losing traceability
Design and implementation reviews should close decisions instead of creating parallel versions.
Design approval
Name the approver, approved revision, included screens and states, unresolved assumptions, and the point after which visual changes enter change control.
Implementation review
Review against the target or simulator using known data, inputs, states, animation behavior, and a written defect list tied to the approved design.
Final handoff
Transfer the approved design source, exported and generated assets, LVGL source, protocol mapping, build notes, integration assumptions, revision record, and known limitations.