Recipes

    Controls that just work

    Checkboxes, toggles, sliders, dropdowns, fields, keybinds, and buttons are recognized by how they look.

    On the first frame, controls look exactly like the design; after that they respond.

    Draw it asYou get
    A small box beside a labelA checkbox. A box with a dot or a mark is the checked state; an unchecked box keeps its own look.
    A pill with a round knobA toggle that slides and changes color.
    A bar with a fill and a handleA slider you can drag. A number above it updates as you drag.
    A box with a value and a down arrowA dropdown that opens.
    A box with placeholder text, or an empty box under a labelA text field. A search icon makes it a search field; a password label hides the input.
    A small box with a key nameA keybind that waits for a key.
    A shape with a centered label, or a row with a chevronA button with hover and press feedback.
    Layers
    • Enable effects
    • Label
    • Track
    • Knob
    DoKeep a control's label, track, knob, and value together: in one frame, component, or row.
    Layers
    • All labels
    • Enable effects
    • All toggles
    • Track
    • Knob
    Don'tDon't sort parts into separate groups far from each other. A track with no label beside it may stay a picture.