Figma Design System Documentation Page for a Component
Write the documentation that sits beside a component.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Write documentation for a design system component in Figma, for designers and developers. Component name and purpose: [COMPONENT_PURPOSE]. Variants and properties: [VARIANTS]. Usage examples: [USAGE_EXAMPLES]. Accessibility behaviour: [ACCESSIBILITY]. Write the page in full from my details only, using [ADD] for anything missing. Sections: summary; when to use and not to use; anatomy (a list naming each labelled part); a table of variants and states; spacing and sizing rules in token names; content guidelines; accessibility (keyboard behaviour, focus order, roles, accessible name, contrast requirements by token); do and don't statements described in words; and related components. End with a checklist the reviewer uses before the page is published and a changelog entry with date and author. Write for two readers at once: a designer choosing the component and a developer building it. Keep each section short, use the same heading order for every component page, and say plainly where my details are too thin to document safely. Add a line at the top with the component status (draft, stable or deprecated) and the owner.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.