Cómo crear un botón en Figma con variantes y estados usando IA y tokens

Construyo un botón. Uno solo, pero completo. Con label, icono izquierdo e icono derecho.
Lo hago dos veces.

Contenidos

00:00 - Intro. Qué vamos a hacer: montar el componente botón a mano y con Claude Code, y comparar tiempos y calidad
00:18 - Montaje a mano en Figma. Arranco el cronómetro y empiezo con la base del botón: cadena de texto, iconos, auto layout, gap, padding y radius con tokens
02:18 - Colores provisionales y conversión a componente, listo para crear las variantes
03:10 - Variante size. Creo SM, MD y LG, ajustando padding, gap, radius y tamaño de iconos según mi documentación de tokens
07:38 - Properties del componente. Label, mostrar/ocultar iconos y swap instance para left icon y right icon
10:21 - Variante state. Creo default, over y disable, con opacidad al 50% en el estado disable
11:44 - Variante shape. Añado rectangle y pill usando el token de radius full
13:05 - Microinteracciones y leyendas. Smart Animate entre default y over, y documentación visual del componente
15:52 - Cronómetro final a mano: 15 minutos 12 segundos
16:23 - Pausa para invitarte a la comunidad UXFOMO en Discord
16:53 - Prompt para Claude Code. Redacto la petición con la anatomía, tokens, variables, variantes y properties del botón
18:52 - Prompt terminado en 5 minutos 33 segundos
19:00 - Ejecuto el prompt y mido cuánto tarda Claude Code en montar el componente
19:55 - Resultado: Claude Code lo monta en 6 minutos 41 segundos
20:25 - Reviso el resultado: properties, variables, padding, gap, radius y lo que faltó (microinteracciones y anotaciones)
22:34 - Conclusión. Comparativa honesta de tiempos y calidad entre lo manual y lo generado por IA
23:08 - Avance del próximo vídeo y cierre

Primero lo construyo yo, a mano, en Figma. Después se lo pido a Claude Code.

El botón tiene tres tamaños: SM, MD y LG. Y tres estados: default, hover y disable.

También le pongo propiedades. Mostrar u ocultar el icono izquierdo. Mostrar u ocultar el icono derecho. Y un campo para editar el label desde el panel de propiedades.

Todo con los tokens que ya tengo en mi sistema de diseño. Paddings, gaps, radius, tamaños de texto y de icono. Nada inventado, nada a ojo.

Ojito con esto: mientras construyo, mido el tiempo.

Arranco el cronómetro cuando empiezo el botón a mano y lo paro cuando termino. Hago lo mismo con Claude Code. Lanzo el prompt, mido, y comparo.

¿Qué quiero ver?

Dos cosas. Cuánto tardo yo y cuánto tarda el modelo. Y la calidad de lo que sale de cada lado.
Porque velocidad sin calidad no me sirve. Y calidad lentísima, tampoco.

Al final pongo los dos botones uno al lado del otro. Reviso los nombres de las variantes. Reviso las propiedades. Reviso si respetó los tokens o si se los saltó. Reviso cómo quedó organizado el componente.

Y te doy mi opinión honesta. Qué hizo bien cada uno. Qué le cambiaría a lo que generó Claude Code.

Esto no es magia. Claude Code no diseña por mí. Yo decido la anatomía del botón, los tokens, los estados. El modelo construye lo que yo defino.

Esa es la idea de fondo. La herramienta acelera cuando tú sabes qué quieres escalar.

Si construyes tu propio sistema de diseño, este vídeo te sirve.

Mira los tiempos. Mira la calidad. Y saca tus conclusiones.

Recursos:

📌 Prompt mejorado para crear un componente Button con variantes y propiedades con Claude Code: https://github.com/juanpoldi/figma-design-system-prompts

- Discord: https://www.juanpol.com/discord
- Tutoriales: https://www.juanpol.com
- GitHub: https://github.com/juanpoldi
- X: https://x.com/juanpol

Видео Cómo crear un botón en Figma con variantes y estados usando IA y tokens канала Juanpol DI