1.2.3
Headspin offers a collection of wireframes for Figma designed to accelerate the process of prototyping and designing websites.
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:
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.
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.
Set your font styles here. We use font sizes that match Headspin Copilot’s default settings.
Here, you can style buttons, add their variants, and find a few basic form input elements.
Add your own icons here and manage global shadows.
This new feature in Figma allows us to create variable tokens and reuse them in various contexts.
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.
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.
