Giter Club home page Giter Club logo

figma-plugin-run-github-actions-workflows's Introduction

Figma Plugin - Run GitHub Actions workflows

Run GitHub Actions workflows directly within Figma, using the selected page and nodes as inputs.

Demo

Usage

Begin by creating a GitHub Actions workflow.

Configure your workflow to run on workflow_dispatch event:

on: 
  workflow_dispatch:
    inputs:
      fileKey:
        description: Figma file key
        type: string
        required: true
      page:
        description: Stringified selected page (id, name)
        type: string
        default: '{}'
        required: true
      selection:
        description: Stringified array of the selected nodes (id, name)
        type: string
        default: '[]'
        required: true

As previously mentioned, the plugin triggers the workflow sending the fileKey, the selected page, and the list of selected nodes as selection.

You can then configure the workflow according to your needs. To get started, you can use this example from-figma.yaml.

Tip

You can manipulate the received inputs as needed. Refer to this working example.

Figma

Setting up in Figma is simple. Just run this plugin.

Enter the fileKey:

Plugin homepage

and setup a new workflow by clicking the + button (you'll also need a GitHub access token):

Plugin add workflow

Finally, select a page and one or more nodes, and then click โ–ถ. This will run the selected workflow, passing your selection as workflow inputs.

Triggered GitHub Actions workflow

Figma Export PDFs

What do you think about exporting Figma content as PDF document to an FTP Server, just by clicking a button within Figma? Would it be cool, isn't it?

Check out this workflow and discover how it's entirely feasible. Simply clone the workflow and setup this Figma plugin ๐Ÿ˜‰.

figma-plugin-run-github-actions-workflows's People

Contributors

marcomontalbano avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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.