Skip to content

Instantly share code, notes, and snippets.

@YokoPunk
Last active January 7, 2024 21:58
Show Gist options
  • Select an option

  • Save YokoPunk/3e1770400c71fdc3e1f5b0533aa808ba to your computer and use it in GitHub Desktop.

Select an option

Save YokoPunk/3e1770400c71fdc3e1f5b0533aa808ba to your computer and use it in GitHub Desktop.
Welcome to spatial design Original Outline

Welcome to spatial design.” is a massive Figma toolkit for mastering the new visionOS platform. Crafted with over 150 hours of dedication, insights from 7 Apple Vision Pro Labs, and extensive practical experience, this resource is more than just a toolkit—it's a revolution in design learning.

This guide is packed with over 100 screens, each designed to make your design journey smoother and more intuitive. I've split it into 13 easy-to-follow chapters. Each chapter is like a mini adventure in the world of design, covering everything from layout basics to the finer points of aesthetics.

Chapters

  1. Art Direction
  2. Patterns
  3. Components
  4. Inputs
  5. Immersive experiences
  6. Accessibility
  7. Scenes
  8. Environments
  9. Spatial Layout
  10. Branding
  11. Apps
  12. Templates
  13. Getting started

For example, in the chapter on 'Spatial Layout,' I break down complex ideas like 'Field of View' into simple, practical terms.

Intro Card

At the heart of your learning journey are the Intro Cards. Think of them as your personal control panel, unlocking doors to more in-depth knowledge. Each card is full of resources—direct links to Figma Screens, references to the Apple Human Interface Guidelines, precise WWDC timestamps, and snippets of code. This isn't just a learning tool; it's a comprehensive companion, blending theory with practical application. I’ll introduce them in Chapter 13, “Getting Started”.

Dive Deep and Explore

In creating this guide, I've dived deep into the world of spatial design. I've watched every WWDC video and dissected the most intricate design guidelines, blending them with my own hands-on experience from app development.

Whether you're a seasoned designer or just starting out, this guide will be your go-to resource for everything spatial design. Let's dive in and start creating outstanding stuff together!

Table of Contents

1. Art Direction

  • Light
  • Color
  • Materials
  • SF Symbols
  • Typography

2. Patterns

  • Charting data
  • Shared Space
  • Playing audio
  • Drag and drop
  • Multitasking
  • Playing Video

3. Components

  • Content
  • Layout and organisation
  • Menus and actions
  • Navigation and search
  • Presentation
  • Selection and input
  • Status
  • System experiences

4. Inputs

  • Digital Crown
  • Eyes
  • Gestures
  • Indirect gestures

5. Immersive experience

  • Mixed and Progressive immersion
  • Full immersion
  • Spatial audio
  • Motion
  • Best Practices

6. Accessibility

  • Best Practices

7. Scenes

  • Windows
  • Volumes
  • Full Spaces

8. Environments

  • Control panel
  • Design and behaviour

9. Spatial Layout

  • Field of View
  • Screenshot Safe Zone
  • Depth
  • Scale
  • Shadow

10. Branding

  • Tab Bar
  • Background
  • Navigation Bar
  • App Icon
  • AppStore

11. Apps

  • Springboard
  • Your app
  • Notifications

12. Templates

  • TV+
  • Music
  • Mindfulness
  • Settings
  • Freeform
  • Safari
  • Photo
  • Notes
  • App Store (coming soon)
  • Mail (coming soon)
  • Message
  • Compatible Apps
  • Files
  • Tips (coming soon)
  • Feedback (coming soon)
  • TestFlight

13. Getting started

  • Intro Card
  • Libraries
  • Watch
  • Plugins
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment