You can have a play below with our embedded version or read on to find out more.

Interactive Layout Inspection

Our tool allows you to interactively inspect all of your layout and spacing dimensions, as well as relative positions and padding and gap rules. Focusing a layer gives you full details of:

• Sizing dimensions and constraints

• Layout direction, wrap, gap and overflow rules

• Padding and border radius rules

• Backgrounds and border styles

• Typography rules

Layer Details

Layer specific information is surfaced for specific layer types.

For nested components you will get:

• The component name and a link to view the component in the inspector

• The last time the component documentation was generated by FigMayo

• The full details of the applied component properties

For text layers we surface the text content so it can be easily copied to the developers clipboard.

Component Anatomy

The “Related” tab provides a full inventory of the anatomy of the focused layer listing out any nested components, typography and colours.

When hovering on any nested component or typography in the “Related” tab the inspector will highlight their usage in the composition making it super clear where and how the related elements should be used when constructing the designed component.

Figma Variables

If you have published your variables to your docs site (get our plugin here) then any value that is referencing a variable will default to displaying the variable name with ability to copy the variable name on click.

To make it super easy to discover the resolved value the display can be toggled to show the underlying variable value. This is great for hygiene as it can quickly surface inconsistent use of variables in the design source as well as potentially unnecessary variable definitions,

Variable Colour Modes

We also make it super easy to cycle through colour modes in your variables to allow engineers to find the correct variables (or values) for their implementation. To get the best results from this feature make sure to use a sensible variable for the background of your component set layer.

Final Thoughts

Our goal is to give as much value from the first 5 minutes of using FigMayo and we believe this will massively help the process of handing off design work to engineers. The feature will be in beta for the next 2 months and we already have a backlog of enhancements ready to go. We would love any feedback or suggestions for how we can improve this further so if you have any thoughts feel free to reach us at the links below.

• Chat with us on Slack

• Follow us on LinkedIn

Its our goal to make documentation feasible, even for lean teams. At FigMayo, we built our solution for people like you; teams striving for better design practices while juggling competing priorities. We want to help you save time, maintain momentum, and focus on doing what you love - creating great experiences.

I wanted to explore further why investing in a design system in the context of a small team can elevate your game and how automating your documentation makes this way more achievable.

Why Design Systems Are Worth It

Design systems bring consistency, efficiency, and scalability to your design process - we all know this. They’re more than just UI kits with a sprinkling of performance art. When done properly they form a single source of reliable truth that everyone on your team can lean on. They become a framework for design decisions, reusable components, and documentation that keeps everyone pointing in the same direction.

But the issue is, building and maintaining a design systems can be very time-intensive. Traditionally an undertaking so expensive it is out of reach of smaller teams. If you are brave enough to start out on this journey and your documentation falls out of sync (and it will, rapidly) then it can be a death knell for your project. Six months of grind down the toilet and red faces all round is nobodies idea of a fun time.

For small teams, the rewards of a design system can be massive, but the time required to invest properly was never really available. But, the game changed. In this new world our productivity has skyrocketed, bringing sophisticated practices well within reach for teams of any size.

The Challenges of Traditional Documentation

Tools like ZeroHeight promised to streamline documentation, but they demand too much from smaller teams. The license is costly, and you won't see any return on this investment for weeks, maybe even months, after signing up. First, you need to take a significant amount of time away from delivering value to shift focus and prepare your work for others to understand. This is an underrated skill—summarising and explaining your work clearly for an audience with different perspectives is challenging and can be a major obstacle.

This is where FigMayo aims to stand out. There's no heavy cognitive overhead—just click the button.

Automating Documentation

FigMayo integrates directly with Figma, transforming your design libraries into documentation websites with a single click. This saves a ton of time. For less than the cost of one hour of a junior designer per month, we handle all the setup, hosting, and maintenance of a detailed documentation site. As your designs change, the documentation can be updated in minutes with a single click, eliminating inconsistencies and the death knell of stale, unreliable information.

Ultimately leveraging automation in this way will reduce the overall investment in your DS, drive adoption, elevate your practice and de-risk your project work.

When to Choose Us

If documentation is stressing you out, if switching contexts is melting your mind, if your docs are outdated and becoming useless but you can't find the time to update them, then choose FigMayo.

If you hate duplication of effort, if the idea of valuable designer time being spent copy pasting information between tools brings you out in hives, if you just like efficiency, then choose FigMayo.

If you are in the enviable position of having deep pockets, a dedicated design system team and access to engineering support to configure and maintain deep integration into your code, then choose supernova (probably).

Ultimately the decision is a trade off between flexibility and control vs time and money. Select your preferred workflow that fits inside your constraints. There is probably not a one size fits all- but there might be a one size fits most and we think that is us.

Give us a shout if you would like to hear more.

• Chat with us on Slack

• Follow us on LinkedIn

To solve this internally we have a simple GitHub action setup that automates away the steps of downloading variables from FigMayo, pushing them up to our app repositories, raising PR's for review and to trigger unit and visual regression tests.

When your variables are changing frequently, repeating this process becomes a pain for everyone. For less technical team members jumping into the codebase, pushing branches and raising PR's can be a headache. For us, it was a problem crying out for a bit of automation.

Like everything we do this approach is optimised for simplicity and low-friction. No massive engineering overhead to get setup and no complex CI to maintain. The workflow is safe and can be triggered with a single click in the GitHub UI and will inherit all the access controls and branch protection already setup in your code repos.

Prerequisites

You will need a FigMayo documentation site with your Figma variables published via our Figma Plugin which you can find here.

How it works

The workflow glues together a few straightforward steps:

1. It grabs a JSON representation of your Figma variables from the FigMayo API.

2. It saves the JSON to a path in your codebase

3. It uses git to establish if there are any changes to the JSON

4. If there are, it raises a PR using the gh CLI

It's worth noting that if your FigMayo documentation site has many libraries with published variables, we will merge this into a single JSON object which makes resolving aliased variables between libraries much easier.

Getting started

Set up is very straight forward. You can get going by dropping the following YAML file into your .github/workflows directory, setting up a couple of secrets on your repository and adjusting the file-path input to suit your project.

You can find complete instructions on getting setup with FigMayo and creating the required secrets on our listing on the GitHub Marketplace.

# .github/workflows/sync-figma-variables.yml

name: Sync Figma Variables with FigMayo
on:
  workflow_dispatch: # Manual trigger
jobs:
  sync-tokens:
    runs-on: ubuntu-latest
    steps:
        uses: figmayo/figma-variables@v1.0.2
        with:
          github-pat: ${{ secrets.GH_PAT }}
          figmayo-api-key: ${{ secrets.FIGMAYO_API_KEY }}
          file-path: "src/design-tokens.json" # <-- The target path for the JSON

Once the workflow is setup it can be triggered manually from the actions tab in your repository. Once the action completes a new PR will be available with a generated branch name and any changes to the JSON fill captured by the git diff.

Taking things further

In our internal implementation there is a few ongoing workflow steps to generate types and run code formatting which we stripped out to make the workflow more generalisable.

Its likely there are more steps you want to take - like converting the JSON into CSS variables or other platform specific representations. If you want to learn more about how to use Style Dictionary for this purpose I can recommend this article by James Ives.

To support ongoing workflow steps the GHA will yield the following useful outputs.

The .github/workflows/sync-figma-variables.yml test workflow in the project repo shows how you can access these outputs in any ongoing steps you might need to take.

name: Test Sync Figma Variables Action

on:
  workflow_dispatch: # Allows manual execution

jobs:
  sync-figma-variables:
    runs-on: ubuntu-latest
    outputs:
      # If you need to access step outputs in another job you must map them here
      changes: ${{ steps.test-sync.outputs.changes }}
      branch-name: ${{ steps.test-sync.outputs.branch-name }}
      pr-url: ${{ steps.test-sync.outputs.pr-url }}
    steps:
      - name: Test Sync Figma Variables
        id: test-sync
        uses: ./
        with:
          gh-pat: ${{ secrets.GH_PAT }}
          figmayo-api-key: ${{ secrets.FIGMAYO_API_KEY }}
          file-path: "test/figma-variables.json"

      - name: Debug GITHUB_ENV
        shell: bash
        # Within the same job you can access the GITHUB_ENV directly
        run: |
          echo "Changes: ${{ env.CHANGES }}"
          echo "Branch Name: ${{ env.BRANCH_NAME || 'No branch created' }}"
          echo "PR URL: ${{ env.PR_URL || 'No PR created' }}"

        # Or you can find them in the step outputs
      - name: Debug GITHUB_OUTPUT
        shell: bash
        run: |
          echo "Changes: ${{ steps.test-sync.outputs.changes }}"
          echo "Branch Name: ${{ steps.test-sync.outputs.branch-name || 'No branch created' }}"
          echo "PR URL: ${{ steps.test-sync.outputs.pr-url || 'No PR created' }}"

  test-outputs:
    runs-on: ubuntu-latest
    needs: sync-figma-variables
    steps:
        # Accessing the mapped outputs from the previous job
      - run: echo '${{ toJSON(needs.sync-figma-variables.outputs) }}'

Whats next

To make this process even easier for our customers, the next step is to deeply integrate variable deployment into our plugin so designers can kick off this process right from the Figma UI.

We’re also working on adding transformations to convert Figma variables into formats like CSS/SASS variables, WCAG-compliant design tokens, Tailwind themes, and platform-specific outputs, including Swift constants for iOS and XML resources for Android.

Join us on Slack