​
Extracting Component Information

Use these prompts when you’ve selected a component in Figma and want Cursor to extract its properties and structure.
From the selected Figma component, extract all of its properties, including variants, and generate a TypeScript interface for it.

Analyze the selected component in Figma and create a Markdown table that summarizes its key properties, such as variants, sizes, and states.

List all the design tokens (colors, fonts, spacing) used in the selected Figma component.

​
Documenting Components

Use these prompts to generate documentation for your components, making it easier for your team to understand and use them.
Based on the selected Figma component, generate a README.md file that includes:
- A brief description of the component
- A list of its properties and variants
- A code example of how to use it in React

For the selected component, write a set of user stories that describe its different use cases and interactions.

​
Sharing and Collaboration

Use these prompts to share component information with your team in different formats.
Generate a Storybook stories file for the selected Figma component (add link). Include controls for all of its props so the team can interact with it.

Draft a Slack message for our #design-system channel that introduces the latest updates to the selected Figma component. Include a summary of the changes and a link to the Figma file.

Create a JSON object that represents the metadata of the selected Figma component. Include its name, properties, and a list of all used design tokens.