figma-hello-world
Create a minimal working Figma example. Use when starting a new Figma integration, testing your setup, or learning basic Figma API patterns. Trigger with phrases like "figma hello world", "figma example", "figma quick start", "simple figma code".
claude-code
Allowed Tools
ReadWriteEdit
Provided by Plugin
figma-pack
Claude Code skill pack for Figma (30 skills)
Installation
This skill is included in the figma-pack plugin:
/plugin install figma-pack@claude-code-plugins-plusClick to copy
Instructions
Figma Hello World
Overview
Minimal working example demonstrating core Figma functionality.
Prerequisites
- Completed
figma-install-authsetup - Valid API credentials configured
- Development environment ready
Instructions
Step 1: Create Entry File
Create a new file for your hello world example.
Step 2: Import and Initialize Client
import { FigmaClient } from '@figma/sdk';
const client = new FigmaClient({
apiKey: process.env.FIGMA_API_KEY,
});
Step 3: Make Your First API Call
async function main() {
// Your first API call here
}
main().catch(console.error);
Output
- Working code file with Figma client initialization
- Successful API response confirming connection
- Console output showing:
Success! Your Figma connection is working.
Error Handling
| Error | Cause | Solution |
|---|---|---|
| Import Error | SDK not installed | Verify with npm list or pip show |
| Auth Error | Invalid credentials | Check environment variable is set |
| Timeout | Network issues | Increase timeout or check connectivity |
| Rate Limit | Too many requests | Wait and retry with exponential backoff |
Examples
TypeScript Example
import { FigmaClient } from '@figma/sdk';
const client = new FigmaClient({
apiKey: process.env.FIGMA_API_KEY,
});
async function main() {
// Your first API call here
}
main().catch(console.error);
Python Example
from figma import FigmaClient
client = FigmaClient()
# Your first API call here
Resources
Next Steps
Proceed to figma-local-dev-loop for development workflow setup.