Massachusetts Design System tutorials
These self-produced walkthroughs show you how to work directly with Commonwealth assets, libraries, and design standards in Figma
Video: Adding components from the Design System in Figma (Vimeo)
Skip this video Adding components from the Design System in Figma (Vimeo).Figma for designers
These playlists are for designers and people who are new to Figma. They cover the interface, basic tools, and how to start building your first designs with auto layout.
- New to Figma? Get started with "Figma for beginners" tutorials
- This is the essential starting point. It covers the basics of the interface, frames, shapes, and text layers.
- Auto layout: Learn to create flexible designs and components
- Auto layout is crucial for modern UI design. This series teaches how to build responsive frames that expand and shrink with their content.
- Figma Tips
- A collection of short, bite-sized videos that reveal hidden shortcuts and workflow hacks
For developers
These playlists focus on translating designs into code, using Figma's Dev Mode, and extending Figma's capabilities.
- Dev Mode: level up your handoff process
- Designed for engineers, this playlist shows you how to inspect designs, grab CSS/iOS/Android code, and export assets
- Bridging the Gap
- Focuses on the collaboration between design and engineering. This playlist will help you understand how to communicate better with designers.