Apple HIG: Implementing Layout & Spacing in Figma

Core Principles in Figma Implementation

Setting Up Clarity & Hierarchy

Create Figma Libraries for component hierarchy levels (primary, secondary, tertiary)
Use Auto Layout Weight Properties to establish visual hierarchy through proportional sizing
Apply Figma's Layout Grids with 8pt increments to create consistent negative space
Setup Z-Pattern Frames using Figma's alignment tools for natural reading flows
Configure Interactive Components with clear states hierarchy (default, hover, pressed)

Building Adaptable Layouts

Create Device Presets in Figma for all Apple devices with accurate dimensions:
- iPhone SE: 375×667pt
- iPhone Pro Max: 430×932pt
- iPad Mini: 744×1133pt
- iPad Pro: 1024×1366pt
- Vision Pro: Custom spatial dimensions
Configure Responsive Variants using Figma's variant properties for:
- Device classes (compact, regular)
- Orientations (portrait, landscape)
- Platform-specific layouts (iOS, iPadOS, visionOS)
Setup Auto Layout Constraints that respond to resize behaviors
Use Smart Animate for visualizing transitions between layout states

Maintaining Consistency

Create Figma Variables for:
- System-defined spacing tokens
- Platform-specific dimensions
- Container paddings
- Component spacing
Build Component Properties for consistent spacing configuration
Set Up Style Guide Pages with spacing examples and usage rules
Utilize Component Swap for platform-specific interface elements

Layout Systems in Figma

Implementing the 8-Point Grid

Configure Layout Grid Settings:
- Grid Type: Square Grid
- Size: 8px
- Color: Semi-transparent blue (#0000FF at 10% opacity)
- Check "Show layout grid in exports" during design review
Create Base Component Spacing:
- Define spacing components at 8, 16, 24, 32, 40, 48, 56, 64pt
- Set as non-exportable library components for consistent reuse
Setup Auto Layout Presets:
- Standard padding: 16px
- Standard gap: 8px
- Custom spacing: Multiples of 8px

Alignment Framework Setup

Configure Text Styles with proper alignment properties:
- Left alignment as default (Right for RTL)
- Center alignment styles for specific use cases
- Right alignment for numerical values
Create Optical Alignment Components:
- Use Boolean operations to create optically-centered icons
- Apply alignment functions in Auto Layout frames
- Set up component variants for different alignment needs

Safe Areas & Layout Margins

Create Device Frame Components with:
- Properly marked safe areas as component properties
- Device-specific notches and home indicators
- System UI elements (status bar, home indicator)
- Dynamic Island cutouts for relevant devices
Set Up Layout Margin Frames:
- 16pt margin frames for phones
- 20pt margin frames for tablets
- Margin properties that can be toggled
Design Safe Area Visualizers:
- Interactive components showing tap zones
- Heat map overlays for thumb reach areas
- Safe area toggles for design review

Spatial Layout (visionOS) in Figma

Create 3D Frame Approximations using:
- Multiple frames with shadow and blur effects
- Z-axis indication through opacity and scale
- Interactive prototype connections between depth planes
Design Depth Plane Components:
- Near plane interaction elements (high detail)
- Middle plane content viewers (medium detail)
- Far plane ambient information (low detail)
Set Up Interactive Prototypes for spatial testing:
- Smart animate transitions between depth planes
- Interaction design for hand gestures
- Gaze tracking simulation with hover states

Figma-Specific Spacing Tools

Auto Layout Configuration

Create Base Frame Components with standard Auto Layout settings:
- Container Frames: 16pt padding horizontal/vertical
- Section Frames: 24pt gap between items
- List Frames: 44pt minimum height items, 1pt separators
Use Space-Between Property for justified content distribution
Apply Fill-Container for adaptive width elements
Set Up Hug-Content components for text and input fields

Interactive Spacing Components

Build Spacing Tokens as Components:
- Visual representations of each spacing value (8, 16, 24...)
- Interactive properties to change values during design
- Documentation of usage contexts
Create Demo Components showing correct/incorrect spacing
Design Interactive Resizers to test layout behavior across devices

Margin & Padding Presets

Configure Container Components with:
- Standard screen edge margin: 16pt (small) / 20pt (large)
- Card internal padding: 16pt all sides (variant property)
- Section container: 16pt top/bottom, 16pt left/right
Set Up Element Spacing Presets:
- Button Row: 8pt gap between buttons
- Form Layout: 16pt between fields
- Content Block: 24pt bottom margin

Spacing Libraries & Variables

Create Figma Variables for Spacing:
- spacing.xxs: 4pt
- spacing.xs: 8pt
- spacing.s: 12pt
- spacing.m: 16pt
- spacing.l: 24pt
- spacing.xl: 32pt
- spacing.xxl: 48pt
Set Up Variable Modes for different device classes
Apply Variables to Component Properties for consistency

Component Libraries for Apple HIG

Lists & Tables Components

Create Base List Components:
- Standard Cell: 44pt height
- Subtitle Cell: 60pt height
- Custom Content Cell: Flexible with minimum 44pt
- Header View: 32pt height
- Footer View: 32pt height
Configure List Component Properties:
- Separator visibility toggle
- Inset grouped vs. plain style
- Leading/trailing accessory options
- Chevron indicator toggle
Set Up Cell Spacing Presets:
- Leading content inset: 16pt
- Trailing content inset: 16pt
- Vertical spacing: minimum 8pt from edges

Forms & Input Fields

Design Form Component System:
- Text Field: 44pt height with 16pt horizontal padding
- Field Label: 10pt spacing to input
- Error Container: 4pt below field
- Helper Text: 4pt below field
Create Form Layout Frame:
- Between-field spacing: 16pt
- Section spacing: 32pt
- Section header: 16pt bottom margin
- Form Group: 32pt bottom margin
Configure Input Component States:
- Default, Focus, Error, Disabled
- Interactive prototype triggers
- Validation indicators

Modals & Sheets Library

Build Modal Component System:
- Sheet Container: 16pt padding all sides
- Alert Title: 8pt bottom margin
- Message Text: 16pt bottom margin
- Button Container: 44pt height buttons, 8pt separation
Create Sheet Variants:
- Full-screen sheets
- Half-height sheets
- Quarter-height sheets
- Action sheets with variable content
Set Up Interactive Transitions:
- Modal presentation animations
- Dismissal behaviors
- Background dimming layers

Navigation Components

Design Tab Bar System:
- Container: 49pt height + safe area
- Tab Items: 28×28pt icons with 10pt labels
- Icon-to-label spacing: 4pt
- Active/inactive states as component properties
Create Navigation Bar Library:
- Container: 44pt height + safe area
- Title: 17pt SF Pro centered or leading
- Bar buttons: minimum 44×44pt touch target
- Large title variant (34pt text)
Build Sidebar Navigation:
- Container: 320pt expanded, 80pt collapsed
- List rows: 44pt height
- Section headers: 32pt height
- Leading/trailing icon options

Figma Implementation Best Practices

Setting Up Dynamic Type

Create Text Style System with variants for:
- All 11 Dynamic Type sizes (from xSmall to AX5)
- Weight variations (regular, medium, semibold, bold)
- SF Pro and SF Pro Display families
Configure Layout Dependency:
- Connect Auto Layout spacing to text styles
- Create responsive component variants for text sizes
- Test design with text override functionality
Build Testing Templates for accessibility text sizing

Multi-Device Design System

Create Device Preset Frames:
- All current iPhone models
- All current iPad models
- Vision Pro spatial interfaces
Set Up Adaptive Components:
- Variant properties for compact/regular width
- Responsive resize constraints
- State management for different platforms
Configure Layout Switch Points:
- Define breakpoint behavior in component properties
- Create documentation for layout changes at breakpoints
- Test on multiple device frames

Library Organization

Structure Design System Files:
- Core Spacing Components page
- Typography & Text Styles page
- UI Components by category
- Layout Templates & Examples
- Platform-Specific Overrides
Maintain Documentation:
- Link to Apple's HIG documentation
- Include usage examples and Do/Don't visuals
- Add interactive prototype demos

Collaboration & Handoff

Configure Developer-Friendly Components:
- Include spacing annotations on components
- Name Auto Layout properties with SwiftUI terminology
- Use component descriptions to explain HIG requirements
Create Inspection Documentation:
- Show padding and margin measurements
- Include context-specific implementation notes
- Highlight platform-specific requirements
Set Up Interactive Specs:
- Show/hide dimensions in prototype
- Toggle layout grid and spacing visualization
- Compare designs across multiple devices

Platform-Specific Design Systems

iOS Component Library

Create iOS-Specific Templates with:
- Bottom tab bar navigation
- iOS standard status bar
- Dynamic Island cutouts (when applicable)
- Bottom-anchored action buttons
Configure iOS Spacing Standards:
- Form sheet padding: 16pt
- List row height: 44pt
- Interactive elements: 44pt minimum

iPadOS Adaptations

Build iPadOS Component Variants:
- Sidebar navigation components
- Multi-column layout templates
- Pointer interaction states
- Split view configurations
Design for Larger Screens:
- Content density increases
- Multiple columns with 20pt+ gutters
- Refined spacing for larger display area

visionOS Interface Elements

Create Spatial Interface Components:
- Depth-aware frames and layout
- Glass materials and blur effects
- Large hit targets for hand interactions (minimum 60×60pt)
- Gaze tracking indicators and states
Construct 3D User Interface Metaphors:
- Layered information architecture
- Depth cues through shadows and visual weight
- Environment integration considerations

Figma-Specific Production Workflows

Generating Design Specs

Configure Inspect Settings for developer handoff:
- Show measurements in points (pt)
- Include safe area annotations
- Highlight Auto Layout properties
Create Annotation Components:
- Dimension markers showing exact spacing
- HIG reference links in component descriptions
- Implementation requirements notes

Export & Asset Production

Configure Export Settings:
- 1× for @1x resources
- 2× for @2x resources
- 3× for @3x resources (iPhone)
- Custom SVG export for adaptive icons
Set Up Component-Specific Export Presets:
- Icon export at multiple resolutions
- Screen designs as mockups
- Layout specifications as documentation

Version Control & Updates

Establish Branching Strategy for Figma file variants:
- Main/production design system
- Platform-specific branches
- Exploratory design branches
Document HIG Implementation with branching based on iOS/iPadOS versions

Design QA Process

Create Testing Templates for:
- Layout integrity across device sizes
- Dynamic Type size testing
- Dark/Light mode transitions
- Layout orientation changes
Build Comparison Screens showing design compliance vs. violations

Tools & Resources

Figma Plugins for Apple HIG

Apple HIG UI Kit (Community resource)
SF Symbols for Figma - Import SF Symbols directly
Auto Layout Guide - For Apple-compliant spacing
Breakpoints - Test responsive layouts
Stark - Verify accessibility compliance

Design System Management

Organize Components with naming conventions:
- Platform/Component Type/Variant
- Example: "iOS/Button/Primary"
Use Figma Variables to manage:
- Color tokens aligned with Apple's system colors
- Spacing values compliant with 8pt grid
- Typography scales matching Dynamic Type

Interactive Prototype Setup

Configure Smart Animate for accurate transitions
Create Component State Management for:
- Input field states
- Button states
- Navigation transitions
Build Responsive Prototype Examples showing layout adaptation

By leveraging Figma's powerful features and aligning them with Apple's Human Interface Guidelines, designers can create consistent, accessible, and platform-appropriate experiences that feel native across Apple's ecosystem while maintaining efficient design workflows.

eonist/Apple-HIG-Layout-Spacing-in-Figma.md