Getting started with Headspin

After you have completed your purchase, follow these steps to get started easily.

On a new site installation:

1. Download the latest Copilot version, install it, and activate it.

Plugin settings:

• In the Project Tab, set the minimum and maximum viewport sizes for calculating fluid sizes.
• In the Theme Tab, click on the folder icon next to “Page” to open the Page setting. Here, you can set your page width. This setting will override the Breakdance global settings, so there’s no need to adjust it in Breakdance. You can also modify Typography and Spacing or leave them as is.
• In the Color Palette Tab, by default, you will have a generated Brand color and Neutral color. The Brand color from Headspin will override the Brand color in Breakdance, so you only need to set it here (until we separate them and ensure Breakdance Global colors are not overridden by Headspin colors). Feel free to add more colors as needed for your project.

• After adjusting all settings, be sure to hit the Save button.

• In the Copilot header, click on “Sync”. Open a new tab and navigate to the Breakdance builder editor. Go to “Global Settings” > “Colors” and add a random color to the Palette. Keep this tab open and return to the tab with the Headspin dashboard.

• In the “Sync” section, click on “Run sync” – now, colors from Copilot will be created in the Breakdance Palette. Remove the random color you had added.

Now, you can start copying and pasting wireframes from our site.

On an existing site:

1. Download the latest Copilot version, install it, and activate it.

Plugin settings:

• In the Project Tab, set the minimum and maximum viewport sizes for calculating fluid sizes.
• In the Theme Tab, click on the folder icon next to “Page” to open the Page setting. This will override the Breakdance global settings, eliminating the need to adjust it in Breakdance.
• In the Color Palette Tab, by default, you will have a generated Brand color and Neutral color. The Brand color from Headspin will override the Brand color in Breakdance, so you only need to set it here in the Headspin plugin dashboard (until we separate them and ensure Breakdance Global colors are not overridden by Headspin colors).

• After adjusting all settings, be sure to hit the Save button.

• In the Copilot header, click on “Sync”. Open a new tab and navigate to the Breakdance builder editor. Go to “Global Settings” > “Colors” and add a random color to the Palette (if you haven’t already). Keep this tab open and return to the tab with the Headspin dashboard.

• In the “Sync” section, click on “Run sync” – now, colors from Copilot will be created in the Breakdance Palette. Remove the random color you had added (if you had added one).

Now, you can start copying and pasting wireframes from our site.