search

mikaelvesavuori / figmagic

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
https://docs.figmagic.com
MIT License
807 stars 71 forks source link

Unable to run figmagic to generate raw Figma JSON data - error: msising "figmaToken" and "figmaUrl" #159

Closed tomevans00 closed 2 years ago

tomevans00 commented 2 years ago

Hello,

Me and my team work for a big enterprise and would love to use Figmagic in our design system. However, we're unable to successfully run figmagic

Describe the bug Figmagic does not recognize token and url no matter how it is passed. Always giving this error when running figmagic to generate JSON dump: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

To Reproduce Steps to reproduce the behavior, as per the documentation: https://github.com/mikaelvesavuori/figmagic#using-figmagic

  1. create empty directory, navigate to inside new directory from command line
  2. run figmagic init from command line to create figmagic.json file
  3. create .env file in directory, add FIGMA_URL and FIGMA_TOKEN vars
  4. run npx figmagic
  5. receive error Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!
  6. repeat with adding token and url to command line, same result
  7. repeat with adding token and url to figmagic.json, same result

Expected behavior Expected to generate a folder of the raw Figma JSON dump

Desktop (please complete the following information):

Additional context

mikaelvesavuori commented 2 years ago

Hey @tomevans00!

Sounds weird. This is most likely some formatting or encoding issue. Please verify your Figmagic version; it should be 4.4.5.

I just tested successfully using the below:

# Check Node version; should be recent (starting with 15-16 should work)
node -v

# Create directory, install, create .env file
mkdir figmagic-demo
cd figmagic-demo/
npm install figmagic -D
npx figmagic init 
touch .env

# Add values; "URL" (document ID) used is for the template
echo "FIGMA_TOKEN=your-token-here" >> .env
echo "FIGMA_URL=K39TRbltDVcWFlpzw9r7Zh" >> .env

# Run
npx figmagic
mikaelvesavuori commented 2 years ago

Quick update. As expected, .env files will be very strict in their formatting if they are to work as intended. For example, this will break:

FIGMA_TOKEN="your-token-here"
FIGMA_URL="K39TRbltDVcWFlpzw9r7Zh"

Same with this, which will also break:

FIGMA_TOKEN = "your-token-here"
FIGMA_URL = K39TRbltDVcWFlpzw9r7Zh

As in the last comment, the correct approach looks like:

FIGMA_TOKEN=your-token-here
FIGMA_URL=K39TRbltDVcWFlpzw9r7Zh
tomevans00 commented 2 years ago

Hey Mikael, following these instructions seemed to do the trick! I guess it was some formatting issue on my end. Thank you for your help!