AUTHOR
Michal Měcháček

Figma Insight: The Future (Not Only) for Designers

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 😁).

Read more

27
.
9
.
2023
|
#
UX/UI
#
Education
Figma Insight: The Future (Not Only) for Designers
Read article
5
.
9
.
2023
|
#
Android
#
Mobile Applications
Migrating an XML Project to Jetpack Compose
Read article
17
.
8
.
2023
|
#
Android
Google Play Beta Program in the Development of Mobile Applications
Read article
13
.
3
.
2023
|
#
Android
5+1 Sources of Information, That Will Make You a Better Android Developer
Read article
31
.
1
.
2023
|
#
Etnetera Mobile Academy
From a Mobile Academy Graduate to Its Mentor: I was surprised by the freedom and trust, says Patrik Mokriš
Read article
11
.
1
.
2023
|
#
Project Management
#
Agile
How to Improve Team Collaboration With Just One Workshop
Read article
22
.
12
.
2022
|
#
Etnetera Mobile Academy
Mobile Academy: From Colours to Architecture in Six Weeks? Possible, but Not Easy…
Read article
25
.
5
.
2022
|
#
Project Management
#
Agile
Unleash Your Team’s Superpowers: A Step-By-Step Guide to Creating a Superhero Team With Retrospective Events
Read article
8
.
12
.
2021
|
#
Mobile Applications
Direct and Etnetera: Defining the Insurance Market via Mobile App
Read article
30
.
11
.
2021
|
#
Android
#
Education
Android Team Hit the Road for Jetpack Compose and Pokémon
Read article
19
.
8
.
2021
|
#
Etnetera Mobile Academy
Bára, Michael, Jarda and Patrik: Talents of the Mobile Academy
Read article
10
.
5
.
2021
|
#
Mobile Applications
Stars Rule: How to improve feedback and increase app ratings
Read article
31
.
3
.
2021
|
#
Etnetera Mobile Academy
#
Education
Etnetera Mobile Academy: Online format has its advantages. However rules are necessary, says mentor Petr Urban
Read article
25
.
3
.
2021
|
#
Etnetera Mobile Academy
#
Education
Etnetera Mobile Academy: It is more about transferring experience than learning, says mentor Radek Bien
Read article
24
.
3
.
2021
|
#
Mobile Applications
Voice More Important Than Vision: We keep this, too, in mind when developing mobile apps
Read article
17
.
8
.
2020
|
#
Automotive
#
Mobile Applications
Connecting Your Car to Your Phone Just Got a Little More Stylish
Read article
28
.
7
.
2020
|
#
CSR
Helping to Help with ROSSMANN
Read article
29
.
5
.
2020
|
#
Automotive
#
Mobile Applications
One Step Closer to the Customer: Customisable Offer Application
Read article
17
.
12
.
2019
|
#
Automotive
#
Mobile Applications
The Future of Automotive Available Today
Read article
22
.
7
.
2019
|
#
Etnetera Mobile Academy
#
Education
Etnetera Mobile Academy: What Are Our Graduates Doing Today
Read article
17
.
7
.
2018
|
#
Etnetera Mobile Academy
#
Education
Etnetera Mobile Academy: How We Learned to Teach
Read article
16
.
9
.
2016
|
#
Mobile Applications
Fortuna Mobile App
Read article
1
.
2
.
2016
|
#
Mobile Applications
#
Education
Mdevtalk #1: From an Idea to 250 Participants
Read article
7
.
12
.
2015
|
#
Mobile Applications
Mobile Marketing 2015 Conference: Follow Trends, Be a Dreamer
Read article