Templates

Templates are the fastest way to build your screens, using well-established layouts and patterns.

Templates are cross-domain! Every template that we provide in Figma has

its counterpart in code. Using them will ease the designer-developer handoff.

For designers

Templates are simple frames that you copy and paste into your project files. Contrary to components, they're easy to change and adjust to your needs.

Templates provide:

• variations of the basic components like buttons, list items, etc.
• typical content for container components like dialogs, menus, pop-overs, etc.
• ready-to-use section and subsection frames following the content hierarchy principles
• application/website layouts implementing the navigation patterns described in each domain

Quartz centralizes all the templates into a single file so that you can see everything available across the entire design system. This Templates file is your primary entry point to Quartz.

And don't forget to add this file to your favorites!

Library files are for component makers Figma libraries contain raw

components and other internal stuff that the makers need to test what they're building.

You can inspect them, but the templates file provides a smoother experience.

For developers

Templates are code samples to copy and paste into your project.

Coming soon

We initially wanted to provide code templates in StackBlitz sandboxes, but the recent Figma features for developers may allow us to generate code directly from Figma.

We will investigate and let you know! Any contribution is welcome, too :)