Gridsmith - Artboards, Grids & Safe Areas

About this plugin

Figma gives you hundreds of artboard sizes and no opinion about what to put on them. So you pick 1440 × 1024, and then you guess. Is it 12 columns or 8? Is the margin 64 or 80? Does the tab bar go over the home indicator or under it?Gridsmith answers that. Pick what you're designing for, pick a size, and you get a frame with the correct column grid, gutters, margins, baseline grid, safe-area outline and system-chrome guides already on it.Three steps1. Device type — Website, mobile app, tablet, TV or watch. This one choice decides the column count, the margins and what counts as a safe area.2. Resolution — 52 presets grouped by platform, with a live filter. Type 440 or Pro Max and go straight there. Badges mark what's most popular and what's the current default, so you're not guessing which iPhone to draw.3. Grid — A to-scale preview with the columns, margins, safe area and system chrome drawn on it, plus the derived numbers and a short note explaining why they are what they are.What you getThe right grid for the width. 12 columns on desktop, 8 in the 600–839 range, 4 on mobile. Margins that grow with the viewport and content that stops growing once it stops being readable.Real safe areas. Dynamic Island 62pt, home indicator 34pt, tvOS overscan 90 × 60, Wear OS 5.2% horizontal margins. Drawn as a locked, collapsed guide group so they never get in your way.Editable everything. Columns, gutter and margin are inputs, not decisions made for you. The preview follows as you type, and a frame built from a custom grid gets named so nobody has to guess later.Orientation that means something. Rotating an 11-inch iPad doesn't just swap width and height — 834pt portrait is 8 columns, 1194pt landscape is 12. Safe areas rotate too: the status bar hides and the notch moves to the sides.Custom sizes. Type any width and height and the grid is inferred from it, with the reasoning shown before you commit.Breakpoint sets in one click. The whole responsive range side by side in one section — a practical four-frame set, Bootstrap 5 with its real container widths, Tailwind, Material 3 window classes, or a sweep across Apple devices.An audit that points at the problem. Select any frame and Gridsmith checks it against the rules for whatever device it matches: grid, margins, spacing scale, tap targets, safe areas and type ramp. Every finding has a "Select 3 layers" button that jumps you to the offenders.Tokens and hand-off. Write the spacing scale, layout numbers and type ramp into Figma variables, or copy CSS custom properties with a ready-made container rule for engineering.Where the numbers come fromMaterial Design 3 for breakpoints and window size classes, Apple's Human Interface Guidelines for iOS, iPadOS, tvOS and watchOS layout and safe areas, Bootstrap 5 and Tailwind for web breakpoints, and Apple's published device specifications for point sizes.Each preset carries a short note explaining the choice, so you can defend the grid in a review instead of saying it looked right.NotesGridsmith runs entirely offline. It has no network access, collects nothing, and only writes to the file you're working in. It remembers your last device, size and options locally so it reopens where you left off.