INTERVIEW
Ricardo Lodroño

Ricardo: Hot… very hot 🫠

Ricardo: ¡Con calor… muchísimo calor! 🫠

Ricardo: Both the workshop and the course were tool-based and focused on using Figma to build visual systems, demonstrating its capabilities for tackling graphic design or visual identity projects that require the creation of a visual system. We combined theory lectures with hands-on exercises in class. These exercises gradually added features as we covered them in the course.

We started from what makes Figma different from the tools most graphic designers come from. First, we covered layout as behaviour: freeform with constraints, Auto Layout and Grid. In Figma, layout is a structural decision because it determines how a composition responds to changes in format or content. Next came parametrization, which involves turning decisions such as colour, type and spacing into variables and styles. This means that each one becomes a named value that can be referenced across the entire file. Next came systematisation: components and variants, which transform graphic elements into reusable devices with a defined range of variation. Finally, we put it all together using the CAA Method to generate actual applications following different combination strategies.

Ricardo: Tanto el taller como el curso se basaron en herramientas y se centraron en el uso de Figma para construir sistemas visuales, demostrando sus capacidades para abordar proyectos de diseño gráfico o identidad visual que requieren la creación de un sistema visual. Combinamos clases teóricas con ejercicios prácticos. Estos ejercicios fueron incorporando gradualmente las funciones que vimos en el curso.

Empezamos por lo que diferencia a Figma de las herramientas que suelen usar la mayoría de los diseñadores gráficos. Primero, vimos el layout como comportamiento: freeform con constraints, Auto Layout y Grid. En Figma, el layout es una decisión estructural porque determina cómo responde una composición a los cambios de formato o contenido. Después venía la parametrización: convertir decisiones como el color, la tipografía o el espaciado en variables y estilos, de modo que cada una pasa a ser un valor con nombre al que puedes hacer referencia desde cualquier punto del archivo. Luego la sistematización: componentes y variantes, que convierten un elemento gráfico en una pieza reutilizable con un rango de variación definido. Finalmente, lo combinamos todo utilizando el método CAA para generar aplicaciones reales siguiendo diferentes estrategias de combinación.

Ricardo: The part of the course that worked best was when I showed the reverse-engineered projects that I had built for study purposes. In these projects, I took an existing flexible identity, took it apart and then rebuilt it inside Figma using flexible layouts, components and variables. Students told me directly that this was the most exciting part of the course. They could see the concepts we covered being applied to a real project.

The in-class exercises were effective too, particularly since I included the solution on a separate page of the exercise file. People learn at different speeds, so being able to open the worked solution and analyse it at a later time was very helpful. We also had a shared FigJam file as a hub for additional content and resources, along with a Q&A section for support.

One thing I particularly enjoyed was that some students started applying the course ideas to their live projects while the course was still in progress and shared them with me for feedback. A few were working on branding for cultural festivals, which is almost the perfect application of this approach. Seeing that happen during the sessions was the best feedback I could have received.

The main thing I want to improve is the range of content covered. We are splitting the material so that the course provides a proper foundation –something that you can follow even if you are new to Figma. I also want to devote more attention to Figma as a drawing and design tool, which students enjoyed and requested. With Figma Draw and other new features that the product is adding, Figma can be a serious alternative to Illustrator for expressive work in some cases. This aspect deserves more emphasis alongside the pure system-oriented content (components, variables, etc).

Ricardo: La parte del curso que mejor funcionó fue cuando mostré los proyectos de ingeniería inversa que había creado con fines de estudio. En estos proyectos, tomé una identidad flexible existente, la descompuse y la reconstruí en Figma utilizando layouts flexibles, componentes y variables. Los estudiantes me dijeron directamente que esta fue la parte más interesante del curso. Pudieron ver los conceptos que habíamos visto aplicados a un proyecto real.

Los ejercicios en clase también funcionaron bien, sobre todo porque incluí la solución en una página aparte del archivo del ejercicio. Cada persona aprende a un ritmo diferente, por lo que poder abrir la solución y analizarla posteriormente fue de gran ayuda. También contábamos con un archivo compartido de FigJam como centro de contenido y recursos adicionales, además de una sección de preguntas y respuestas para resolver dudas.

Algo que disfruté especialmente fue que varios alumnos empezaron a aplicar las ideas del curso a proyectos que tenían en marcha, con el curso todavía en activo, y me los compartían para que les diera feedback. Algunos estaban trabajando en identidades para festivales culturales, lo cual es una aplicación casi perfecta de los FVS. Ver que eso pasaba durante las propias sesiones fue la mejor señal que podía tener.

Lo principal que quiero mejorar es el alcance del contenido. Estamos dividiendo el material para que el curso funcione como una base sólida, algo que se pueda seguir incluso si eres nuevo en Figma. También quiero dedicar más atención a Figma como herramienta de dibujo y diseño, una parte que los alumnos disfrutaron y pidieron. Con Figma Draw y las nuevas funcionalidades que el producto va incorporando, Figma puede ser una alternativa seria a Illustrator para trabajo expresivo en determinados casos. Este aspecto merece más peso, junto con el contenido puramente orientado a sistemas (componentes, variables, etc.).

Ricardo: There are a few directions I would like to explore. The first is the natural next step in building on the foundations: the advanced layer of system building. This includes variable modes, scoping, semantic and reference tiers, component properties, and the entire distribution process via Team Libraries. This material cannot be covered in a foundational course, and it is what enables a system to survive at scale.

The others stem from the new features that Figma has recently released. For example, motion is now a mode of its own, with animated components and new variable types for easing curves and timing. This means that our visual system can now incorporate motion and gain a time dimension.

Another one is preparing a system to be operated by AI agents. The Figma agent works on the canvas reading your components, variables, layer names and descriptions, so everything we teach in the course about systematizing and parametrizing becomes the context it needs. Once that context is there, you can ask the agent to generate new applications, variations and adaptations, populate layouts with real content, and get results that stay inside your rules. The agent thus becomes a “coworker” who understands your system and can assist you with production tasks.

Lastly, something that connects with other of my fields of interest: encoding our systems into transferable custom design tools. Figma has incorporated features that allows you to build your own tools without leaving the Figma environment, prompting the agent and without writing a single line of code. You can now create custom shaders for both generative fills and for applying effects to existing layers on the canvas. You can also create generative plugins that go further: you describe the behaviour, controls and parameters you want in plain language and get a small tool inside the Figma interface. This tool remains inside your file and travels with it to your team or client, with no need for publication or installation. This paves the way for creating transformation-based visual systems and custom tools for our form-based systems inside Figma.

Ricardo: Hay varias direcciones que me gustaría explorar. La primera es el paso natural después de los fundamentos: la capa avanzada de construcción de sistemas. Esto incluye modos de variables, scoping, tiers semánticos y de referencia, propiedades de componentes y todo el proceso de distribución mediante Team Libraries. Este material no se puede cubrir en un curso básico y es lo que permite que un sistema funcione a gran escala.

Las demás se derivan de las nuevas funciones que Figma ha lanzado recientemente. El motion, por ejemplo, es ahora un modo propio dentro de la herramienta, con componentes animados y nuevos tipos de variable para curvas de easing y timing. Esto significa que nuestro sistema visual ahora puede incorporar movimiento y adquirir una dimensión temporal.

Otra es preparar un sistema para que lo pueda operar un agente de IA. El agente de Figma trabaja en el canvas leyendo tus componentes, variables, nombres de capas y descripciones, por lo que todo lo que enseñamos en el curso sobre sistematización y parametrización se convierte en el contexto que necesita. Una vez que se dispone de ese contexto, puedes pedirle al agente que genere nuevas aplicaciones, variaciones y adaptaciones, que complete los diseños con contenido real y obtener resultados que se mantienen dentro de tus reglas. El agente se convierte así en un un compañero de trabajo que entiende tu sistema y puede ayudarte con las tareas de producción.

Y por último, algo que conecta con otros de mis campos de interés: codificar nuestros sistemas en herramientas de diseño propias y transferibles. Figma ha incorporado funcionalidades que te permiten construir tus propias herramientas sin salir del entorno, hablándole al agente y sin escribir una sola línea de código. Puedes crear shaders personalizados, tanto para rellenos generativos como para aplicar efectos a capas existentes en el lienzo. También puedes crear plugins generativos que van más allá: describes el comportamiento, los controles y los parámetros que deseas en lenguaje natural y obtienes una pequeña herramienta dentro de la interfaz de Figma. Esta herramienta permanece dentro de tu archivo y se transfiere con él a tu equipo o cliente, sin necesidad de puiblicarla ni instalarla. Esto abre el camino para crear sistemas visuales basados ​​en transformación y herramientas personalizadas para nuestros sistemas basados ​​en la forma, todo dentro de Figma.

Ricardo: For me, the shift is that Figma has evolved from being just a software tool to becoming an entire ecosystem. It started out as a UI design tool, closely linked to development from the outset with features like Dev Mode. This continued with the MCP and now with an agent working directly on the canvas, plus Weave for imagery and Figma Motion. The idea of a system holds all of this together: components, variables, styles and libraries. Every new feature assumes you have one.

Therefore, delving deeper into this ecosystem is a great way to develop a systems mindset and apply it to your own design projects. The valuable skill is being able to structure a visual identity in such a way that others, including agents, can work with it without breaking it. You benefit in two ways: scale and efficiency. If the system is properly parametrized and documented, agents can take over much of the production, freeing up time for you to focus on conceptualisation and (system) design.

You also pick up something of the mindset of a programmer along the way. Thinking in parameters, in reuse, in naming conventions… Even without writing code, it changes the way you approach your design work. You move towards this position of hybrid designer: someone whose deliverable includes the tools, systems and methods that produce the work, as much as the finished pieces. With its most recent features, Figma is the most accessible door into that role for a graphic designer.

Ricardo: Para mí, el cambio radica en que Figma ha evolucionado de ser simplemente una herramienta de software a convertirse en todo un ecosistema. Comenzó como una herramienta de diseño de interfaz (UI), muy pegada al desarrollo desde el principio gracias a funciones como Dev Mode. Esto continuó con MCP y ahora con un agente que trabaja directamente en el canvas, además de Weave para imágenes y Figma Motion. Lo que mantiene todo eso unido es la idea de “sistema”: componentes, variables, estilos y librerías. Cada nueva función parte de la premisa de que cuentas con uno.

Por lo tanto, profundizar en este ecosistema es una excelente manera de desarrollar una “mentalidad de sistemas” y aplicarla a tus propios proyectos de diseño. La habilidad valiosa consiste en saber estructurar una identidad visual de tal forma que otros —incluidos los agentes— puedan trabajar con ella sin romperla. Obtienes dos beneficios: escalabilidad y eficiencia. Si el sistema está correctamente parametrizado y documentado, los agentes pueden encargarse de gran parte de la producción, liberando tiempo para que tú te centres en la conceptualización y el diseño (del sistema).

Por el camino, también acabas adquiriendo parte de la mentalidad de un programador. Pensar en parámetros, en reutilización, en convenciones de nomenclatura… Incluso sin escribir código, esto cambia la forma en que abordas tu trabajo de diseño. Te vas moviendo hacia esa posición de diseñador híbrido: alguien cuyos entregables incluyen tanto las herramientas, los sistemas y los métodos que generan el trabajo como las piezas finales. Gracias a sus funciones más recientes, Figma es la puerta de acceso más sencilla a ese rol para un diseñador gráfico.

Ricardo’s next workshops, the one in English and the one in Spanish, are already starting at the beginning of September. Registration closes after 15 reservations: https://schoolofsystems.org