Wireframe Sketch Grid Features Block for React

Each screen is a small component (PricingFrame, DashboardFrame and so on) that holds its own Switch state and renders two layers inside the shared Shell: a wireframe drawing and a shipped one. Copy one, draw its two layers with the Box, Dash and Surface helpers, and add it to the grid; the notes under the title are its wireNote and shippedNote. An odd number of screens leaves a gap in the grid, so add them in pairs.

It's our Switch, one per screen, off by default (showing the wireframe). Turning it on fades the shipped layer in and the wireframe out over 300 milliseconds, and the caption under the title changes with it. The two labels beside it are decorative; the Switch is named for the screen ("Show the shipped design of Pricing page") so it reads clearly on its own, and Space toggles it from the keyboard. The state arrives as the handler's first argument, a boolean.

No. Both layers sit in one grid cell with the same size, the hidden one is only made transparent, invisible and inert, and the stage has one fixed height, so nothing around it moves.

The drawings are decorative and hidden from them, and the hidden layer is inert, so it can't take focus. What they get is the screen's name as a level-three heading, the caption that says which state is showing, and the named Switch.

The header fades up once on load, and the layers cross-fade when you flip a Switch. With reduced motion both are off: the header simply appears and a flip swaps the layers at once.

The grid becomes one column, each screen at 224 pixels tall, with its title, caption and Switch under it; the Switch wraps below the title if the row is tight. Nothing scrolls sideways at 320 pixels.