Do you know that feeling when you hand over a design or component library to developers, and then they follow you around all day or keep calling you? And you don't stop explaining how things should be done? The cause isn't just in the complex UI or graphic design.
Other factors can include:
Within the Etnetera Design team, we've taken significant steps to minimise these issues on our projects, saving both designers and developers time and effort.
Every now and then, a new graphic design or documentation tool appears on the internet. At Etnetera, we've been working with Figma for several years. Why this tool and not something like Sketch?
Our designers have years of experience with Figma, so working with it is seamless for them. However, it may not always be the same for developers.
That's why, at Etnetera, we've focused on internal training to help developers and designers collaborate better and understand each other. In the first of our Figma Insight workshop series, we introduced the team to existing Figma features that developers can use to streamline their work and maintain code quality. We also discussed new features like:
In the next workshop, we'll dive into practical tasks in Figma and code simultaneously.
The first Figma Insight workshop wasn't just about presenting theory; it sparked passionate discussions.
The space for exchanging ideas and discussions is crucial for mutual understanding between developers and designers.
These discussions can lead to creating quality documentation and a set of rules for working with responsive web layouts, button usage rules, or defining specific element spacing.
"It's not enough to design a basic button... where are the hover, focus, selected, disabled, or loading states... ideally grouped into one set."
A common issue that causes unnecessary friction between design and development teams is the lack of documentation or its inadequate quality. Who should create it? The developer or the designer? The truth is, both should.
On medium and larger projects, building a strong UI foundation and its documentation, ideally in the early project stages when the initial design concept is available, is essential.
While building documentation may be time-consuming in the early stages, the initial investment pays off in the short term due to:
Believe me, during the first few weeks of UI creation and implementation, the time invested in UI Kit or Design System documentation will pay off not only for you but also for your clients. They'll get a high-quality and sustainable product.
Forget about PNG or PSD files.
"Connecting the design team and front-end developers in the early stages of graphic preparation significantly strengthens team cohesion. Mutual understanding and respect among team members are key to a successful project."
The presentation ignited passionate discussions about proper design and Design System management, as well as the form of assets. In the upcoming workshops, we will focus on specific critical topics, including terminology and standardisation of elements across iOS/Apple/Web platforms. We will also delve into typography and colours.
The workshop was just the beginning of a longer journey, but we are convinced that this synergy will bring a new level of creativity, efficiency, and client-appreciated quality to our projects.
You can view the presentation here (of course, in a Figma prototype 😁).