Skip to main content

🚀 Quick Setup Guide

Get Started in 5 Minutes​

1. Install Dependencies​

cd scripts
npm install

2. Get Figma Access Token​

  1. Go to Figma Settings
  2. Navigate to "Personal access tokens"
  3. Create a new token with read permissions
  4. Copy the token

3. Set Environment Variable​

export FIGMA_ACCESS_TOKEN="your_token_here"

4. Test the System​

npm run test

5. Capture Your Designs​

# Capture all portals
npm run figma:all

# Or capture specific portals
npm run figma:parents
npm run figma:providers

🎯 What You'll Get​

After running the capture script, you'll have:

  • 📸 Screenshots - High-resolution images of all screens
  • 📊 Metadata - Complete screen information and relationships
  • 📝 Documentation - Auto-generated Markdown documentation
  • 🖼 Thumbnails - Optimized images for documentation

📁 Output Location​

All files are saved to docs/design-system/:

  • screenshots/ - High-res screenshots by portal
  • thumbnails/ - Thumbnail images
  • metadata.json - Screen metadata
  • documentation.md - Generated documentation

🔧 Configuration​

Add New Portals​

Edit figma-capture.js and add your file keys:

files: {
  parents: 'YOUR_FIGMA_FILE_KEY',
  providers: 'YOUR_FIGMA_FILE_KEY',
  public: 'your_public_file_key',    // Add this
  mobile: 'your_mobile_file_key'     // Add this
}

Customize Output​

Edit the CONFIG object in figma-capture.js:

  • Image format and scale
  • Output directories
  • Thumbnail size

🆘 Troubleshooting​

Common Issues​

"FIGMA_ACCESS_TOKEN environment variable is required"

  • Set the token: export FIGMA_ACCESS_TOKEN="your_token"

"No file key configured for [portal] portal"

  • Add the file key to CONFIG.files in figma-capture.js

"Error fetching Figma file"

  • Check file permissions in Figma
  • Verify the file key is correct

📞 Need Help?​

🎉 You're all set! Run npm run figma:test to verify everything works, then npm run figma:all to capture your designs.