Update readme

jacobtyq · Jul 15, 2020 · c0b19a3 · c0b19a3
1 parent 4fbd5e9
commit c0b19a3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,31 @@
-# Export SVGs from Figma
+# Export SVGs from Figma via CLI
+
+## Getting Started
+
+Export your SVGs that are in your Figma project easily via CLI.
+![Gif of exporting process](documentation/export-in-action.gif)
+
+# Pre-requisties
+
+- You will need a DEV_TOKEN (See Step 5 of Setup)
+- Your Icons are in a single Frame
+- Each icon is a Figma Component (Select Icon and use the shortcut key ⌥⌘K)
+  ![Screenshot of Icon as a Figma Component](documentation/this-is-a-component.png)
+
+### Output
+
+Your SVGs will be generated in `src/svg` folder
+
+### Setup
+
+1. `yarn install`
+2. Select the frame your icons are in ![Screenshot of a sample Figma project](documentation/export-svg-screenshot.png)
+3. Copy the URL in the browser; it should look similar to [https://www.figma.com/file/abcASewbASmnas/Test?node-id=1%3123](https://www.figma.com/file/abcASewbASmnas/Test?node-id=1%3123)
+4. Run `node src/setupEnv.js` and paste in your URL copied from step 2 when prompted. This will generate a `.env` file
+5. Generate a DEV_TOKEN a.k.a Personal Access Token by going to Help and Account > Account Settings > Personal Access Token
+6. Add your DEV_TOKEN from step 5 into `.env` file
+7. Run `node src/index.js` and your SVGs will be generated into `src/svg` folder
+
+### Limitations
+
+Figma API has a fixed number of requests (rate limits) you can call per minute. This script will process a 20 requests per 45 seconds to not hit that limit.
diff --git a/documentation/export-in-action.gif b/documentation/export-in-action.gif
diff --git a/documentation/export-svg-screenshot.png b/documentation/export-svg-screenshot.png
diff --git a/documentation/this-is-a-component.png b/documentation/this-is-a-component.png