Lecture Notes on Building a Design System in Figma

Introduction

• Building a design system includes more than just a Figma file. It encompasses:
  • Communication
  • Rules
  • Documentation
  • Code that aligns with design rules

Current State of the Design System

• Review of previous sessions and how the design system has evolved
• Progress made visible through Figma's automatic version history
• Current organization utilizes components with underscores for internal organization

Documentation and Components

• Encourage documentation within the design system
  • Create little design system components for structuring
  • Use underscores to denote internal components that won’t publish
• Examples of components created:
  • Icon grid
  • Color swatch with hex codes and shades
  • Typography settings

Frames and Auto Layout

• Utilization of auto layout to make components responsive and adjustable
  • Demonstration of creating a button with auto layout

Grids and Spacing

• Importance of spacing and grid systems in design
  • Considerations on how layout affects various devices (desktop, tablet, mobile)
  • Setup of a flexible grid to accommodate different screen sizes
• Spacing definitions should follow a systematic approach (e.g. based on material design principles)

Design Tokens and Layout Grids

• Introduction to design tokens as a method for defining relationships between spacing elements
• Explanation of creating layout grids and documenting their usage
  • Suggested naming conventions for grids
  • Using plugins to visualize layout grids

The Importance of Spacing

• Need to establish a clear system for how elements relate to one another in terms of spacing
• Exploration of different algorithms for spacing:
  • Linear spacing
  • Nonlinear spacing

Component Creation

• Steps taken to create components (e.g., text fields)
  • Importance of setting up different states for components (normal, active, disabled)
  • Use of constraints to ensure components scale properly

Documentation Practices

• Ideas on how to document the design system effectively
  • Recommendations to combine documentation in Figma alongside coding practices

Conclusion

• The next stream will cover:
  • Incorporating icons into text fields
  • Exploring design methodologies for cohesive icon systems

Homework Assignments

• Review of previous streams for additional guidance
• Download and practice with icon component designs from past materials