Getting Started with Figma

Core Framework now offers seamless integration with Figma, allowing you to efficiently synchronize projects across both the Core Framework web app or WordPress plugin and the Figma plugin!

Additionally, you can now directly utilize colors and variables from Core Framework within your Figma designs, ensuring consistency from the initial design stages through to the final development phase of your websites.

Figma Integration Addon Overview

Note: The Figma Integration Addon is currently in an early access phase. You will need to download a file that is compatible exclusively with the desktop version of Figma. Additionally, the purchase of a license key is required. Once our plugin is approved on Figma’s marketplace, it will be accessible for use on both the desktop application and the website, eliminating the need for file downloads.

Purchasing the Plugin

The Figma addon is available for purchase in our marketplace here. Upon completion of your purchase, you will receive a license key and a downloadable file, both of which can be accessed from your dashboard by navigating to Dashboard → Your Purchases → View.

Installing the Figma Addon

Note: The first three steps outlined are applicable only during the early access phase. Once the Core Framework plugin for Figma is approved on Figma’s marketplace, the process will not require downloading any files, allowing for a more streamlined integration.

1. Access Your License Key and Downloadable File

From your dashboard, you will have access to both a license key and a downloadable file. This file is necessary for the desktop version of Figma. Download the file to your preferred location. Once downloaded, unzip the file to reveal several contents, including a file named manifest.json, which is crucial for the next steps.

2. Import the plugin in Figma

Launch the desktop version of Figma and navigate to Plugins → Development → Import plugin from manifest….

Be sure to navigate the file needed for Core Framework to be added.

3. Select the Manifest File

Locate and select the manifest.json file, then click Open. Core Framework should now appear in your list of plugins within Figma. 🔥

4. Load the Core Framework Plugin

Click on the Core Framework plugin to initiate it within your Figma application.

Here we can see Core Framework was successfully added.

5. Enter License Key

In the plugin interface, you will be prompted to enter the license key obtained from your dashboard. Please paste it into the designated license key field and click Connect.

Here you should enter your license key found in your dashboard area.

6. Synchronize Project or Start New

You will have the option to synchronize with a project you have already set up, whether via the web app or our WordPress plugin. We will explain in the steps below more about connecting to an existing project.

Insert your API key from your existing projects, or alternatively, start a project from scratch.

Connect Existing Project

To connect to an existing project, ensure that the license key is also added there within the Addons tab. To synchronize, paste your API key from your existing project:

1. Navigate to the Addons tab.

2. Enter your license key for Figma (if not already) and ensure it's enabled.

Ensure Figma is enabled.

1. Next, you should now see Figma appear as a menu item on the left, click into it.

2. You should now be presented with a screen where you can create an API key.

Click here to create an API key which can be used in the Core Framework plugin inside Figma!

1. Click on the API key to copy it, and paste it into your Core Framework plugin inside Figma to synchronize them! 🔥

Purpose of Synchronization

If you’ve synchronized your Core Framework web app or WordPress plugin with the Core Framework plugin in Figma, any changes made in either environment will automatically update the other. This synchronization offers several key benefits:

1. Consistency Across Platforms: Ensures uniformity between your Figma design and the live website, allowing you to maintain brand integrity throughout the design and development stages.

2. Time Efficiency: By syncing changes, you eliminate the need for repetitive updates across multiple tools, streamlining your workflow and speeding up your design-to-development process.

3. Real-Time Updates: Any adjustments made in Core Framework or Figma are reflected instantly, giving you immediate visual feedback and minimizing potential errors or design mismatches.

4. Simplified Collaboration: Designers and developers can work in tandem, ensuring that updates on the website are mirrored in Figma, fostering a smoother handoff between design and development teams.

5. Enhanced Version Control: Synchronization helps maintain a single source of truth for your project, reducing confusion about which version of the design is up-to-date.

Using Core Framework in Figma

When clicking Save for the first time, there will be a new collection of variables available to use in Figma's local variables. We have included more information in the next article.