Plus UI Design · Practical guides

Document your local Figma variables

Create readable variable documentation from the collections in your file, then check that the result matches the source.

Prepare a small collection first

Start with a local collection containing a few representative variables. Include a color, a spacing value and a meaningful name such as “color/surface/default.” Confirm that you are working in the file containing the variables. A style and a variable are different Figma resources; a file with color styles alone does not provide a local variable collection.

Inspect the generated documentation

Run Variables Doc Designer, choose the available table settings and insert the documentation. Compare several rows with Figma’s variable panel: the name, type, mode and value should describe the same source. Check the longest name and any aliases before generating documentation for a large system.

Make the result useful to a reader

Place the documentation on a clearly named page. Add a short note describing the collection’s purpose and who maintains it. Keep explanatory design decisions next to the generated tables; values alone do not explain when a token should be used.