Figma plugin

Export Component Metadata

Export component properties as Markdown and JSON.

Open on Figma Community

Export Component Metadata: project interface, view 1

For whom

Teams documenting and developing components

Scope

Plugin · Component contracts · Markdown and JSON

Tools

Component Properties / Markdown / JSON

The idea

Get component information out of Figma.

Properties defined in Figma are also valuable for component documentation and development. I created Export Component Metadata to extract them as Markdown or JSON, preserve their types and default values, and eliminate manual transcription from the properties panel.

Formats

Prepare two output formats.

I organized variants, booleans, text, and instance swaps with their default values: Markdown for documentation, JSON for integration with other tools.

Button.mdMarkdown

# Button

## Overview
- Variants: 12
- Component Properties: 5

## Component Props
[VARIANT] **Size**
Values: L, M, S
Default: M

[VARIANT] **State**
Values: Default, Hover, Pressed, Disabled
Default: Default

[BOOLEAN] **Has Left Icon**
Default: false

Button.jsonJSON

{
  "name": "Button",
  "overview": {
    "variantsCount": 12,
    "componentPropsCount": 5
  },
  "componentProps": [ 5 properties · raw Figma values ],
  "pretty": {
    "componentProps": [
      {
        "name": "Size",
        "type": "VARIANT",
        "default": "M",
        "values": ["L", "M", "S"]
      }

Properties

Read component properties.

I extracted property types, defaults, and preferred instance options from the component's metadata.

Full export

Export with progress you can track.

I added whole-file export that skips hidden elements by default. When a component fails, the error is logged and processing continues.

Export Component Metadata: Export with progress you can track., view 2

Selection

Find the source component.

I made it possible to start from a set, variant, or instance to find the main component and read its properties.

Implementation

How I built it.

Preserve IDs and resolve names

I retained original IDs and resolved reference names to make the output readable. I defined a custom property order, which may differ from Figma's panel.

Metadata generator

Export Component Metadata

Export component properties as Markdown and JSON.

Component Properties: Variants, booleans, text, and instance swaps.
Markdown: Documentation ready to share.
JSON: Original IDs and readable names.
Whole-file export: All pages, with progress.
Figma UI3: Follows the Figma theme, without network access.

Open source (MIT)

Exports Figma metadata, not component code. Full-file export omits child variants and standalone components with no properties.

View on Figma Community View source on GitHub

Next projectÁvila Design System