Figma Library

Headspin offers a collection of wireframes for Figma designed to accelerate the process of prototyping and designing websites.

Getting Started

Within your account, you’ll find a link to the Figma file. This file is ready to use from the start, allowing you to concentrate on building wireframes. If you wish to customize it further, explore the following sections under the DESIGN SYSTEM:

• Assets
• Colors
• Typography
• UI Elements
• Misc
• Additionally, a very important feature: Local Variables.

Design System – Assets

Here, you’ll discover the project logo, which is recommended to be used in SVG format. Additionally, there are dummy logos for partners and placeholder images.

Design System – Colors

This section lists the colors. Specifically, it includes a Neutral color that aligns with Headspin’s default neutral color. You can add more colors in this section.

Design System – Typography

Set your font styles here. We use font sizes that match Headspin Copilot’s default settings.

Design System – UI Elements

Here, you can style buttons, add their variants, and find a few basic form input elements.

Design System – Misc

Add your own icons here and manage global shadows.

Local Variables

This new feature in Figma allows us to create variable tokens and reuse them in various contexts.

Primitive Variables

This section contains the base settings for all variables. It includes a setting for the Theme, which specifies the page width and automatically applies to 95% of wireframes (the remaining 5% have specific layouts that require manual resizing).

Additionally, there are base colors, which are copies of the Neutral colors from Headspin Copilot, and Spacing values, also derived from Headspin Copilot.

Headspin Colors

This section introduces the fun part: reusing primitive variables and adding modes to them. For instance, you can create a “dark” mode by setting a different color for each neutral color, achieving a dark mode with a single click.