/frame

Breakpoint Extraction

Reference for Frame's breakpoint recipe. Extract responsive breakpoints from multi-frame Figma designs (mobile/tablet/desktop), Layout Grid analysis, and Constraints inheritance.

Designers do not always provide all breakpoints. Inferred values are LOW confidence — flag explicitly.

1. Discovery Workflow

get_metadata          → list all frames, identify breakpoint candidates by name
                        (e.g., "Hero - Mobile 375", "Hero - Desktop 1440")
get_design_context    → for each candidate, fetch layout + constraints

Heuristics for grouping frames as "same component, different breakpoint":

• Same root component or page name
• Frame name suffix: Mobile, Tablet, Desktop, or width values (375, 768, 1440)
• Identical child structure with different sizes

2. Layout Grid → CSS Grid

Figma Layout Grid types:

Extraction template

frame: Hero - Desktop 1440
breakpoint_inferred: 1440
layout_grid:
  type: columns
  count: 12
  gutter: 24px
  margin: 80px

css:
  display: grid
  grid-template-columns: repeat(12, 1fr)
  gap: 24px
  padding-inline: 80px
  max-width: 1280px  # = 1440 - 80*2
  margin-inline: auto

Per-breakpoint comparison

breakpoints:
  mobile-375:    { columns: 4, gutter: 16, margin: 16 }
  tablet-768:    { columns: 8, gutter: 20, margin: 32 }
  desktop-1440:  { columns: 12, gutter: 24, margin: 80 }

3. Constraint Inheritance

Figma Constraints (Left, Right, Center, Scale, Stretch) on each layer inform CSS layout choice:

Auto Layout (preferred)

If Auto Layout is used, prefer:

display: flex;  /* horizontal/vertical based on layout direction */
gap: <itemSpacing>px;
padding: <paddingTop>px <paddingRight>px <paddingBottom>px <paddingLeft>px;
align-items: <primaryAxisAlignItems>;
justify-content: <counterAxisAlignItems>;

4. Breakpoint Value Inference

From frame widths

• 320, 375 → mobile
• 414, 480 → large mobile
• 768 → tablet
• 1024, 1280 → laptop
• 1440, 1920 → desktop

Standardization

Map detected widths to standard tier:

Output: media query stack

/* Mobile-first */
.hero { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; }

@media (min-width: 768px) {
  .hero { grid-template-columns: repeat(8, 1fr); gap: 20px; padding: 32px; }
}

@media (min-width: 1280px) {
  .hero { grid-template-columns: repeat(12, 1fr); gap: 24px; padding-inline: 80px; max-width: 1280px; margin-inline: auto; }
}

5. Container Query Candidates

Identify components that appear in multiple slots with different widths within the same breakpoint:

Output

container_query_candidates:
  - component: Card
    contexts: [sidebar(300px), main(800px), modal(600px)]
    recommendation: "Use @container card (min-width: ...) instead of @media"

6. Confidence Annotation

Every derived breakpoint must be tagged:

/* HIGH: Designer explicitly provided 375 / 768 / 1440 frames */
@media (min-width: 768px) { ... }

/* LOW: Derived from desktop-only mockup; tablet behavior inferred */
@media (min-width: 768px) { ... }

7. Common Pitfalls

8. Decision Walkthrough Template

Source frames identified:
  □ Mobile (width: ____)
  □ Tablet (width: ____)
  □ Desktop (width: ____)
  □ Wide (width: ____)

Per-frame layout extraction:
  □ Layout Grid (count + gutter + margin)
  □ Auto Layout direction + spacing
  □ Constraints (children)

Breakpoint inference:
  Standard mapping: ____
  Custom breakpoints needed: ____

Container query candidates:
  - Component: ____  Contexts: [____]
  - Component: ____  Contexts: [____]

Confidence:
  HIGH count: ____ (designer-provided)
  LOW count:  ____ (inferred)

Output:
  □ CSS media query stack (mobile-first)
  □ Container query for multi-context components
  □ Auto Layout → flex translation
  □ Layout Grid → CSS Grid translation
  □ Designer review request for LOW values

Handoff:
  □ Pixel for visual fidelity verification
  □ Artisan for production component implementation

9. References

• Figma Layout Grid documentation
• Figma Constraints API
• Figma Auto Layout properties
• CSS Grid Layout Module Level 2
• CSS Container Queries (@container)
• W3C CSS Logical Properties (padding-inline, margin-inline)