Advanced Themer: Grid Guide, X-mode, A11Y Color Checker, Responsive controls

by Brendan O Connell

Description

"I figured I'd start making more Advanced Themer videos as I get a lot of questions on how to use it effectively. Here is an intro to the 'top bar' features now since 2.5 most are baked into the New "AT Menu" *X-mode (CTRL+SHIFT+J) is useful when your designs get complex and you need organization, or you need to eliminate the color contrasts to debug a layout (everything is a box!) *Grid Guide (CTRL+SHIFT+i): Adjust the # of grids, the gap, and color per breakpoint (drag lower contrast if you prefer); bridging Figma to Dev environment (CTRL+B to cycle through breakpoints) *Contrast checker (CTRL+SHIFT+K) for WCAG 2.0 Guidelines, toggle to see a red border on inaccessible color contrasts (keep in mind it's not just color, but in the example of typography, accessibility means correct font-weights and size as well *Responsive helper: Click 3 dots next to canvas width in top middle; a slider gives you fully fluid breakpoint previews *Open link in new tab (you get the idea)".
Brendan O Connell

You won't build websites without it anymore!