The design studio linea_weiss® commissioned us to impart basic and advanced knowledge of Figma software and component-based, systemic design, and to jointly develop a customized workflow for their project needs. The main challenges were as follows:

• Getting to know the previous and familiar workflow in Adobe InDesign, identifying optimization potential and translating this for the Figma way of working

• Teaching the basics, but also “advanced” topics at Figma in a short space of time

• Making systemic work with variables and components in Figma accessible and understandable

The goal: more sustainable work through efficiency

Before we went into practice, we defined the objectives of the workshop together in a detailed discussion and identified the needs and initial pain points in the current workflow.

It was important for us to impart relevant knowledge about the Figma software that could be applied directly in practice. We also wanted to provide an insight into working with design systems. This is strongly oriented towards the component-based way of working, which is an integral part of today's software development.

Component-based work means defining reusable elements (“components”) in order to have to rewrite as little code as possible. A component can be very simple, e.g. a “button”, or more complex, e.g. an entire form. The advantage of this is that you don't always have to solve problems from scratch, but instead define a set of buttons that can be used within an entire application, for example.
For UX/UI designers, this way of working offers the advantage of creating consistency and uniformity through reuse and creating design guidelines.

A quick overview: From basic to advanced in Figma

On the first day of the workshop, we focused on the basics of the Figma interface. To gain a solid understanding of the tool, we first learned about basic functions, shortcuts, and how to work with libraries.

There was a particular focus on the “variables” and “autolayout” functions. These features are strongly oriented towards the thinking and working methods of modern front-end development.

Variables contain values for things like colors or font sizes, which can be defined centrally in Figma. Elements such as areas can be styled using a reference to this variable.
In front-end development, “CSS variables” are used for this purpose. These also follow the “referencing principle” and enable central management of values that can be reused. This creates consistency and makes it easy to change values in one central location – for example, if colors change.

Autolayout is a feature in Figma that controls the automatic arrangement and scaling of multiple elements based on rules such as direction, spacing, and size.

CSS Flexbox enables a similar effect in front-end development: elements can be aligned horizontally or vertically.

The “Variables” and “Autolayout” functions increasingly align design processes with development workflows – this not only saves time and money, but also reduces potential misunderstandings between design and code.

Getting started with variables can seem complex at first. To make this easier, we have provided practical checklists that help with creation and also offer suggestions, e.g., how variables can be named.

After a brief introduction to the theory, we immediately moved on to practical exercises: creating variables, defining names, and creating groupings. Always at hand: our “cheat sheets,” which summarize the most important theory in a compact form.

Empathy as the basis for good collaboration between development & design

At farbenmeer, it is particularly important to us that we as designers have empathy and a rough understanding of the work of the developers. We achieve this through a close exchange between both areas, joint reflection on our workflows and mutual learning, as well as collaborative work in Figma. We are happy to pass on this philosophy in order to create a good working atmosphere.

Accordingly, we also looked at this in the workshop and discussed how Marc and Victoria can improve collaboration with developers by using Figma. Functions such as the ability to read out design specifications (“dev mode”) or leave comments on the designs are valuable tools for adding further thoughts to the visual concepts.

Together for more digital participation

Another topic close to farbenmeer's heart is accessibility. We are certainly not perfect, but we try to keep learning and getting a little better with every product. Making sure that buttons are large enough, texts are legible, alt texts are available and images are accessible and tangible for everyone is an important part of the user experience that designers can take into account in their daily work.
Here, too, we are happy to share our knowledge and exchange ideas in order to make digital products better and more accessible to more people. Over the course of the workshop days, we repeatedly addressed the topic with Marc and Victoria and sensitized ourselves to it together.

More please: Deepening and workflows

The aim of the second workshop day was to further deepen the practice by building our own components - using the previously created variables. Another focus was to define individual workflows in Figma that are specifically tailored to the way linea_ weiss® works.

Together, we evaluated which principles and methods from the field of component-based work in the world of design systems could be usefully integrated into the day-to-day project work of linea_ weiss®.

Because not every method automatically fits every project - it's about consciously choosing what really helps. Or as Bruce Lee aptly put it: “Adapt what is useful, reject what is useless, and add what is specifically your own.”

Conclusion: An exchange that lasts

The two-day workshop with our colleagues from linea_ weiss® was not only an opportunity to share our expertise, but also a chance for us to learn more about ourselves and our personal working methods - through questions, feedback and shared aha moments.

The quick comprehension and curiosity that Marc and Victoria brought to linea_ weiss® inspired and motivated us in the long term. The enthusiasm for new ways of thinking and working, but also the joint critical consideration of which things to take with us into our own practice, were the foundation of a valuable exchange that we are happy to continue. 


Many thanks for your trust, linea_ weiss® 🫶