Code Monkey home page Code Monkey logo

parrot-figcd's Introduction

FIGCD - A CLI Tool for Continuous Delivery of Figma Plugins

Version License

This CLI tool is inspired by the insightful talk of Jean-François Bisson at config 2023 and the incredible work of Fastlane (the counterpart for iOS and Android apps).

During the development of Parrot – a Figma Plugin that simplifies translation within Figma – I faced the challenge of setting up a reliable Continuous Delivery process and the manual process of publishing within the Figma app.

This figcd CLI aims to ease those frustrations, allowing you to effortlessly integrate the latest source state into Figma, streamline the manual publishing process, and seamlessly incorporate it into a state-of-the-art CI/CD setup. With figcd, you can focus on your creative work while ensuring your Figma plugins reach users smoothly and efficiently.

Table of Contents

Installation

To get started with the figcd CLI, you need to have Node.js installed. Then, install the package globally using npm:

npm install -g figcd

Usage

Running with npx

If you don't have the CLI installed globally or want to use the latest version without installing it, you can use npx to run the CLI directly:

npx figcd <command> [options]

For example:

npx figcd auth

Running within a GitHub Action

To use figcd within a GitHub Action, follow these steps to set up the necessary authentication token:

  1. Obtain a fresh authentication token by running the following command on your local machine:
npx figcd auth

This command will prompt you to log in using 2-factor authentication and generate a new Figma API token.

  1. Add the created token as a GitHub Action secret. Go to your GitHub repository, click on "Settings" > "Secrets" and then click "New repository secret". Name the secret FIGMA_WEB_AUTHN_TOKEN and paste the token value into the "Value" field. Click "Add secret" to save it.

  2. In your GitHub Action workflow file (e.g., .github/workflows/publish.yml), make the token available as an environment variable using the env keyword:

jobs:
    my_job:
    runs-on: ubuntu-latest

    env:
        FIGMA_WEB_AUTHN_TOKEN: ${{ secrets.FIGMA_WEB_AUTHN_TOKEN }}

    steps:
        # Add your other steps here

With these steps completed, figcd will be able to use the authentication token during the GitHub Action run.

Sample Workflow File

For a complete example of how to use figcd in a GitHub Action, check out our sample workflow file located in the examples directory.

This workflow demonstrates the process of setting up figcd, authenticating with Figma, and automating the plugin publishing steps. You can use this as a starting point for integrating figcd into your own GitHub Actions.

Happy automating!

figcd - cli

If you have the figcd package installed in your project's dependencies, you can run the CLI commands directly:

Authentication

Authenticate in Figma to get the AuthN Token needed to publish using Figma's web API.

figcd fig-auth [options]

Options:

  • -h, --help: Display help for the command.

Get Current Version

Get the current Version of the plugin.

figcd current-version [options]

Options:

  • -t, --authn-token <string>: Figma AuthN Token (env: FIGMA_WEB_AUTHN_TOKEN)
  • -m, --manifest-file <string>: Filepath to your plugin's manifest.json (default: "./manifest.json")
  • -h, --help: Display help for the command.

Prepare Plugin Version

Sets the package.json files minor part of the version to the next version of the Figma plugin. Expects a valid AuthN Token from Figma set to the FIGMA_WEB_AUTHN_TOKEN environment variable.

figcd prepare [options]

Options:

  • -p, --package-file <string>: Filepath to your package.json (default: "package.json")
  • -t, --authn-token <string>: Figma AuthN Token (env: FIGMA_WEB_AUTHN_TOKEN)
  • -m, --manifest-file <string>: Filepath to your plugin's manifest.json (default: "./manifest.json")
  • -h, --help: Display help for the command.

Create API Key

Create a Figma API key.

figcd create-api-key [options]

Options:

  • -t, --authn-token <string>: Figma AuthN Token (env: FIGMA_WEB_AUTHN_TOKEN)
  • -e, --expiration <number>: Expiration in seconds (default: 240 Seconds) (default: 240)
  • -d, --description <string>: Description of the token (default: "figcd-generated-token")
  • -s, --scopes <scopes```>: Scopes for the token (default: ["files:read"])
  • -h, --help: Display help for the command.

Release New Version

Release a new version of your Figma plugin (expects the build to be done in an earlier step).

figcd release [options]

Options:

  • -t, --authn-token <string>: Figma AuthN Token (env: FIGMA_WEB_AUTHN_TOKEN)
  • -m, --manifest-file <string>: Filepath to your plugin's manifest.json (default: "./manifest.json")
  • -n, --store-name <string>: Name of the plugin appearing on the store - falling back to the current one in the store if not specified
  • -d, --store-description <string>: Description of the Figma plugin
  • -df, --store-description-file <string>: Path to a file containing the description of the Figma plugin
  • -tl, --tagline <string>: Tagline - falling back to the current one in the store if not specified
  • `-t, --tags ````: Tags - falling back to the current ones in the store if not specified
  • -c, --enable-comments <boolean>: Enable Comments - falling back to the current ones in the store if not specified
  • -rn, --release-notes <string>: Release Notes (default: "")
  • -rnf, --release-notes-file <string>: Release Notes file containing the description of what has changed - {{VERSION}} will be replaced with the version of the Figma plugin
  • -h, --help: Display help for the command.

Options

  • -V, --version: Output the version number of the CLI.
  • -h, --help: Display help for the command.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Disclaimer: This project does in no way affiliated with Figma Inc. This project is open source under the MIT license, which means you have full access to the source code and can modify it to fit your own needs. figcd runs on your own computer or server, so your credentials or other sensitive information will never leave your own computer. You are responsible for how you use figcd.


This README provides an overview of the figcd CLI's capabilities and how to use its various commands and options. Feel free to customize it further based on your package's specific features and requirements. Happy coding!

parrot-figcd's People

Contributors

macintoshhelper avatar niklasbuchfink avatar martin-lysk avatar

Stargazers

Gökay Borulday avatar Soonho Kwon avatar Alfonso Andrés López Molina avatar AK avatar Sarmad Saleem avatar Emmanuel C. Jemeni avatar Michael Yagudaev avatar Sebastian avatar lichin-lin avatar Jan Six avatar Ilya Medvedev avatar Steve Dodier-Lazaro avatar  avatar Victor Girotto avatar Tekeste Gebreanenia avatar y.takahashi avatar Liam Martens avatar  avatar Afnizar Nur Ghifari avatar Florian Schulz avatar Remy avatar John Dunning avatar Oscar Casamitjana avatar Reza Faiz Atta Rahman avatar Johannes Späth avatar

Watchers

 avatar  avatar

parrot-figcd's Issues

App-based TOTP/2FA support

From local testing, it appears that app-based 2FA support should be able to work. SMS 2FA should be avoided where possible due to the risks around SIM swapping and similar attacks.

`figcd release` failing

Hi Martin! We connected before on the Figma forum. Thanks for your great support earlier.

I'm having an issue releasing my plugin. It seems like it can't get the version_id and then the release fails. It's coming from this line. This is a new issue, I was able to successfully release on November 29.

preparedVersionId = preparedRelease.version_id;
TypeError: Cannot read properties of undefined (reading 'version_id')

I'm pretty sure this is not an authentication issue. I can get the current version using figcd current-version and figcd prepare works as well.

I'm trying to narrow down the issue now. It seems that either the fetch is failing on prepareReleaseResponse or possibly there is no meta attribute on the returned json? Maybe Figma changed something about the API recently?

Let me know if you need more information. Thanks in advance!

is this tool still usable?

Hey,

I was using the latest version of this project to automate the plugin publish but failed to make it due to the authorized response from figma api by following the given docs to setup the env vars etc.

so I just want to quickly checkin if this project still valid for the latest figma plugin publish workflow? if so can I get a latest document to follow?

Here is the current issue im encountering while running figcd auth:

yarn figcd auth                                                         [07/8/24 | 11:47:46]
yarn run v1.22.17
Please enter the email address of your Figma account: xxxx
Please enter your Figma password: xxxx

//....

SMS sent to number ending in (1077): please enter the Authentication code: 6371002

/Users/zheng.yuan/workspace/vega-figma/node_modules/figcd/src/auth-helper.js:145
        const cookiesReceived = loginResponse.headers.get('set-cookie').split('; ');
                                                                       ^

TypeError: Cannot read properties of null (reading 'split')
    at Command.authenticate (/Users/zheng.yuan/workspace/vega-figma/node_modules/figcd/src/auth-helper.js:145:72)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Command.parseAsync (/Users/zheng.yuan/workspace/vega-figma/node_modules/figcd/node_modules/commander/lib/command.js:936:5)
    at async main (/Users/zheng.yuan/workspace/vega-figma/node_modules/figcd/bin/cli.js:135:9)

Node.js v20.10.0

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.