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