In my work with figma and penpot I noted that communicating how a design should behave (e.g. when a component is resized) was difficult. Even if the specification of the behavior matches 1:1 to a corresponding CSS, finding this out demands a change in medium – looking it up on the specs tab in the sidebar or manually resizing the component. Specifying that behavior, too, needs toggling some buttons outside of the mockup.
What I would be interested in, is a way to make mockups and their behavior easier to read from the mockup directly rather than abstractly specify it somewhere else. This, for example could be done by having overlays that indicate resizing behavior, but also other infos that a designs wants to discuss or needs developers to know – think of alt-text, behavior based on code rather than CSS, alternative solutions if unfeasible to code etc.
When using Figma, I manually added these into the mockups to show margins, padding, resize behavior, alt-text etc. using a color that I could set to transparent. But that was cumbersome, hard to keep in sync and some of the information might be better only shown e.g. on hover or on click rather or shown more detailed.
