Beta. Free for now.

Component docs, built in Figma.

DSister reads each component and writes anatomy, measurements, tokens and accessibility checks onto your canvas.

Add to FigmaSee the 13 sections

13 sections in every doc.

Anatomy, measurements and tokens are measured from your Figma layers. The rest is written for you. Sample data below.

  1. Overview
  2. Properties
  3. Variants
  4. Anatomy
  5. Measurements
  6. Behaviour and requirements
  7. Design tokens
  8. Usage
  9. Accessibility
  10. Code examples
  11. Best practices
  12. Dependencies
  13. Developer handoff

Anatomy

Button
Save changes12345
  1. 1
    ContainerFill primary, radius 8
  2. 2
    Leading icon16 x 16, optional
  3. 3
    LabelLabel/md, 500 14/20
  4. 4
    Trailing iconCaret, 16 x 16
  5. 5
    Focus ring2 px, offset 2

Measurements

Input field
320Email addressname@studio.comWe never share your address.816648r 10
Height
48
Padding X
16
Label gap
8
Helper gap
6
Radius
10
Border
1

Variants and properties

Checkbox
checkedfalsetrue"mixed"Boolean, tri-state
statedefaulthoverfocusdisabledVariant, hover and focus are CSS
sizesm 16md 20lg 24Variant, px

Size scale

sm 16 px, label 13/18md 20 px, label 14/20lg 24 px, label 16/24

Design tokens

Badge
TokenApplied asVariantsValue
color/badge/success/bgFillSuccess#DCF3E5
color/badge/success/textTextSuccess#0B6B3A
color/badge/success/borderStroke 1Success#9AD9B4
space/badge/padding-xPaddingAll variants8
radius/badgeCornerAll variants999
Aatype/label/smText styleAll variants500 12/16
Hardcoded fillNot linkedSuccess#1F7A4A

Hardcoded fill #1F7A4A has the same value as color/badge/success/text (not linked).

Accessibility

Input field
Label on surface1.4.3 text, #14141C on #FFFFFF18.3:1Pass
Helper text1.4.3 text, #6B6B7B on #FFFFFF5.2:1Pass
Placeholder1.4.3 text, #9A9AAA on #FFFFFF2.8:1Warning
Field border1.4.11 non-text, #8E8EA0 on #FFFFFF3.2:1Pass
Focus ring1.4.11 non-text, #5242E8 on #FFFFFF6.4:1Pass

Focus order

1234

Keyboard

  • TabNext stop in focus order
  • ShiftTabPrevious stop
  • SpaceToggle remember me
  • EnterSubmit from any field

WarningContrast and target size are measured. No screen reader was run.

Developer handoff

Button
// Root is a button. Hover and focus are CSS.
type ButtonProps = {
  variant?: 'primary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  leadingIcon?: ReactNode;
  children: ReactNode;
} & ButtonHTMLAttributes;

// Usage
<Button variant="primary" size="md">
  Save changes
</Button>
COMPONENT.mdspec.jsonButton.tsxButton.stories.tsx

The other seven.

Written from your layers and your notes, or authored by your team. Pick one.

Overview

Toast
Document summary

Toast Documentation

Toast shows a short message after an action and leaves on its own. Four tones set the meaning: info, success, warning and error. Use it to confirm, never for anything the person must act on.

16Variants
4Properties
11Tokens
3Sizes
StatusIn review, set by you

Five screens, one document.

Pick sections, pick a component, and the doc lands on your canvas.

Start from Home. Press Create documentation.

Home: DSister welcome screen with the Create documentation button
Choose documentation content: 9 of 13 sections selected, Overview required, drag handles
Select component: Button component set chosen, optional note and document details
Creating your documentation: current section and progress bar
Documentation generated: 9 sections and 36 variants created, full files ready

Coming soon to Figma Community

Figma AI skills

14 free skills for your Figma agent. One for each section, plus one for the whole document.

  • Slash commands. Run /dsister-anatomy in Figma's AI agent, or in any agent with the Figma MCP use_figma tool.
  • Needs edit access. Each skill draws one column beside the component, using the file's own variables and text styles.
  • Source untouched. It never modifies the source component.
  • Labelled. Every column carries a content-source chip.
  • Free. Community Free Resource License.
Figma AI agent. Sample run.

/dsister-anatomy

Column added beside Button.

Numbered markers on the parts and a matching parts table.

Content-source chip on the column. Source component untouched.

All 14 commands

Questions.

Is DSister free?

DSister is in beta and free for now. Each month you get 5 free docs. Give feedback in the plugin and get +5 more. Your feedback shapes what we build next.

What can I document?

Component sets and single components.

What does the AI write?

AI writes Overview, Properties, Variants, Usage, Best practices, Code examples and the accessibility text. Anatomy, Measurements, Design tokens and the Variant tables are measured from Figma with no AI.

How do I know where a section came from?

Every section carries a label: Measured, AI or Authored.

Where does the doc end up?

Docs are written as real Figma frames in your file.

What does developer handoff include?

Tokens, COMPONENT.md, spec JSON and code files.

Plugin or skills?

The plugin adds grounding validation, a stored spec and the handoff bundle. The skills run in your Figma agent.