Getting started
Providing a consistent, expected, and delightful experience for ActiveCampaign users.
Figma libraries
- Camp Toolkit
- Data Visualization Camp Toolkit
- Camp Add-on Library
- Icons and Illustrations
- Logo Library
Installation
The Camp Toolkit is automatically loaded when you open a new file, but all Figma libraries can also be installed from the Assets tab.
Styles and variables
Color
Camp utilizes a set of tokens to represent our color palette. To learn more about our colors and their accessibility guidelines, view our Colors page in Foundations.
In Figma, colors are represented as Styles. You can find all available colors in the right side panel of a Figma document. The correct colors are already loaded in every new document that is opened. Whenever possible, utilize colors from the Styles menu, rather than entering a hex code.
When opening the menu, you will first see a list of all colors available in our palette, categorized by usage such as background colors, text colors, and border colors. These color styles are foundational to all Camp components.
Typography
To add text to a design, you can use either Typography styles, or the Text component.
Effects
Many Camp components are preset with effects (for example, the modal component has a drop shadow). But if you’re building something custom, Camp has specific drop shadows available to use. You can find additional effects like drop shadows under Figma’s Styles section in the right side panel. Before adding drop shadows, review our rules on using Elevation.
Space
Unlike color, typography, and effects, Figma does not handle space within its Styles. Instead, spacing is up to the designer to specify. Camp components have padding (space) built in, but for page layout purposes, you will need to manually work within Camp’s Space scale.
Components
Each component’s page in the Figma Toolkit include emojis to indicate that component’s status in being moved over to Camp Next Gen. The emojis below indicate the following:
| Emoji | Description |
|---|---|
| ✅ | Updated component is published and available for use in design and development. |
| 🎨 | Updated component is available in design, but is not yet released in development. The first generation Camp component can still be used, but will be out of sync with the design updates made in Figma. |
| 🛠 | Component is in progress and being updated in design. Some design work may have been completed, but has not been finalized and the component may not yet exist in development. |
Additionally, the component description provides valuable usage guidelines for the component. Each component description details the current status of that component in relation to Camp Next Gen. _ Figma’s guide to components _ Figma’s guide to variables
Manipulating components
The Camp Toolkit is built using Figma’s variants, which are similar to component properties in development. Variants provide a set of controls in Figma’s right side panel to easily manipulate within the bounds of the component. Common variants include appearance, size, and state.
Many components include nested elements and components. These are exposed to you to make component manipulation quick and easy. For example, in design, the button component also includes the icon component, in order to add an icon into the button. These are baked into the component, where toggling “Has left icon” will then reveal a field to select the icon you would like to use.
Overriding and detaching
Overriding styles should be done with caution, and only when absolutely necessary. Note that when a style is overridden, further updates to the component could break the override. Style overrides include changes to a component’s color, drop shadow, border radius, padding, font, and so on.
Use components without detaching as much as possible. If you need to detach a component, let us know why, as it may be something we can add to the component itself.
Designing a new ActiveCampaign page
If you are designing a new ActiveCampaign page, rather than making additions or updates to a current experience, you can start with Page Layout available within the Camp Toolkit.
Unlike other components within the Camp Toolkit, Page Layout is meant to be detached so that you can easily add content directly into the Content Container frame, and manipulate that frame as needed. Page Layout comes with the page header and the navigation included, which should always be a part of any new page. Additionally, it also has the drawer and side panel as toggles that can be easily included in the design.
To detach the outer Page Layout frame, right-click and select “detach instance” after your page has been set up to your liking. The page header and the navigation, as well as any other components you chose to include, will still be componentized for you to customize as needed.