Figma design patterns

Skill sunhome243/figma-mcp-express/plugins/figma-mcp-express/skills/figma-design-patterns

Use when designing, editing, or reviewing Figma UI layout craft for auto layout, components, spacing, typography, states, dark mode, or handoff.From its SKILL.md

Install

npx -y skills add sunhome243/figma-mcp-express --skill figma-design-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.6 KB, as published. Nobody here has run it

Figma Design Patterns

SCOPE. Owns design craft (detail in references/); execution via figma-mcp-express batch, not raw Plugin API. Tool-mechanics → figma-mcp-express; workflow → figma-product-build.

Core Rules

Structural frames use dynamic auto layout, not fixed-position piles.
Spacing, padding, radius, fills, strokes, effects, and text come from library tokens/styles.
Use Figma-native production features: variables/modes, styles, components, variants/properties, auto layout/grid, constraints, prototypes, and annotations/dev resources when relevant.
Component priority: library INSTANCE → local component → raw structural frame only when none exists.
Configure every placed instance with real content, variants, and dimensions before done.
Layer names must be semantic; generated or cryptic names are unfinished — name as you create.
Repeating raw structures become components and reused instances; shared chrome is ONE component instanced identically across states.
Children fit the parent's padded box (FILL, or width ≤ inner width); overflow/clip is a layout bug.
Empty/loading/error states are designed (icon + heading + body; skeleton mirrors real content); icons/status use semantic color plus a text/icon cue.
Every element earns its place; cut decorative noise. Squint test: screen, PRIMARY action, and STATE read without copy.
Size for input: TOUCH meets ≥44×44pt / 48dp; POINTER may be denser. Control and label share one vertical center (counterAxisAlignItems = CENTER).
Registered components live tidy on the component page — grouped, named, never loose on a screen (references/component-reuse.md).
Build mobile screens scroll-ready: content in ONE frame, chrome pinned via pin_child, scroll prototype (references/composition-patterns.md).

Reference Router

Topic	File
FILL/HUG/FIXED, WRAP grids, resize test	`references/auto-layout.md`
Padding ownership, gap vs padding, spacing tokens	`references/padding-strategy.md`
Library-first selection, component search, tidy component page	`references/component-reuse.md`
Instance properties, slots, variants, reset behavior	`references/component-usage.md`
Navigation, forms, data display, modals, scroll-ready frames	`references/composition-patterns.md`
Color/status encoding, icons, empty/loading states	`references/states-and-feedback.md`
Depth, effects, type ladder, imagery, vector	`references/visual-craft.md`
Final PASS/FAIL gates, redundant-element check	`references/handoff-checklist.md`

Stop Flags

Raw hex/rgb, raw spacing, raw radius, manual shadows, or inline font values.
Visual lookalikes built from raw frames when a Figma component/variant/style/prototype feature exists.
Large itemSpacing to distribute children; WRAP container with FILL children.
Copy placeholders (Heading, Item 1, Lorem ipsum) — copy is real strings (a missing image is fine).
Manual substitutes for components the library provides; separate frames for variants.
A child spilling past the padded box; chrome rebuilt per state instead of a shared instance.
Status by color alone (pair text/icon); a saturated accent as a large active background.
An element whose info its neighbours already carry — decide if it belongs (rule 10 + PC13).
Flat surfaces, one-size-one-weight hierarchy, or clipped elevation — apply depth/type/imagery craft (references/visual-craft.md).