initial commit

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+on: 
+  workflow_dispatch:
+    inputs:
+      figma_file: 
+        description: 'Figma file URL'
+        required: true
+      style_dictionary_url:
+        description: 'Style dictionary URL'
+        required: true
+
+jobs:
+  first_test_job:
+    runs-on: ubuntu-latest
+    name: 'Figma Tokens'
+    env: 
+      FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Figma Tokens
+        uses: ./
+        id: 'figma_tokens'
+        with:
+          figma_file: ${{ github.event.inputs.figma_file }}
+          style_dictionary_url: ${{ github.event.inputs.style_dictionary_url }}
+          figma_token: ${{ secrets.FIGMA_TOKEN }}
+      - name: Archive Figma Tokens Payload
+        uses: actions/upload-artifact@v2
+        with:
+          name: figma-tokens
+          path: build/

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+# node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+# dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -0,0 +1,27 @@
+# Figma Tokens javascript action
+
+This action creates tokens in a Figma file from a JSON style-dictionary file.
+
+## Inputs
+
+### `figma_file`
+
+**Required** The Figma file ID where the tokens will be created.
+
+### `figma_token`
+
+**Required** The Figma API token.
+
+### `style_dictionary`
+
+**Required** The path to the JSON style-dictionary file.
+
+## Example usage
+
+```yaml
+uses: brianferry/figma-tokens@v1
+with:
+  figma_file: 'your-figma-file-id'
+  figma_token: ${{ secrets.FIGMA_TOKEN }}
+  style_dictionary: 'path/to/style-dictionary.json'
+```

action.yml

@@ -0,0 +1,22 @@
+name: 'Figma Tokens'
+description: 'Create Figma tokens from style dictionary'
+inputs:
+  figma_file: 
+    description: 'Figma file id'
+    required: true
+  figma_token: 
+    description: 'Figma token'
+    required: true
+  style_dictionary_url: 
+    description: 'Style dictionary url'
+    required: true
+  collections: 
+    description: 'Collections'
+    required: false
+    default: '{"semantic": {"name": "Semantic Colors", "modeId": "semantic-light", "secondaryModeId": "semantic-dark"}, "default": {"name": "General", "modeId": "default"}}'
+outputs:
+  figma_tokens:
+    description: 'Figma tokens'
+runs:
+  using: 'node20'
+  main: 'index.js'

index.js

@@ -0,0 +1,32 @@
+const core = require('@actions/core');
+const github = require('@actions/github');
+const { figmaConvertToPayload, sendPayloadToFigma, writeOutputToFile } = require('./scripts/figma.cjs');
+
+async function main() {
+    // 'figma_file' input defined in action.yml
+    const figmaFile = core.getInput('figma_file');
+    // 'figma_token' input defined in action.yml
+    const figmaToken = core.getInput('figma_token');
+    // 'collections' input defined in action.yml
+    const collections = JSON.parse(core.getInput('collections'));
+    // 'style_dictionary_url' input defined in action.yml
+    const styleDictionaryUrl = core.getInput('style_dictionary_url');
+    // Get the JSON data from the remote style dictionary url
+    const styleDictionaryData = await fetch(styleDictionaryUrl).then(response => response.json());
+
+    const payload = await figmaConvertToPayload(collections, styleDictionaryData);
+
+    await writeOutputToFile(payload);
+
+    if (figmaFile && figmaToken) {
+        const result = await sendPayloadToFigma(payload, figmaToken, figmaFile);
+        console.log(result);
+        return result;
+    }
+}
+
+try {
+  main();
+} catch (error) {
+    core.setFailed(error.message);
+}