La primera vez que Claude Code dibujó algo en mi archivo de Figma, pensé: esto me va a abrir muchísimas oportunidades. Y así fue. Figma es ahora donde ocurre la mayor parte del trabajo de mi agente: en dos meses, su skill de Figma acaparó 480 de 528 llamadas a skills. Cuento más sobre mi configuración en Claude Code no es para código.
Por qué Figma y no generación de imágenes
Porque lo necesito en vectorial. Una imagen generada es una imagen plana. Un archivo de Figma es algo con lo que puedo seguir trabajando:
- Capas y texto real. Puedo corregir una errata, cambiar una cifra o traducir una diapositiva sin redibujar nada.
- Mi sistema de diseño. Los colores, la tipografía y los componentes salen de mis tokens, así que cada pieza nueva encaja con las anteriores.
- Impresión y web desde una misma fuente. Los mismos frames se exportan como archivos de impresión para stands de ferias y como SVG para mi sitio.
- Sigo teniendo el control. Puedo abrir el archivo y cambiar lo que quiera yo misma.
Qué hay en mi Figma
- Mi tienda de plantillas de Notion. Su sistema de diseño tiene 55 variables, 13 estilos de texto y 6 conjuntos de componentes, además de las portadas y los diagramas de la primera tanda de 28 artículos del blog, cada uno con su versión para móvil.
- Presentaciones de empresa en tres idiomas. Una sobre centros de datos en contenedores tiene 15 diapositivas en inglés, ruso y turco, sincronizadas entre sí.
- Stands de ferias e impresión. Paneles de stand, banners, un folleto tríptico, vales y certificados, exportados para imprenta.
- Este sitio. Los iconos de las secciones de la página de inicio de zoyak.tech nacieron en Figma.
La tienda de plantillas es el trabajo del que estoy más orgullosa. Es muy buena no solo en diseño, sino también en contenido, y pienso usar ese contenido para mis propios estudios.
El ciclo: el agente propone, yo edito y el sitio recibe mi versión
El agente nunca lleva un diseño directamente al sitio. Dibuja en mi archivo, yo lo miro, lo edito a mano y solo entonces se exporta el resultado.
Los iconos de la página de inicio son un buen ejemplo. El agente dibujó varias propuestas una al lado de otra; elegí una y pulí los detalles yo misma, hasta afinar el bloque de páginas del libro de Studies. Los SVG del sitio se exportaron desde mis frames ya editados, así que cada cambio que hice a mano se publicó exactamente como lo dejé.
Lo que el agente tuvo que aprender sobre Figma
Trabajar a través de la API de Figma no es lo mismo que trabajar en Figma a mano. La memoria de mi agente ya guarda 17 notas solo sobre Figma. Algunas de las lecciones:
- El ancho del texto hay que medirlo. No se puede adivinar por el número de letras.
- Los frames recortan su contenido. Un elemento que «está ahí» puede ser invisible.
- La opacidad vive en dos sitios. La opacidad del relleno y la de la capa son cosas distintas.
- Los ID de nodo caducan. Una referencia que funcionaba ayer hoy puede no apuntar a nada.
- Los logotipos no pasan de un archivo a otro por API, así que se reconstruyen o se copian a mano.
- La exportación a SVG tiene sus manías, así que las exportaciones se revisan antes de publicarse.
- Las animaciones no se pueden crear a través de la API.
Mis reglas para el trabajo de diseño
El agente también sigue las reglas que le he dado para todo lo visual:
- Enseñarlo primero en Figma, no en el sitio en producción.
- Sets de iconos reales, nunca emojis, en todo lo que se publica.
- Cuando el tema es una herramienta concreta, usar su logotipo real, redibujado en mi estilo, no una metáfora.
- Infografías ligeras y aireadas: fondos claros, degradados suaves, un solo color de acento.
Por qué importa
El vector significa que el trabajo sigue siendo mío. El agente me lleva a una primera versión en minutos, y todo lo que viene después sigue siendo editable, por él o por mí. Para alguien que piensa en imágenes pero nunca tuvo un equipo de diseño a mano, esa es la oportunidad que vi el primer día.