Figma

​

Introduction

​

Brief Overview of Figma

• Collaborative Design: Figma enables real-time collaboration, allowing multiple users to work on the same design file simultaneously, fostering teamwork and efficient design iterations.
• Vector Graphics and Prototyping: Provides powerful vector graphics editing tools and robust prototyping capabilities to create interactive and realistic design mockups.
• Web-Based Platform: As a web-based application, Figma is accessible from any modern web browser across different operating systems, facilitating seamless access and collaboration.
• Version History and Team Libraries: Maintains a comprehensive version history of design files and enables the creation of shared team libraries for reusable design components and styles, ensuring design consistency and efficient asset management.

​

Toolkit Account Setup and Configuration in Figma

​

Account Setup

1. Visit Figma Website: Open your web browser and navigate to the official Figma website: https://www.figma.com/.
2. Get Started for Free or Log In: Click on the “Get started for free” button to create a new account or use the “Log in” option if you have an existing Figma account.
3. Follow Registration Process: Follow the on-screen instructions to complete the registration process and create your Figma account. You can sign up using your email address or connect with your Google account.
4. Access Figma Home Page: Once your account is created and verified, you will be redirected to your Figma home page.

​

Token/API Key Generation: Creating a Figma Personal Access Token

1. Access Figma Settings: In Figma, click on your profile icon (typically your avatar or initials) located in the top left corner of the Figma interface and navigate to “Settings”. Note: Ensure you have the correct Figma account selected if you are logged into multiple Figma accounts.
2. Navigate to Security Tab: In the Settings menu, click on the “Security” tab.
3. Generate New Personal Access Token: Scroll down to the “Personal access tokens” section and click on the “Generate new token” button.
4. Configure Token Permissions (If Required): In the “New personal access token” window, enter a Token name to identify the token (e.g., “ELITEA Integration Token”).
   Note: While the documentation mentions selecting permissions for comment posting, the Figma Personal Access Tokens currently have broad access and specific permission scopes are not configurable during token creation through the UI. Ensure you understand the access granted by Personal Access Tokens. You can set an Expiration date for the token if desired for security best practices.
5. Create Token: Click the “Generate token” button to create the Personal Access Token.
6. Securely Copy and Store Your API Token: A dialog box will appear displaying your newly generated Personal Access Token. Immediately copy the generated API token. This is the only time you will see the full token value. Store it securely in a password manager or, preferably, ELITEA’s built-in Secrets feature for enhanced security within ELITEA. You will need this API token to configure the Figma toolkit in ELITEA.

​

System Integration with ELITEA

​

Step 1: Create Figma Credentials

1. Navigate to Credentials Menu: Open the sidebar and select Credentials.
2. Create New Credential: Click the + Create button.
3. Select Figma: Choose Figma as the credential type.
4. Configure Credential Details:
   • Display Name: Enter a descriptive name (e.g., “Figma - Design Team Access”)
   • Token: Enter your Figma Personal Access Token (starts with figd_)
5. Test Connection: Click the Test Connection button to verify your credentials are valid and can successfully connect to Figma’s API.
   • ✔️ Success: You’ll see a confirmation message indicating the connection was successful
   • ✘ Failure: Check that your token is correct, hasn’t expired, and has the necessary permissions
6. Save Credential: Once the test is successful, click Save to create the credential.

​

Step 2: Create Figma Toolkit

1. Navigate to Toolkits Menu: Open the sidebar and select Toolkits.
2. Create New Toolkit: Click the + Create button.
3. Select Figma: Choose Figma from the list of available toolkit types.
4. Configure Toolkit Details:
   • Name: Enter a descriptive name for your toolkit (e.g., “Design Asset Manager”)
   • Description: Provide a brief description (e.g., “Toolkit for accessing and managing Figma design files”)
5. Configure Credentials:
   • In the Configuration section, select your previously created Figma credential from the Credentials dropdown
6. Configure Advanced Options (Optional):
   • PgVector Configuration: Select a PgVector connection for vector database integration
   • Embedding Model: Select an embedding model for text processing and semantic search capabilities
   • Number of Threads: Set the number of worker threads (1-5) for downloading and processing Figma images (default: 5)
   • Global Limit: Set a character limit for API responses to ensure manageable content size
   • Global Regexp: Enter a Regular Expression to filter results from Figma API responses (leave blank for no filtering)
7. Enable Desired Tools: In the “Tools” section, select the checkboxes next to the specific Figma tools you want to enable. Enable only the tools your agents will actually use to follow the principle of least privilege
8. Save Toolkit: Click Save to create the toolkit.

​

Available Tools:

​

Step 3: Use Toolkit in Agents, Pipelines, or Chat

​

In Agents:

1. Navigate to Agents: Open the sidebar and select Agents.
2. Create or Edit Agent: Either create a new agent or select an existing agent to edit.
3. Add Figma Toolkit:
   • In the “TOOLKITS” section of the agent configuration, click the “+Toolkit” icon
   • Select your configured Figma toolkit from the dropdown list
   • The toolkit will be added to your agent with the previously configured tools enabled

​

In Pipelines:

1. Navigate to Pipelines: Open the sidebar and select Pipelines.
2. Create or Edit Pipeline: Either create a new pipeline or select an existing pipeline to edit.
3. Add Figma Toolkit:
   • In the “TOOLKITS” section of the pipeline configuration, click the “+Toolkit” icon
   • Select your configured Figma toolkit from the dropdown list
   • The toolkit will be added to your pipeline with the previously configured tools enabled

​

In Chat:

1. Navigate to Chat: Open the sidebar and select Chat or use the main chat interface.
2. Start New Conversation: Click +Create or open an existing conversation.
3. Add Toolkit to Conversation:
   • In the chat Participants section, look for the Toolkits element
   • Click the “Add Tools” icon to open the tools selection dropdown
   • Select your configured Figma toolkit from the dropdown list
   • The toolkit will be added to your conversation with all previously configured tools enabled
4. Use Toolkit in Chat: You can now directly interact with your Figma files by asking questions or requesting actions that will trigger the Figma toolkit tools.

​

Figma Key Parameters

​

How to Find Figma Project ID:

1. From Project URL (If You Are Project Admin) - Web & Desktop: When viewing a project in Figma (web or desktop app), the Project ID is in the URL:
   https://www.figma.com/files/project/[PROJECT_ID]/[PROJECT_NAME]
   
   For example, from https://www.figma.com/files/project/123456789/Design-System, the Project ID is 123456789. Desktop App: Use File → Copy link or Share to get the project URL with the same format.
2. Request from Project Administrator: If you don’t have admin access to the project, contact the project administrator or team owner to provide you with the Project ID.

​

How to Find Figma File Key:

https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]

1. From File Menu: Open the file in Figma desktop app, go to File → Copy link or File → Share
2. From Share Button: Click the Share button in the top-right corner, then Copy link
3. Extract from URL: The copied link will have the same format as the web version: https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]
4. From Recent Files: Right-click on a file in your recent files list and select Copy link

​

How to Find Node IDs:

1. Extract from URL: The copied URL contains the node ID: https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]
2. From Layers Panel: Select an element and use Copy as → Copy link

1. Right-click Method: Right-click on any design element and select Copy link
2. Layer Selection: Select a layer in the layers panel, right-click, and choose Copy link
3. Multiple Selection: Select multiple elements while holding Ctrl (Windows) or Cmd (Mac), then right-click and Copy link to get multiple node IDs
4. From Properties Panel: With an element selected, you can sometimes see the node ID in the properties panel or developer tools

​

How to Find Figma Team ID:

1. From Team URL: When viewing your team in Figma, the Team ID is in the URL:
   https://www.figma.com/files/team/[TEAM_ID]/[TEAM_NAME]
   
2. From Organization Settings: In your Figma organization settings, you can find the team ID in the team management section.

1. From Team Navigation: Navigate to your team view in the desktop app, then use File → Show in browser to open the web version with the team URL
2. From Share Team: In team view, use the Share feature to get a team link containing the Team ID
3. From Account Settings: Access your account settings in the desktop app and navigate to team management where Team IDs may be displayed

​

Real-World Usage Examples

1. Quick Design Analysis in Chat

Scenario: Quickly analyze a design file and get AI-powered insights during a chat conversation.Tools Used: analyze_file, get_file_commentsChat Interaction:

User: "Analyze the design file with key ABC123DEF456 and provide insights"

Agent: [Uses analyze_file tool to get comprehensive LLM-powered analysis]

Agent: "I've analyzed the design file. Here are the key insights:

📱 File Structure:
- 5 main pages covering onboarding, home, and checkout flows
- 23 unique screens identified
- Consistent use of design system components

🎯 User Flows Detected:
1. Onboarding → Account Creation → Profile Setup
2. Browse Products → Product Details → Add to Cart → Checkout
3. Search → Filter Results → Product Comparison

💡 Design Insights:
- Strong visual hierarchy with clear CTAs
- Consistent spacing and typography
- Mobile-first approach with responsive patterns

⚠️ Recommendations:
- Consider adding loading states for checkout flow
- Error handling screens need more detail
- Accessibility: increase contrast on secondary buttons"

---

User: “Get all comments from this file to see what feedback needs addressing”Agent: [Uses get_file_comments tool]Agent: “Found 12 comments:

• 5 resolved (design approved)
• 4 pending (awaiting developer input on feasibility)
• 3 open issues: color contrast, button sizing, missing states”

User: "Review the mobile app designs in file ABC123 and create handoff documentation"

Agent: [Uses analyze_file tool for comprehensive analysis]
Agent: "Design Review Complete! 

📱 App Structure:
- 18 screens across 4 main flows
- Login/Onboarding (4 screens)
- Home & Navigation (6 screens)
- Product Catalog (5 screens)
- Checkout Process (3 screens)

🎨 Design System Usage:
- Primary Button Component: 24 instances
- Input Field Component: 15 instances
- Navigation Card: 12 instances
- Consistent 8px grid system throughout

♿ Accessibility Notes:
- All buttons have minimum 44x44 touch targets ✓
- Color contrast ratios meet WCAG AA standards ✓
- Action: Review contrast on secondary CTAs (borderline)

Created full handoff documentation ready for development."

User: "Audit all files in project 123456 for design system compliance"

Agent: [Uses get_project_files then analyze_file for each file]
Agent: "Design System Audit Results:

📊 Component Usage:
- Button/Primary: 156 instances across 12 files ✓
- Button/Secondary: 89 instances across 10 files ✓
- Input/Text: 45 instances across 8 files ✓

⚠️ Inconsistencies Found:
- File 'Checkout-v2.fig': Using custom button (not from library)
- File 'Settings.fig': Mix of old and new input components
- File 'Onboarding.fig': Custom navigation pattern (not standardized)

💡 Recommendations:
1. Update Checkout-v2 to use standard Button/Primary component
2. Migrate Settings to new input component set
3. Consider standardizing navigation pattern from Onboarding"

User: "Analyze user flows in the e-commerce app design (file XYZ789)"

Agent: [Uses analyze_file tool with LLM-powered flow analysis]
Agent: "UX Flow Analysis Complete:

🛤️ Primary User Journeys Identified:

1. **First-Time User Journey**
   Splash → Sign Up → Profile Setup → Home → Tutorial → Browse
   - Strengths: Clear onboarding, guided tutorial
   - Gaps: No skip option for tutorial

2. **Purchase Flow**
   Browse → Product Detail → Add to Cart → Cart Review → Checkout → Payment → Confirmation
   - Strengths: Linear flow, clear CTAs
   - Gaps: Missing 'Continue Shopping' from cart
   - Missing: Save for later option

3. **Search & Discovery**
   Search → Results → Filters → Product → Compare → Decision
   - Strengths: Advanced filtering
   - Gaps: No recent searches, no search suggestions

⚠️ UX Concerns:
- Back navigation unclear in checkout flow
- No loading states for product images
- Error messages lack actionable guidance

💡 Recommended Improvements:
1. Add exit points in tutorial flow
2. Include 'Save for Later' in cart
3. Add breadcrumb navigation in checkout
4. Design comprehensive error state library"

User: "Check the designs in file ABC123 for WCAG AA compliance"

Agent: [Uses analyze_file tool to analyze accessibility]
Agent: "Accessibility Audit Results:

✔️ Passing:
- Touch targets: All interactive elements ≥ 44x44px
- Text sizing: Body text ≥ 16px throughout
- Heading hierarchy: Logical H1-H4 structure

⚠️ Issues Found:

1. Color Contrast - 8 instances
   - Secondary button text: 3.2:1 (needs 4.5:1)
   - Placeholder text: 2.8:1 (needs 4.5:1)
   - Disabled state labels: 3.0:1 (needs 4.5:1)

2. Focus Indicators - 5 screens missing
   - Form inputs lack visible focus state
   - Navigation items need focus indicators

3. Alt Text Requirements
   - 12 decorative images need alt=''
   - 6 informative images need descriptive alt text

[Posts comments to Figma file highlighting specific issues]

Created detailed remediation checklist with 23 action items."

User: "Compare the last two versions of file DEF456 and summarize changes"

Agent: [Uses get_file_versions and analyze_file]
Agent: "Version Comparison Summary:

📅 Version History:
- Current: v2.3 (Jan 9, 2026)
- Previous: v2.2 (Jan 5, 2026)

🔄 Key Changes:

1. Home Screen Redesign
   - New hero section layout
   - Updated CTA button placement
   - Added promotional banner slot

2. Navigation Updates
   - Bottom nav icons redesigned
   - Added 5th nav item (Profile)
   - Updated active state styling

3. Component Updates
   - Button corner radius: 8px → 12px
   - Card shadows: Updated depth/elevation
   - Typography: Headlines increased 2px

4. New Screens Added
   - User Profile (new)
   - Settings > Notifications (new)
   - Empty States library (new)

💬 Related Comments:
- 4 comments resolved between versions
- 2 new comments on current version (navigation feedback)

Overall Direction: Moving toward rounder, friendlier aesthetic"

User: "Index all design files from project 789012 so I can search through them"

Agent: [Uses index_data tool to create searchable index]
Agent: "Indexing Complete! 

📊 Indexing Summary:
- Files indexed: 15
- Total screens: 87
- Components indexed: 234
- Text content indexed: ~12,500 words
- Collection name: 'project_789012_designs'

Your designs are now searchable. You can search for components, patterns, text, or design elements across all indexed files."

---

User: "Search for all login screens and authentication flows"

Agent: [Uses search_index tool]
Agent: "Search Results for 'login screens and authentication flows':

🔍 Found 8 relevant screens:

1. **Mobile App - Login Screen** (File: MobileApp-v3.fig)
   - Email/password login form
   - Social login options (Google, Apple)
   - "Forgot password" link
   - Relevance: 95%

2. **Web Portal - Sign In** (File: WebPortal.fig)
   - Username/password fields
   - Remember me checkbox
   - Two-factor authentication option
   - Relevance: 92%

3. **Onboarding Flow - Authentication** (File: Onboarding-Complete.fig)
   - Multi-step auth process
   - Phone verification screen
   - Biometric setup option
   - Relevance: 88%

4. **Settings - Security** (File: Settings-Screens.fig)
   - Change password interface
   - Session management
   - Relevance: 72%

💡 Patterns Detected:
- All screens use consistent button styling
- 6/8 screens include social login options
- Error states present in 5/8 screens"

---

User: "Show me all collections available"

Agent: [Uses list_collections tool]
Agent: "Available Design Collections:

📚 Collections List:
1. project_789012_designs (15 files, indexed today)
2. design_system_library (8 files, indexed Jan 10)
3. marketing_assets (12 files, indexed Jan 8)

You can search any of these collections or create new ones by indexing additional projects."

You are a design review assistant that analyzes Figma files and provides comprehensive feedback.

When reviewing a design file:
1. Use analyze_file to get overall file structure and insights
2. Identify screen structure and user flows
3. Analyze component inventory and design patterns
4. Check accessibility considerations
5. Review outstanding comments using get_file_comments
6. Post summary feedback using post_file_comment

Always provide:
- File structure overview
- Design system usage analysis
- Accessibility notes
- UX improvement recommendations
- Summary of pending feedback and comments

Format your responses with clear sections and emoji indicators for better readability.

User triggers agent with: "Review file ABC123DEF456"

Agent automatically:
1. Analyzes the complete file structure
2. Generates design review documentation
3. Posts summary comment to Figma file
4. Returns comprehensive report to user

​

Troubleshooting and Support

​

Troubleshooting

​

FAQ

​

Support Contact