Eggstractor Getting Started Guide

Part 1 - Set up Eggstractor in Figma

Open

Make a copy of the Eggstractor Demo Figma file

Our Eggstractor demo file has an accompanying Figma file. You can access it through the Figma Community (https://www.figma.com/community/file/1472329589982734868). Make a copy of this file into a Figma space of your choosing (it will default to Drafts, which is fine).

Open

Install the Figma plugin

The Figma plugin can be installed through Figma desktop, or used on the web version of Figma. You can access the page to install it through Figma’s plugin community site (https://www.figma.com/community/plugin/1464625803208186094/eggstractor).

Choose the Eggstractor Demo page you copied to get started:

Part 2 - Generate Sass using Eggstractor

Changes made in Figma can then be exported to a Sass file. We’ll show an example using the demo file.

Make a Change in Figma

For this example, you’ll update the color on the active label of the input box. First, select the active layer:

Open

Then, update the base color blue to base color pink:

Open

Generate the Sass

Open up the Eggstractor plugin from the Actions menu

Open

Inside the plugin, click the Generate Styles button. You will see the code render in the box below.

Open

Part 3 - Configure Github to Work with Eggstractor

To integrate Eggstractor with Github, there are a few pre-requisite steps that must be completed. You only need to do these one time.

Make a Copy of the Eggstractor Demo repository

First, sign into GitHub, then access the Eggstractor Demo Github repository (https://github.com/bitovi/eggstractor-demo) and use the Use This Template button in the top right. Choose Create a new repository from the dropdown menu.

Open

You can also go directly to this link to copy from the template repository.

Choose a location for your copy of the repo (e.g. eggstractor-demo), and click Create Repository:

Open

Enable workflows

Eggstractor uses workflows to preview changes. Your repo may or may not have them enabled. Go to the Actions tab. If you see the message below, click I understand my workflows, go ahead and enable them. If you don’t see this message, you’re already good to go.

Open

Enable GitHub Pages for previewing changes

Eggstractor uses GitHub Pages to create a preview site for your changes. To use this feature, GitHub Pages must be turned on.

You can enable GitHub Pages by accessing the Repository Settings, and choosing Pages in the left-hand menu. You can also access this by appending /settings/pages to your repository URL.

Open

Once you are on that page, under Build and deployment, choose Deploy from GitHub Actions as the source:

Open

Create a Personal Access Token

The Eggstractor Figma plugin requires a GitHub personal access token to push changes from Figma to your code repository.

Follow the instructions (https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token) that GitHub provides to create this token, using the following configuration information:

• Token name: Eggstractor Demo

• Repository access:

  • Only select repositories

  • Choose the repository name you created in the previous step

• Permissions

  1. Repository:

     1. Contents: read and write

     2. Metadata: read only

     3. Pull Requests: read and write

  2. Account: none

Configure the Figma plugin

Open

Back in Figma, when Eggstractor first opens, you’ll be asked to configure it.

Click Run and fill in the first three fields:

1. GitHub Token: the token string that you just generated in Part 3, Step 2

2. Repository (owner/repo): path to Eggstractor Demo repository you created in Part 3, Step 1

3. File path: src/sass/_source.sass

You can leave New Branch Name blank for now.

After configuring the fields, you can close the plugin (using the X button in the upper right). This information will be saved and does not need to be added again when using the plugin.

If you need to change the configuration later, you can open it by going to the Actions menu (in the bottom screen toolbar) and clicking Eggstractor.

Part 4 - Make a Pull Request in Github with your Sass Changes

Generate a Pull Request

Open

Once you have made all your changes in Figma, it’s time to generate a Pull Request! Type in a branch name (e.g. change-active-color-to-brand-pink) and click the Create PR button.

Open

You will then be given a link to view the Pull Request in your GitHub repo.

When you open the PR in GitHub, you’ll be able to see the relevant code changes (blue to pink, in this case) on the Files changed tag.

Open

Part 5 - Validate the Change in GitHub as a Preview Deployment

View the Preview Deployment

Open

With the GitHub Actions configured in previous steps, you’ll also be able to view a live preview of your changes. This lets you see both the code changes and the component changes in action before you merge the PR! You’ll find the View Preview link on the Conversation tab—note that it can take a few seconds for GitHub to process before the link appears.

Open

A new link will be generated each time a pull request is created or changes are made to it. You can interact with the preview component to see the hover and selected states.

You’re ready to go!

You’re now set up to make style changes to the demo file in Figma and push them to your GitHub demo repo. To start using Eggstractor on additional components, you’ll need to design them in Figma, and code them to use the mixins that Eggstractor exports.

Open

Eggstractor is an open source project by Bitovi.

Need some help?
Chat with us on Discord | Send feature requests to GitHub | Email us

Need pros to help design & build your design system? That’s us!