npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@primer/figma-action

v1.0.0-alpha.3

Published

GitHub action for exporting figma components.

Downloads

15

Readme

GitHub action for exporting Figma components

npm version

A GitHub action that will export Figma components from design files to your repository.

Usage

Example workflow

name: Export SVG from Figma
on: [push]
jobs:
  all:
    name: Figma Export
    runs-on: ubuntu-latest    
    steps:
      - uses: primer/[email protected]
        with:
          args: "format=svg outputDir=./build/"
        env:
          FIGMA_FILE_URL: "https://www.figma.com/file/ZFjrph2HUwFK8Q3uEtJIu1PT/yourfilename"
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}

Variables

Secrets

FIGMA_TOKEN (required)

This token is used to access the Figma API. It's required to generate one so this action will work. It's recommended to set the token in a secret token in your repository.

env variables

FIGMA_FILE_URL (required)

This is the file url that you would like to export from. The action will search the file for components and export them with your configurations.

Workflow args (optional)

  • format – The export format for exporting from Figma. Options are svg, jpg, png. Default is jpg
  • outputDir – Where you would like the exported files to live. Default is ./build/
  • scale – When choosing an image format jpg or png this is the export scale between 0.01 and 4 that will allow you to scale the image. Default is 1.

Output

The output of this action lives in ./build/ by default, but can be configured. In addition to the files exported you will see a data.json file exported. This contains information about the exported components mapped by component id.

The directory will look like this:

./outputDir/
  ├── format/
  |     └── componentName.format
  └── data.json

The data.json file will look like this:

{
  "0:639": {
    "name": "plus", // component name
    "id": "0:639", // component figma id
    "key": "89696b0b52493acc8692546ac829bd4e334c63a2", // component global figma id
    "file": "FP7lqd1V00LUaT5zvdklkkZr", // figma file key
    "description": "keywords: add, new, more", // figma component description
    "width": 12, // width of the component frame
    "height": 16, // height of the component frame
    "image": "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/1/6d/1234" // aws URL for the exported file
  }
}

License

MIT © GitHub