figma-variables-starter's Introduction

Variable Boilerplate

A Figma Plugin to quickly add Tailwind variables to your Figma document

Usage guide

Overview

The following tokens / variables are supported:

Units
- size
- opacity
- radius
- border
- container
Font
- size
- weight
Colors
- all

Created variables have the following properties:

name
value
scope
code syntax (assigns Tailwind tokens to the WEB platform)

To review the source config, see:

Usage

You need to build or install the plugin before using.

Then:

go Toolbar > Resources > Plugins > Variables Boilerplate
click to toggle individual options
click "Toggle all" to toggle an entire group
click "Create" to create variables

To view the created variables:

select nothing on canvas
click "Local variables" in the sidebar

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

Node.js – v20
Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

In the Figma desktop app, open a Figma document.
Search for and run Import plugin from manifest… via the Quick Actions search bar.
Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

Contributors

Stargazers

Watchers

figma-variables-starter's Issues

Nice lib!

Hey,

Nice lib!

I saw your video on YouTube whilst looking to see how folks do their Tailwind stuff.

This looks like a solid start, but I''d be happy to contribute to help make the code more maintainable, and even add a few features. I'm also contributing to FigmaToCode at the moment, so I think there could be some nice tie-ins.

Are you up to speed on pull requests?

Loading indicator

Hey @masha312,

You'd mentioned a loading indicator in the last PR, and I said that I think we'd need 2-way messaging functionality.

It turns out, it is not built in to Figma – messages are independent, and there is no way to return a result – however, it is something I've been involved for a long time in Chrome extensions and looking at for a while in Figma, so today I set about building a 2-way messaging service for Figma.

FWIW there is prior art in the form of figma-await-ipc but I wanted to build on some ideas in create-figma-plugin which provides auto-complete functionality for developers.

The result is full auto-complete functionality (the dropdown below is in the UI code, and shows the messaging targets in the Main code – including nested handlers!) which will make developers happy...

...as well as awaitable handlers, which will make users happy!

  function onCreateClick() {
    setLoading(true)
    api.call('create', collectionId, options).then(() => {
      setLoading(false)
    })
  }

Here's how it looks in action:

I'll need to package it up as an NPM package, then when done I can re-implement the code in this package, and PR, so it may be a few days.

I don't think it's really needed TBH, but as I say, it just so happened to be closely aligned with a bunch of other work I'm doing at the moment, and was a fun way to explore those ideas!

Cheers,
Dave

Recommend Projects

masha312 / figma-variables-starter Goto Github PK