Getting Started with Figma

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.

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

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….

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.

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.

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.

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.

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.

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.