Inicio Trabajos Plugins
Centro de Ayuda

Plugin para Figma · Referencia de UI

Guía de funciones

Cada control del plugin explicado en español — con los nombres exactos tal como aparecen en la interfaz (en inglés).

1 · Flujo de trabajo

  1. Defines un color base (HEX) y el plugin genera una escala 50–950 al estilo sistemas tipo Tailwind (el tono 500 es el «base» de la marca).
  2. Ajustas con HSL si quieres refinar.
  3. Revisas contraste / accesibilidad (función Pro; en Free verás el bloque difuminado con mensaje de Premium).
  4. En Color Tokens ves la cuadrícula, copias valores y, si tienes Pro, puedes previsualizar semánticos y usar Light/Dark en la vista.
  5. Sync to Figma Variables crea variables en el archivo. Con Pro también se crean colecciones Success / Warning / Error armonizadas con tu primario.
  6. Export copia al portapapeles en Tailwind, CSS, SCSS o JSON.
  7. Generate Design System (Pro / trial) inserta en el lienzo una guía visual con primario + semánticos (no sustituye a las variables; es un frame de referencia).

2 · Barra superior

Elemento Qué es
Free / Pro Indica si usas la versión gratuita, trial Pro o licencia activada.
Pro Trial: X uses left Usos restantes del trial antes de que las funciones Pro queden bloqueadas (salvo que compres y actives).
Upgrade Abre el modal de compra y activación de licencia.
Icono de ajustes (engranaje) Menú con enlaces a documentación, términos, privacidad, etc., y Unlink license si tienes Pro pagado (solo quita la licencia en este Figma).
Referencia visual — barra superior
Pro Pro Trial: 3 uses left Upgrade

3 · BASE HEX — Color base

Acción Comportamiento
Campo de texto Escribe o pega un HEX (con #). Si el formato no es válido, el borde se marca en rojo hasta corregirlo o salir del campo (entonces vuelve al último valor válido).
Muestra de color Cuadrado a la izquierda del input: muestra el color actual.
Círculos pequeños (hasta 5) Historial reciente de colores usados en esta sesión/plugin. Clic en uno = ese color pasa a ser el base y se regenera la escala. El activo se ve un poco más grande.
Cuentagotas (pipette) Activa la captura desde el lienzo de Figma. Con el modo activo (borde azul), selecciona un nodo que tenga relleno sólido: el plugin toma ese color, lo convierte a HEX y lo aplica como base. Vuelve a pulsar el cuentagotas para desactivar.
Icono circular (refresh) Color aleatorio: genera un HEX al azar y lo aplica como base.
Referencia visual — BASE HEX

BASE HEX

#98B8A3

Tecla Espacio: si el foco no está en un input, al pulsar Espacio el plugin devuelve el foco al lienzo para que puedas usar pan en Figma sin que el iframe se quede con la tecla.

4 · HSL INPUT

Tres deslizadores:

  • H (Hue): 0–360, barra con arcoíris.
  • S (Saturation): 0–100 %, degradado según el matiz y luminosidad actuales.
  • L (Lightness): 0–100 %, del negro al blanco pasando por el color.

Cualquier cambio actualiza el HEX, la escala y el resto de vistas enlazadas.

Referencia visual — HSL INPUT

HSL INPUT

H141
S18
L66

5 · ACCESSIBILITY CHECK Pro

Visible sin blur solo si eres Pro o tienes trial con usos disponibles. En Free el contenido aparece difuminado y un cartel indica Premium Feature / Unlock accessibility insights with Pro.

Referencia visual — Free (bloque Pro bloqueado)
ACCESSIBILITY CHECK
Premium Feature — Unlock with Pro

Este módulo evalúa el color base actual frente a fondos blanco y negro (texto normal, criterio cuerpo de texto).

Control Función
Desplegable WCAG AA (4.5:1) o WCAG AAA (7:1) según el ratio mínimo que quieras cumplir.
On White Ratio de contraste del color sobre #FFFFFF. Icono verde/rojo según si cumple el umbral elegido. Etiquetas orientativas (p. ej. AA Body, Large Only, AAA Perfect).
On Black Igual sobre fondo negro.
Recommended Indica si al menos uno de los dos fondos cumple el estándar seleccionado y sugiere Use on White o Use on Black cuando tiene sentido.

Los ratios usan la misma lógica que las pautas WCAG 2.x para contraste de color (no sustituye una auditoría legal completa).

Referencia visual — ACCESSIBILITY CHECK
ACCESSIBILITY CHECK WCAG AA (4.5:1) ▾
On White
✓ 4.62:1
AA Body
On Black
✗ 3.10:1
Large Only

Recommended: Use on White

6 · Color Tokens

6.1 Nombre de familia — Color Family

  • Campo de texto para el prefijo de tus tokens (p. ej. summer-green).
  • La vista previa muestra algo como summer-green-500 para el nivel base.
  • El nombre se usa al crear variables y en exportaciones.

6.2 Cuadrícula principal (modo normal, sin SEM)

  • 11 niveles: 50, 100, …, 900, 950.
  • El 500 lleva un indicador dorado: es el tono base de la escala.
  • Clic en una celda (círculo o zona del token): si el toggle está en HEX, copia el HEX completo; si activas HSL, copia hsl(H, S%, L%).
  • Tras copiar aparece brevemente «Copied!» sobre la celda.
  • Los niveles 50 y 950 se muestran ligeramente más tenues en la cuadrícula (extremos de la escala).

6.3 Toggles en la cabecera de tokens

Botón Efecto
Light / Dark Pro / trial. Cambia el fondo de la cuadrícula entre tema claro y oscuro para previsualizar cómo se leen los chips (no cambia el tema de Figma). En Free el control aparece bloqueado con candado.
SEM Pro / trial. Vista de semánticos (solo lectura visual): filas Success, Warning y Error, niveles 300 / 500 / 700 de cada uno. No copia al portapapeles al hacer clic.
HEX / HSL Alterna qué formato se copia al hacer clic en la cuadrícula principal (no en modo SEM).
Referencia visual — Color Tokens

Color Family

summer-green

Preview: summer-green-500

Light Dark SEM HEX HSL
50
100
200
300
400
500
600
700
800
900
950

7 · Semánticos — Success / Warning / Error

  • Parten de anclas tipo estándar (verde, ámbar, rojo tipo escala 500 conocida).
  • El matiz (hue) de tu primario se mezcla en un 8 % con cada ancla para que success/warning/error no choquen con tu marca pero sigan siendo reconocibles.
  • A partir de ese color base semántico se genera una escala 50–950 con la misma lógica que el primario.
  • En Sync to Figma Variables, si tienes Pro, además de {nombre}/Primary se crean Success, Warning y Error con todos los niveles.
  • Generate Design System usa esas mismas escalas para dibujar la guía en el lienzo.
Referencia visual — Success / Warning / Error (concepto)
Success 300 · 500 · 700
Warning
Error

8 · Sync to Figma Variables

  • Crea variables de color en el archivo actual agrupadas por el Color Family que hayas escrito.
  • Free: solo la colección Primary (escala completa).
  • Pro: Primary + Success + Warning + Error.
  • Las notificaciones de Figma confirman qué se ha creado.
Referencia visual — sincronizar variables
Sync to Figma Variables

9 · EXPORT

  1. Elige formato: Tailwind, CSS variables, SCSS variables o JSON.
  2. Pulsa Copy … (Tailwind / CSS / SCSS / JSON).
  3. El contenido se copia al portapapeles del sistema.
  4. El botón muestra brevemente «Copied!» con icono de check.
Referencia visual — EXPORT
EXPORT
Tailwind CSS ▾
✓ Copy Tailwind

10 · Generate Design System Pro

  • Requiere Pro activo o trial con usos.
  • Cada ejecución correcta consume un uso del trial (si no eres Pro de pago).
  • Inserta en el documento una guía visual (frames con muestras de primario y semánticos); sirve de referencia de diseño, no reemplaza variables.
  • Si no tienes acceso Pro, el botón está deshabilitado o abre el flujo de upgrade según el estado.
Referencia visual — Generate Design System
✦ Generate Design System

11 · Modales

Modal Contenido
Welcome (primera vez) Resumen del trial y botón Get Started.
Upgrade to Pro Precio, Buy now (checkout externo), campo para license key, Activate license, enlaces legales/ayuda.
Referencia visual — modales (esquema)

Welcome

Trial · Get Started

Upgrade to Pro

Buy now · License key · Activate

12 · Free vs Pro

Función Free Pro / trial
Escala primaria, HEX, HSL, historial, cuentagotas, aleatorio Sí Sí
ACCESSIBILITY CHECK (contraste AA/AAA) No (vista bloqueada) Sí
Light/Dark en tokens No Sí
Vista SEM (semánticos) No Sí
Variables solo Primary Sí Sí
Variables + Success / Warning / Error No Sí
Generate Design System No Sí (trial limitado)
Export a formatos Sí Sí