Plugin para Figma

Export Component Metadata

La información de tus componentes, fuera de Figma.

Para quién

Equipos que documentan y desarrollan componentes

Alcance

Plugin · Contrato de componentes · Markdown y JSON

En foco

Component Properties / Markdown / JSON

La idea

Sacar la información del componente fuera de Figma.

Las propiedades que definimos en Figma también sirven para documentar e implementar los componentes. Hice este plugin para extraer esa información en Markdown o JSON, sin tener que transcribir el panel de propiedades.

Formatos

Markdown legible. JSON estructurado.

Variantes, booleanos, textos e intercambios, con sus valores y opciones por defecto. El Markdown va a tu documentación; el JSON, a tus herramientas.

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"]
      }

Propiedades

Cada tipo de propiedad.

Valores, opciones por defecto e instancias preferidas, leídos directamente del componente.

Exportación completa

Un componente o el archivo completo.

La exportación completa muestra el progreso, omite por defecto lo oculto y, si un componente falla, sigue con el resto.

Exportación completa en curso, con su progreso

Selección

Desde cualquier selección.

Selecciona el set, una variante o una instancia: el plugin encuentra el componente principal.

La implementación

Cómo lo construí.

Conservar los identificadores y resolver los nombres

El plugin mantiene los IDs y resuelve los nombres de las referencias. El orden de las propiedades sigue una regla propia; puede diferir del orden que muestra el panel de Figma.

Generador de metadatos

Export Component Metadata

Tus componentes, documentados.

Component Properties: Variantes, booleanos, textos e intercambios.
Markdown: Documentación lista para compartir.
JSON: IDs originales y nombres legibles.
Exportación completa: Todas las páginas, con progreso.
UI3 de Figma: Sigue el tema de Figma, sin acceso a la red.

Código abierto (MIT)

Exporta metadatos de Figma, no código de componentes. En la exportación completa se omiten las variantes hijas y los componentes independientes sin propiedades.

Ver el código en GitHub

Siguiente proyectoBardo para Mac