Internship
Student login
← Design Systems learning path
Design Systems · Module 7 of 10

Figma libraries

Designers use shared Figma libraries that mirror the coded components.

📖 Key ideas

  1. Publish components and styles as a team library.
  2. Use variables in Figma for tokens like colours and spacing.
  3. Auto layout makes components resize like real code.
  4. Name layers and properties to match code props.
  5. Library updates notify designers to accept changes.
💡 Real-life example: Like a shared stationery cupboard: every designer takes the same official stamps instead of drawing their own.
Team libraryShared Figma components and styles
Auto layoutFigma's flexible layout like CSS flexbox
Figma variablesTokens stored in Figma
InstanceA copy of a main component