Apple's Human Interface Guidelines (HIG) - color (figma design)

overview-of-apples-HIG-visual-design-for-color-for-figma-design.md

Apple Human Interface Guidelines: Color Implementation in Figma

Setting Up Your Figma Color System

Creating Apple System Color Libraries

• Color Styles Organization: Create a dedicated Figma library named "Apple HIG Colors" with hierarchical naming like System/Blue/100% and System/Blue/Dark Mode[1][8].
• Semantic Color Variables: Establish color variables in Figma for all semantic colors (label, secondaryLabel, systemBackground, etc.) with both light and dark mode variants[7][8].
• Variable Collections: Use Figma's variable collections to toggle between light and dark mode palettes with a single switch during design reviews[6][8].
• Plugin Integration: Install "Apple Design Resources" plugin in Figma to access official Apple color values and ensure accuracy in your designs[8].

Environment Configuration

• Appearance Modes Framework: Create dedicated frames for light and dark mode designs, connected by shared components with mode-specific style references[6][8].
• Design System Documentation: Document color usage guidelines directly in Figma using dedicated documentation pages that showcase proper implementation examples[6][8].
• Contrast Verification: Use Figma's built-in contrast checker or plugins like "Stark" to verify accessibility compliance during the design process[1][5][8].

Practical Figma Implementation

Component-Level Color Application

• Interactive Components: Use Figma's variant properties to create state variations (default, pressed, focused, disabled) with appropriate color shifts for each state[3][8].
• Auto Layout Coloring: Apply background colors to auto layout containers rather than shapes to maintain flexibility when components resize[6][8].
• Text Style Integration: Create text styles with semantic color properties already applied (Label/Regular, SecondaryLabel/Regular) to ensure consistency[7][8].
• Interactive Prototypes: Use Figma's interactive components and smart animate to demonstrate color transitions between states in prototypes[8].

Dynamic Effects in Figma

• Vibrancy Simulation: Create layered effects with reduced opacity backgrounds and blur effects to simulate Apple's material system for menus and overlays[1][8].
• Elevation System: Establish a consistent elevation system using subtle background color shifts in dark mode (lighter surfaces for higher elevation)[7][8].
• Interaction Feedback: Use prototype interactions to demonstrate color feedback during taps, selections, and other user actions[3][8].

Design Team Collaboration

Color Token Management

• Local Variables vs. Library Variables: Structure shared colors as library variables while keeping project-specific colors as local variables[8].
• Naming Conventions: Establish clear naming conventions (e.g., Primary/Action/Default, Primary/Action/Pressed) that translate easily to development[4][8].
• Version Control: Track color system changes using Figma's version history with detailed comments about color modifications[8].
• Handoff Documentation: Create dedicated handoff frames showing hex values, variable names, and usage examples for development implementation[6][8].

Quality Assurance Workflows

• Design Review Templates: Create Figma templates for accessibility reviews that verify color contrast, color-blind simulation, and text legibility[1][8].
• Device Preview: Use Figma's device preview or mirror features to check how colors render on actual iOS devices with different display technologies[3][8].
• Consistency Checkers: Use plugins like "Design Lint" to identify inconsistent color usage that deviates from your established system[8].

Specific UI Element Color Guidelines in Figma

Navigation Elements

• Tab Bars: Create tab bar components with variants for selected/unselected states. Use blue (#007AFF light mode, #0A84FF dark mode) for active tabs and #8E8E93 at 30% opacity for inactive tabs[3][7][8].
• Navigation Bars: Style with subtle background blur effect (background-blur: 30px) and slight translucency (92-96% opacity) in light mode, darker background (#1C1C1E) with reduced translucency (86-90%) in dark mode[1][7][8].
• Status Bar Content: Create components with variants for light and dark content. Use black-based colors (#000000 at 60% opacity) for light backgrounds and white-based colors (#FFFFFF at 80% opacity) for dark backgrounds[7][8].

Interactive Controls

• Buttons: Structure button components with these Figma styles[3][5][8]:

  • Primary: Blue (#007AFF) for light mode, slightly brighter blue (#0A84FF) for dark mode
  • Secondary: Gray (#8E8E93) with 18% opacity background, white text in dark mode
  • Destructive: Red (#FF3B30) for light mode, slightly brighter red (#FF453A) for dark mode
  • Disabled: Gray (#8E8E93) with 38% opacity in both modes

• Form Fields[3][7][8]:

  • Default: Light gray background (#F2F2F7) in light mode, dark gray (#1C1C1E) in dark mode
  • Active: Add blue tint at 10% opacity to background and 1px blue border
  • Error: Red border (#FF3B30) with error text below in same red color
  • Placeholder Text: Gray (#8E8E93) at 60% opacity in both modes

Content & Data Visualization

• Lists & Tables[1][7][8]:

  • Group Background: Light gray (#F2F2F7) in light mode, near-black (#1C1C1E) in dark mode
  • Separators: Gray (#3C3C43) at 20% opacity in light mode, 30% opacity in dark mode
  • Selected Cell: Blue (#007AFF) at 12% opacity in light mode, 18% opacity in dark mode

• Charts & Graphs[5][7][8]:

  • Primary Data: Blue (#007AFF/#0A84FF)
  • Supporting Data: Green (#34C759/#30D158), Purple (#AF52DE/#BF5AF2), Orange (#FF9500/#FF9F0A)
  • Create a consistent palette with at least 3:1 contrast between adjacent elements
  • Store complete chart color systems as color styles with appropriate hierarchical naming

Workflow Efficiency Tips in Figma

Color Application Shortcuts

• Quick Actions: Use Figma's CMD+/ (Control+/ on Windows) to quickly search and apply color styles without navigating menus[8].
• Style Organization: Group color styles by function (text, background, accent) rather than just by color name for faster location during design[8].
• Component Defaults: Set default color properties in components to accelerate consistent application across designs[6][8].
• Color Scale Generation: Use "Tints and Shades" plugin to automatically generate accessible color scales that maintain proper contrast ratios[8].

Color Testing Tools Integration

• Accessibility Plugins: Install "Stark" or "Contrast" plugins to check color contrast directly within your Figma workflow[1][8].
• Color Blindness Simulation: Use "Color Blind" plugin to test designs under different vision conditions (Protanopia, Deuteranopia, Tritanopia)[1][8].
• Device Simulation: Create frames with screen blending modes to simulate how colors appear on various Apple devices (OLED vs. LCD)[3][8].
• Export Presets: Configure export settings that preserve color profiles when sharing designs for development handoff[8].

Advanced Figma Techniques for Apple HIG

Dynamic Color Variants

• Interactive Components: Create component variants that respond to both interaction state and appearance mode simultaneously using Figma's variant properties[8].
• Smart Color Animation: Use prototype interactions with smart animate to demonstrate how colors transition when switching between light and dark modes[8].
• Color Tokens in Components: Apply color styles through component properties to enable rapid theming updates when colors change[6][8].
• Mode-Switching Prototypes: Build interactive prototypes with a theme toggle that switches between light and dark mode using interactive components[8].

Design System Documentation

• Interactive Guidelines: Create interactive Figma prototypes demonstrating correct and incorrect color usage patterns for team reference[4][6][8].
• Color Relationship Diagrams: Document color relationships visually using connection lines between related semantic colors in different contexts[7][8].
• Deviation Tracking: Maintain a "color exceptions" page in your Figma file to document and justify any necessary deviations from Apple HIG standards[3][8].
• Developer Handoff Guide: Include explicit CSS/Swift color reference values in your Figma documentation for development implementation[6][8].

By implementing these Figma-specific practices based on Apple's Human Interface Guidelines, designers can create more accurate, consistent, and accessible iOS experiences while maintaining efficient workflows and clear documentation for design-to-development handoff.