Skip to main content

Figma Spacing & Padding

Apply Figma padding and spacing exactly when implementing designs. Use when implementing UI from Figma URLs, node IDs, or design specs so padding and spacing match the design 1:1.

Source: .agents/skills/figma-spacing/SKILL.md

Metadata​

  • name: figma-spacing

Content​

Figma Spacing & Padding

When implementing UI from Figma, use exact padding and spacing from the design. Do not guess.

When to use​

  • User shares a Figma link or node ID for implementation.
  • User asks to match Figma layout, padding, or spacing.
  • Implementing or updating a component that has a Figma design.

What to do​

  1. Load standards and context Read .agents/references/coding-standard/figma-guidance.md, then load .agents/skills/feature-context/SKILL.md and the relevant feature reference for the target surface.

  2. Get design values
    Use Figma MCP: get_design_context for the node (and get_screenshot for reference). Read padding, spacing, and gap values from the returned layout/specs.

  3. Map to Tailwind
    This project’s spacing scale is in pixels (theme.extend.spacing: 8 → 8px, 12 → 12px, 16 → 16px, etc.):

    • Figma 8px → p-8, px-8, py-8, or gap-8 as appropriate.
    • Figma 12px → p-12, py-12, px-12, gap-12.
    • Figma 16px → p-16, px-16, py-16, gap-16.
    • Same idea for 24, 32, etc.
    • Don't use size for width and height. size-12 → w-12 h-12

  4. Use the exact combination
    If the design has horizontal padding 8px and vertical padding 12px, use px-8 py-12 — not px-16 py-20 or other “close” values.

  5. Odd values
    If the design uses a value not in the scale (e.g. 10px), use arbitrary values: p-[10px], gap-[10px], etc.

Sizes and dimensions​

  • Use exact dimensions from Figma for icons, avatars, and other fixed-size elements. Do not round or substitute (e.g. if the design specifies a 20×20 icon, use width={20} and height={20} — not 24×24 or 16×16). Read width/height from get_design_context for the node.

Colors​

  • Follow Figma’s color semantics. Map to NPL tokens: primary → text-npl-text-primary-on-light / fill-npl-text-primary-on-light; secondary → ...-secondary-on-light; tertiary (inactive, muted) → ...-tertiary-on-light. Do not use secondary where the design uses tertiary (e.g. inactive button text/icons).
  • Active state: icon vs text can differ. Use the exact color variable from Figma (get_variable_defs or get_design_context) for each element. Do not assume — e.g. if Figma uses Yellow/Light/Alpha/11 for the active icon, use fill-npl-yellow-light-alpha-11; do not substitute a different yellow token.

Layout and copy​

  • Include all copy from Figma. Do not omit greetings, headings, or labels (e.g. “Hi, Janet 👋”).
  • Button/container width: Unless the design shows buttons filling the full width, do not use flex-1 or w-full on buttons. Use w-fit on the button row and content-sized or min-w-[...] buttons so the group does not stretch to the container’s max-width.
  • Center content in buttons: Use items-center justify-center text-center on the button and text-center on label spans so icon, count, and label are centered.

Rules​

  • Do not guess or approximate padding/spacing when Figma (or a spec) is available.
  • Prefer fetching the node with get_design_context so you have real numbers.
  • Align with the project’s existing rule: clean-figma.mdc and the shared reference: figma-guidance.md.