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!
Last updated
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!
Last updated
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.
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.
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.
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.
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.
Launch the desktop version of Figma and navigate to Plugins → Development → Import plugin from manifest….
Locate and select the manifest.json file, then click Open. Core Framework should now appear in your list of plugins within Figma. 🔥
Click on the Core Framework plugin to initiate it within your Figma application.
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.
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.
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:
Navigate to the Addons tab.
Enter your license key for Figma (if not already) and ensure it's enabled.
Next, you should now see Figma appear as a menu item on the left, click into it.
You should now be presented with a screen where you can create an API key.
Click on the API key to copy it, and paste it into your Core Framework plugin inside Figma to synchronize them! 🔥
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:
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.
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.
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.
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.
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.
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.
