Figma connector tools

  • Updated

The Figma connector tools in Optimizely Opal link Figma's design ecosystem to Opal. It lets you access Figma's design data, facilitates collaboration workflows, and automates the handoff process between designers and developers. After you install and configure the Figma tools in Optimizely Connect Platform (OCP), the tools become available in Opal Chat, agents, and workflows.

Complete the following steps to enable the Figma tools.

Add the Figma Opal tools in OCP

Add the Figma Opal Tool in OCP

In the OCP App Directory, complete the following:

  1. Click on Figma Opal Tool.

  2. Click Install App.

Generate a Figma API key

Go to figma.com and log in. After you have authenticated, complete the following steps to create a new API key:

  1. Click your profile icon, then select Settings.
  2. Click on the Security tab and locate the Personal access tokens section.
  3. Click Generate new token.
  4. Enter a Token name, select a date from the Expiration drop-down list, and select the Scopes. 
  5. Click Generate token.  
  6. Copy the generated API key and store it securely. You use this key in the next section.

For more information, see Personal access tokens section in Figma's Authentication documentation. 

Authenticate the Figma connector tool in OCP

After you generate your Figma API key, authenticate the connector in OCP.

  1. Click the Figma Opal Tool in the OCP App Directory.
  2. Go to the Settings tab.
  3. Enter your Figma API key from the previous section in the Figma Authentication section.
  4. Click Save.

Register the Figma connector tool in OCP

After you authenticate the Figma connector tool in Opal, complete the following steps in OCP:

  1. Go to Settings > Add to Opal.

  2. Click Add to Opal for each Opal instance you want to add the Figma connector tools.

    Add to opal

Figma connector tools

After you add and register the Figma connector tool, you can call the following tools in Opal. Click on a tool's name to expand it and learn more about when to use the tool, required and optional parameters, and example prompts on how to call the tool. If you do not provide a required parameter, Opal prompts you for it.

figma_create_webhook – Creates a new webhook subscription to receive real-time events from Figma.
  • When to use
    • To receive real-time notifications about updates to Figma files, such as content changes or new versions.
    • When you need to track collaboration events like comments being added or modified in a Figma file.
    • To automate workflows that trigger upon specific Figma events, like publishing a library.
    • For integrating Figma activity with other systems, such as project management tools or custom dashboards.
    • To monitor design system changes and ensure consistency across projects.
  • Parameters
    • event_type – The type of event you want to subscribe to.
      • FILE_UPDATE – Notifies when the file content changes.
      • FILE_VERSION_UPDATE – Notifies when a new version of the file is saved.
      • FILE_COMMENT – Notifies when a comment is added or modified.
      • LIBRARY_PUBLISH – Notifies when a library is published.
    • endpoint – Your HTTP endpoint URL where Figma sends POST requests when the specified events occur. This URL must be publicly accessible and use HTTPS.
    • team_id – The ID of the Figma team you want to receive events from. You can find this in your Figma team's URL.
    • (Optional) description – A brief description to help you remember the purpose of this webhook.
    • passcode – An optional passcode that will be included in the webhook payload for verification, adding a layer of security.
  • Example prompts
    • Create a webhook to notify my server at https://my-server.com/figma-updates whenever a file is updated in team 12345.
    • I want to set up a webhook that sends notifications to https://my-app.com/comments for new comments in Figma team 67890. Can you add a description saying "Figma comment notifications"?
    • Please create a webhook for library publish events for team 112233 to https://design-system-monitor.org/webhooks with a passcode of secure123.
    • Set up a webhook for team 98765 to https://dev-handoff.io/figma that triggers on file version updates.
    • I need a webhook to track all file updates in my design team 54321 and send them to https://my-analytics.com/figma-data.
figma_get_comments – Gets all comments for a specific Figma file, including replies, reactions, and metadata.
  • When to use
    • When you need to see all the feedback, discussions, and design review conversations associated with a specific Figma file.
    • To extract all comments for a file, which can then be used to create reports or summaries of design feedback for stakeholders.
    • To understand the history of communication and collaboration on a design, including who said what and when.
    • If you want to integrate Figma comments into your own notification system, perhaps to alert specific team members about new feedback.
    • To look back at why certain design choices were made by reviewing the discussions in the comments.
  • Parameters
    • file_key – The unique identifier of the Figma file you want to retrieve comments from. This key can be found in the Figma file's URL For example, in https://www.figma.com/file/ABC123xyz789/File-Name, ABC123xyz789 is the file key. 
  • Example prompts
    • Get all comments for Figma file ABC123xyz789.
    • Show me the comments on the design file with key XYZ987abc654.
    • Retrieve all feedback from file 1234567890.
    • What are the discussions happening in Figma file figma_file_key_here?
    • Can you list all comments for my Figma file my_design_file_key?
figma_get_component – Gets detailed information about a specific published component in Figma by its unique key.
  • When to use
    • When you need to retrieve specific information about a single published Figma component, such as its name, description, or when it was last updated.
    • To programmatically fetch details for individual components to populate a design system documentation site or a component library.
    • To check the creation or last modification date of a specific component, which can be useful for tracking changes within your design system.
    • Before using a component in a new design or development, you might use this tool to confirm its existence and retrieve its properties.
    • To get specific component metadata that can be used to generate code snippets or ensure consistency between design and code.
  • Parameters
    • key –  The unique identifier (key) of the component you want to retrieve. This key is typically found when listing file components or can be discovered within the Figma UI.
  • Example prompts
    • Get details for Figma component 5e9c9d4fb1e009ac25eca858f96a109520c00d76.
    • Show me the information for the published component with key component_key_example.
    • Retrieve the metadata for Figma component another_component_key.
    • What are the details of the component xyz123abc456?
    • Can you provide information about component my_button_component_key?
figma_get_demo_instructions – Returns comprehensive step-by-step instructions for demonstrating the Figma tool's capabilities.
  • When to use
    • When you want to show a new team member or client the full range of capabilities of the Figma tool within Optimizely, providing a structured, guided tour.
    • To get a ready-made, step-by-step script for conducting a training session on how to leverage Optimizely's Figma integration for design analysis and asset generation.
    • If you are unsure how to best utilize the various Figma tools for a multi-step task, these instructions can provide a comprehensive example workflow.
    • To see a practical example of how different Figma API calls can be orchestrated to achieve a larger goal, serving as a reference for building your own custom integrations.
  • Parameters
    • (Optional) url – A Figma share URL to include in the demo instructions. If you provide this, the instructions uses this specific file. If you do not provide it, the instructions prompt the user to supply a Figma URL interactively during the demo.
  • Example prompts
    • Give me the step-by-step demo instructions for the Figma tool.
    • How can I demonstrate the Figma integration capabilities?
    • Provide a guide for using the Figma tools, starting with this design file: https://www.figma.com/design/PohuceHz2EoQoR6KYy2DIK/Page_Basic?node-id=1-82.
    • I need a walkthrough of the Figma features in Optimizely.
    • Can you give me the full demo instructions for the Figma tool, without a specific URL for now?
figma_get_file – Retrieves the complete structure of a Figma file including all nodes, pages, and metadata.
  • When to use
    • When you need to retrieve the entire structure of a Figma file, including all pages, frames, components, and their properties, for a deep analysis of the design.
    • To extract all necessary design data to generate HTML or CSS code or other front-end assets from a Figma design.
    • To get a complete overview of all elements within a design system file, allowing for detailed audits of styles, components, and their usage.
    • To pull the full file structure for generating detailed documentation of a design project, including all its elements and their relationships.
  • Parameters
    • file_key – The unique identifier of the Figma file you want to retrieve. This key is typically found in the Figma file's URL For example, in the URL: https://www.figma.com/file/ABC123xyz789/File-Name, ABC123xyz789 is the file key.
    • (Optional) ids – A comma-separated list of specific node IDs within the file to filter the results. If provided, only these nodes and their children are returned.
    • (Optional) depth – The depth of the node tree to traverse. This controls how many levels of child nodes are included in the response. A lower depth means a faster response and less data.
    • (Optional) version – The ID of a specific historical version of the file to retrieve. This lets you get the file as it existed at a particular point in time.
  • Example prompts
    • Get the complete structure of Figma file aBc123dEf456gHi789jKl012mNo345pQr678sTu901.
    • Retrieve all design elements from the Figma file with key my_project_file_key.
    • Show me the full details of Figma file design_system_file_key, but only for nodes 1:2 and 1:3.
    • I need the entire content of Figma file another_file_key, but only go 2 levels deep into the node tree.
    • Can you fetch the structure of Figma file old_version_file_key as it was in version 1234567890?
figma_get_file_components – Gets all published components in a specific Figma file.
  • When to use
    • To see what reusable design elements are available in a specific design system or file.
    • To extract metadata about components for creating external documentation or libraries.
    • To monitor changes or understand how components are being used across projects.
    • To pull component information that might be linked to design tokens.
    • To programmatically check for consistency or adherence to design standards.
  • Parameters
    • file_key – The unique identifier (key) of the Figma file to get components from.
  • Example prompts
    • List all the published components in the Figma file with key ABC123xyz789.
    • Can you show me the components available in the 'Website Redesign' Figma file? My team ID is 987654321.
    • What components are being used in this Figma file: https://www.figma.com/file/DEF456uvw012/My-Design-System?
    • I need to see all the published components from the file Product_Dashboard_V2. My team ID is 112233445.
figma_get_file_styles – Retrieves all published styles from a Figma file.
  • When to use
    • To extract color palettes, typography scales, and other design tokens directly from Figma for use in development.
    • To automatically generate or update style guides and documentation based on the actual styles defined in Figma.
    • To map Figma styles to corresponding CSS variables or design tokens in a codebase, ensuring consistency between design and development.
    • To audit a Figma file for adherence to a design system by reviewing its published styles.
    • To programmatically export style definitions for various purposes, such as creating custom plugins or integrations.
  • Parameters
    • file_key – The unique identifier (key) of the Figma file to get styles from.
  • Example prompts
    • Get all the published styles from the Figma file with key ABC123xyz789.
    • Can you list the styles defined in the 'Brand Guidelines' Figma file?
    • What are the color, text, and effect styles in this Figma file: https://www.figma.com/file/DEF456uvw012/My-Style-Guide?
    • I need to see all the published styles from the file Marketing_Website_Styles. My team ID is 112233445.
    • Show me the design tokens available in the Figma file Global_Design_System.
figma_get_frame_images – Get rendered image URLs for all frames in a Figma file using batched processing.
  • When to use
    • To generate images of all design frames for a comprehensive visual review or approval process.
    • To create a gallery of design variations or screens for documentation or presentation purposes.
    • To export all frames as image assets for use in documentation, marketing materials, or development.
    • To efficiently generate images from many frames in large Figma files without manual export.
    • To visually check how frames are rendered by Figma's image API.
  • Parameters
    • shareLink – The Figma share link URL for the file containing frames to render as images.
    • (Optional) format – Image format for rendering. Defaults to png. Options: jpg, png, svg, or pdf.
    • (Optional) scale – Scale factor for image rendering (0.01 to 4.0). Defaults to 1.0.
    • (Optional) batchSize – Number of frames to process in each batch. Defaults to five.
  • Example prompts
    • Generate images for all frames in this Figma share link: https://www.figma.com/file/ABC123/My-Design-File.
    • I need high-resolution JPG images of all frames from the 'Website Mockups' Figma file. The share link is https://www.figma.com/file/DEF456/Website-Mockups.
    • Can you provide SVG images of all frames from the prototype link https://www.figma.com/proto/GHI789/Prototype-Flow?
    • Export all frames from https://www.figma.com/file/JKL012/Mobile-App-Screens as PNGs with a scale of 2.0."
    • Get me images of all frames from the Figma file shared at https://www.figma.com/file/MNO345/Marketing-Assets.
figma_get_frames_from_share_link – Extracts a structured list of pages and frames from a Figma share link using memory-efficient discovery.
  • When to use
    • To get an overview of available frames and pages in a large Figma file before making more intensive API calls (like image generation), which can be slow or memory-intensive.
    • To quickly grasp the organization of a complex Figma file, including its pages and the frames within them.
    • To let users browse and select specific frames by name or ID for subsequent operations.
    • To create an inventory of design screens or sections for content planning, documentation, or design-to-code workflows.
    • To verify if a specific frame or page exists in a shared link.
  • Parameters
    • share_link – The Figma share link URL to extract frames from.
  • Example prompts
    • Show me all the pages and frames in this Figma share link: https://www.figma.com/proto/ABC123DEF456/My-Prototype?node-id=1%3A123.
    • What's the structure of the Figma file at https://www.figma.com/design/GHI789JKL012/Project-X-UI? I want to see its pages and frames.
    • Can you list all the frames available in the design file shared via https://www.figma.com/file/MNO345PQR678/Marketing-Site?
    • I need an overview of the frames in this Figma link: https://www.figma.com/file/STU901VWX234/Mobile-App-Flows.
    • Before I export images, can you tell me what frames are in https://www.figma.com/design/YZA567BCD890/Web-Design?
figma_get_image – Renders specific nodes from a Figma file as images in various formats (PNG, JPG, SVG, PDF).
  • When to use
    • To provide developers with specific image assets (for instance, icons, illustrations, or UI elements) directly from Figma.
    • To generate images of individual components or screens for inclusion in design system documentation.
    • To create visual previews of specific design elements for galleries, reports, or internal tools.
    • To export images of key UI components for automated testing against future design changes.
    • To integrate Figma's rendering capabilities into custom workflows or applications.
  • Parameters
    • file_key – The unique identifier of the Figma file containing the nodes to render.
    • ids – A comma-separated list of node IDs to render as images.
    • (Optional) format – The image output format for rendering. Options: "png", "jpg", "svg", "pdf". Defaults to "png".
    • (Optional) scale – Scale factor for rasterized image outputs (PNG, JPG). Must be a number between 0.01 and 4.0. Defaults to 1.0.
    • (Optional) contents_only – Whether to return only the rendered image content without additional metadata.
    • (Optional) svg_include_id – Whether to include node IDs as attributes in SVG output (only applicable when format is "svg").
    • (Optional) svg_simplify_stroke – Whether to simplify stroke rendering in SVG output (only applicable when format is "svg").
    • (Optional) use_absolute_bounds – Whether to use absolute bounds for node positioning in the rendered output.
  • Example prompts
    • Render the Figma node 1:2 from file ABC123xyz789 as a PNG image.
    • Can you get me a JPG image of nodes 1:5,1:6 from the file DEF456uvw012 at 2x scale?
    • Export the icon with node ID 123:456 from the file GHI789jkl012 as an SVG.
    • I need a PDF image of the frame 789:012 from the Figma file MNO345pqr678.
    • Please generate a PNG image of node 1:10 from file STU901vwx234.
figma_get_local_variables – Retrieves local variables (design tokens) from a Figma file.
  • When to use
    • To extract design token values (colors, spacing, typography, and so on) directly from Figma and integrate them into a development workflow.
    • To automatically create or update documentation for a design system's local variables.
    • To inspect and understand the specific design tokens defined within a Figma file.
    • To retrieve values for different modes (for example, light or dark themes) defined within variable collections.
    • To programmatically access design token values for various automation tasks.
  • Parameters
    • file_key – The file key of the Figma file to get variables from.
  • Example prompts
    • Get all the local variables from the Figma file with key ABC123xyz789.
    • Can you list the design tokens defined in the 'Product UI Kit' Figma file?
    • I need to see all the local variables from the file Brand_Colors_and_Typography. My team ID is 112233445.
    • Show me the design tokens (local variables) available in the Figma file Global_Theme_Variables.
figma_get_published_variables – Retrieves published variables (design tokens) from a Figma library file.
  • When to use
    • To extract design token values from a published Figma library for use in a development environment, ensuring consistency across projects.
    • To understand and integrate the shared variables from a central design system library into other design files or development processes.
    • To retrieve theme-specific variables that are published as part of a design system library.
    • To automatically create or update documentation for the published variables within a design system library.
    • To review and verify the values of design tokens that are made available to other teams or projects through a Figma library.
  • Parameters
    • file_key – The file key of the Figma library file to get published variables from.
  • Example prompts
    • Get all the published variables from the Figma library file with key ABC123xyz789.
    • Can you list the published design tokens from the 'Optimizely Design System' Figma library?
    • What are the published variables in this Figma library file: https://www.figma.com/file/DEF456uvw012/Shared-Tokens?
    • I need to see all the published variables from the library Global_Brand_Tokens. My team ID is 112233445.
    • Show me the design tokens (published variables) available in the Figma library Core_UI_Variables.
figma_get_style – Retrieves a specific published style by its key.
  • When to use
    • To get granular details about a particular style, such as its exact color values, font properties, or effect parameters.
    • To extract the precise properties of a style for direct translation into code (for example, CSS or design tokens).
    • To confirm that a specific style has the correct attributes as defined in the design system.
    • When you know the key of a particular design token (which corresponds to a Figma style) and need its value.
    • To retrieve the exact definition of a style that might be causing inconsistencies in a design.
  • Parameters
    • key – The unique key of the style to retrieve.
  • Example prompts
    • Get the details for the Figma style with key S:abc123xyz789.
    • Can you show me the properties of the 'Primary Button' text style? Its key is S:def456uvw012.
    • What are the specifications for the color style with key S:ghi789jkl012?
    • Retrieve the information for the effect style identified by S:mno345pqr678.
    • I need the details of the grid style with key S:stu901vwx234.
figma_list_files – Lists all files in a specific Figma project.
  • When to use
    • To get an overview of all design files contained within a particular Figma project.
    • To retrieve the unique file_key for each file, which is necessary for subsequent API calls to get file details, components, styles, or images.
    • To track file activity, such as new files created or last modified dates within a project.
    • To create tools or workflows that need to interact with multiple files across a Figma project.
    • To get a list of all design assets within a project for inventory or compliance checks.
  • Parameters
    • project_id – The ID of the Figma project to list files from.
  • Example prompts
    • List all the files in the Figma project with ID 12345678.
    • Can you show me all the design files in the 'Website Redesign' project?
    • I need a list of all files in the 'Mobile App Development' project.
figma_list_team_projects – Lists all projects in a specific Figma team.
  • When to use
    • To get an overview of all design projects managed by a specific Figma team.
    • To retrieve the unique project_id for each project, which is necessary for subsequent API calls, such as listing files within a project.
    • To understand how design work is organized and distributed across different projects within a team.
    • To create tools or workflows that need to interact with multiple projects across a Figma team.
    • To get a comprehensive list of all design projects for inventory or compliance checks.
  • Parameters
    • team_id – The ID of the Figma team to list projects from.
  • Example prompts
    • List all projects in the Figma team with ID 987654321.
    • Can you show me all the design projects in the 'Product Design' team?
    • What are the projects in the team whose ID is 112233445?
figma_list_webhooks – Lists all active webhooks for a team.
  • When to use
    • To view and manage all active webhooks for a team, ensuring that only necessary integrations are running.
    • To check which external systems are currently receiving event notifications from Figma, which is useful for security and compliance.
    • To confirm that webhooks are correctly set up with the right endpoints and event types.
    • To quickly identify if a webhook exists and its status when investigating why an integration is not receiving events.
    • To obtain the id of a webhook for subsequent operations like updating or deleting it.
  • Parameters
    • team_id – The ID of the Figma team to list webhooks for.
  • Example prompts
    • List all active webhooks for the Figma team with ID 123456789.
    • Can you show me all the webhooks configured for the 'Design Operations' team?
    • What webhooks are currently set up for the team whose ID is 987654321?
    • I need to see all the webhook subscriptions for the 'Product Team'.
figma_post_comment – Posts a new comment to a Figma file.
  • When to use
    • To give specific feedback on design elements, layouts, or overall user experience directly within the Figma file.
    • To inquire about design decisions, clarify requirements, or seek input from team members on particular parts of a design.
    • To record design rationale, changes, or agreements directly on the canvas for future reference.
    • To streamline the review process by centralizing comments and discussions within the design file.
    • To integrate external tools or processes that generate feedback directly into Figma comments.
  • Parameters
    • message – The text content of the comment.
    • file_key – The file key of the Figma file to post the comment to.
    • (Optional) comment_id – The ID of an existing comment to reply to. Leave empty for top-level comments.
  • Example prompts
    • Post a comment 'This button needs to be larger for better accessibility' to the Figma file with key ABC123xyz789.
    • Reply to comment 1234567890 in file DEF456uvw012 with 'Agreed, let's make it 48px tall'.
    • Add a comment to the Figma file https://www.figma.com/file/GHI789jkl012/My-Design saying 'Consider using a darker shade for better contrast'.
    • I want to post a new comment 'Is this component ready for development?' to the file MNO345pqr678.
    • Can you add a comment to file STU901vwx234 with the message 'Feedback: The spacing around the header seems off. Can we adjust it?'
figma_resolve_url – Resolves a Figma URL and shows what is at that location without downloading the entire file.
  • When to use
    • To extract the file_key and node_id from any Figma share link provided by a user.
    • To quickly see what is inside a specific frame or node, including its immediate children, without incurring the overhead of fetching the entire Figma file.
    • To check if a Figma URL is valid and what content it points to.
  • Parameters
    • url – The Figma share link to resolve.
  • Example prompts
    • What is at this Figma URL: https://www.figma.com/design/PohuceHz2EoQoR6KYy2DIK/Page_Basic?node-id=1-82?
    • Can you resolve the Figma link https://www.figma.com/file/ABC123/MyDesign?node-id=456-789 and tell me what node it points to?
    • I have a Figma link https://www.figma.com/proto/DEF456/Prototype?node-id=10-20. What information can you get from it?
    • Please analyze this Figma share link: https://www.figma.com/design/GHI789/ComponentLibrary?node-id=30-40.
    • What file and node does https://www.figma.com/file/JKL012/ProjectX?node-id=50-60 refer to?

If you use Opti ID, administrators can turn off generative AI in the Opti ID Admin Center. See Turn generative AI off across Optimizely applications.