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:
- Poor knowledge of design tools among developers: Developers can benefit from internal training and workshops that help them use the tool effectively and better understand why a component has so many layers.
- Inadequate communication between designers and developers: Designers should share more detailed information about how components should look in the code. Developers need enough information for successful design implementation, including different component states.
- Missing documentation: Solid documentation of UI rules and components is crucial. Designers should collaborate intensively with developers to define color palettes, typography, layout rules, and general UI terminology.
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.
Figma Insight Workshop Series
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?
- Integration with development: Figma offers integration with development, making it easier to transfer designs to code and maintain consistency in the project. The beta version of Dev-Mode allows us to test new features for even smoother collaboration.
- Documentation and Design System: Figma allows us to define rules through Variables and Styles for UI, including colors, typography, and layout. This gives us complete documentation or the basis for a Design System that ensures consistent design across all projects.
- Flexibility and efficiency: Figma allows for rapid prototyping and design iteration, enabling us to respond quickly to client needs.
- Multi-platform Cloud Solution: Unlike Sketch, Figma runs on all platforms and provides a cooperative mode for concurrent work.
- Branches: Figma allows file versioning using branches, including review merges.
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:
- Dev-Mode
- Variables
- style export plugins
- Visual Studio Code integration
In the next workshop, we'll dive into practical tasks in Figma and code simultaneously.
Room for Discussion
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.
- UI designers should understand how individual components will look in the code so they can design accordingly.
- Similarly, developers should have enough information to know how to handle a specific component.
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."
Collaboration on Documentation
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:
- Efficiency for the development and design teams
- Reduced technical debt
- A common language and understanding across the design and development teams
- Simplified management and modifications of designed components
- Faster engagement of the implementation team, which doesn't have to wait for final graphics
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."
Investing in Training as the Next Step to Success
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 😁).
.avif)
.avif)
