Sketchly AutoVariant learns constraint-aware transforms to generate responsive variants

Design · 3 min read

AutoVariant examines component geometry, constraints, and content and generates a set of responsive variants consistent with the project's grid and spacing system. The engine tries to preserve key alignment and accessibility properties while suggesting variants that cover common breakpoints.

Designers can preview variants side-by-side and accept model-generated adjustments or edit them manually. Accepted variants are immediately added to the symbol library, with history and provenance metadata for later review.

Sketchly also added a diagnostics panel that explains why a particular transform was proposed and flags potential layout regressions, helping teams maintain consistency across their responsive patterns. The update reduces repetitive hand-editing and speeds up producing usable breakpoints for production teams.