Coding the Flamingo design system with Petr and Jachym

Andrej Spasovski

Andrej Spasovski

10 minutes read

Thu Sep 7, 2023

Flamingo Design System with Jachym and Petr

We're launching our Flamingo design system into the world, so we've invited the people that build it behind the scenes to ask them a few questions about Flamingo, how they started their careers, and how they got to Ataccama. In this first interview we're speaking to Jachym Koudela and Petr Odut, two frontend devs in the Flamingo team. 

* * *

Tell us a bit about your roles and how you see them.

Jachym: Well, I would say that our roles are pretty much the same, we are both frontend devs. And I just call my job name Design System Engineer on LinkedIn, so it sounds more specific.

Petr: Yeah, I haven't been very active on LinkedIn for a few years now 😀 

To answer your question, I've always leaned towards being a frontend engineer, among the  various roles in programming like backend engineering, cloud engineering, DevOps, and more. Personally, I'm more drawn to designing and coding the visual aspects of a product rather than handling business logic or core features. So, I've focused on front-end work for several years.

Before Atacama I was in several different companies, and found myself disappointed by their lack of interest in design systems. Then, I responded to a message on LinkedIn, which led me here. Interestingly, the first thing they told me was that they’re looking for a design system engineer. Could it be? Was such a role even possible? This was about three years ago; at that time, it wasn't as commonplace. Things have definitely shifted in these past few years. But at that moment, it was a real surprise for me, something I hadn't anticipated. And that's the story of how I arrived at  Ataccama. It was a significant change.

At that time, it was basically just Diana, a designer, and me as the two design system specialists at Ataccama. I was one of the first people who could focus on the design system team at the company. So, that's the gist of it.

And you, Jachyme, what was your road to Ataccama like?

Jachym: My road has been quite similar. I delved into coding about seven or eight years ago. It was a time of uncertainty in my life, dealing with struggles like being expelled from university 😅. That's when I stumbled upon HTML and CSS. It caught me off guard, but I unexpectedly became incredibly passionate about it. I started dedicating hours every day to experimenting because it was an easier way to get into coding.

After about half a year of playing around and learning, I took a shot and applied for my first job as a junior. That's when things really started moving. I joined an agency, and while the pay wasn't great, I was excited to learn from others and gain some experience. I was genuinely happy about it.

As I switched between companies, I always felt like the weakest member of the team. But I was determined to understand and get better. I put in the effort to read other people's code and learn from them.

After a few company switches, I found a company where I spent a good four years. It was great there - the atmosphere was fantastic, I made good friends, and the projects were cool. But then the COVID crisis hit, and things went downhill. I felt frustrated and anxious. During this time, I started thinking about my strengths and weaknesses.

I realized that my frontend colleagues were really smart at handling complex algorithms and data. On the other hand, I excelled at creating precise user interfaces and components. I talked to the CEO about reshaping my role, but due to limitations, I couldn't grow as much as I wanted. 

Then, I came across this role, a design system engineer - something I had never heard of before. I saw that Ataccama was talking about things like #challengingfun and #unlimitedplayground. Exactly what I was looking for. I was intrigued, and immediately applied. Luck was on my side, and I got the position. Now, I'm doing what I love, and I'm genuinely thrilled about it. It’s really cool.

What does Flamingo do differently? What sets it apart?

Petr: In my perspective, our approach with Flamingo is distinct. We tailor it to the specific demands of the product. It's not a case of downloading a pre-built design system library from the internet and trying to fit your application into a predetermined mold, resulting in an appearance strikingly similar to other products out there. In the history of Atacama, this methodology has been employed. We construct our solutions—while not entirely from scratch—around the precise requirements of the customer. This sets us apart from off-the-shelf, generic solutions available for download.

A key factor is our specialized components, unique to us. They aren't readily available for download; they have either been ingeniously devised or have emerged from a close collaboration between designers and the product's real business use cases. 

Moreover, these components are our own, giving us the flexibility to enhance or introduce features whenever necessary. We're not constrained by third-party dependencies; instead, we are capable of aligning with our specific needs.

For instance, we employ tokens—nothing groundbreaking within the design system area, but we've tailored a set of tokens that precisely fits our requirements. These tokens embody attributes such as background color, and they're versatile enough to account for various states and interactions, such as warning, error, and informational colors. We have the freedom to define these as we see fit, and if the situation demands, we can seamlessly integrate additional variations.

We handle different error types in a dual manner: one for critical warnings and another for instances when the application encounters severe failures. This embodies yet another aspect of how we shape our design system—our ability to adapt to the dynamic needs of the application.

Jachym: I'd like to add that we're also responsible for our own documentation platform. This is quite important because it gives us a lot of freedom. We're not restricted by using some third-party service or anything like that. We have real autonomy in deciding how to handle things like documentation pages, examples, and showcases.

Moreover, I believe this ties into what Petr was talking about earlier. Whenever we create a new token or design a fresh icon, it's automatically generated and displayed on the relevant page. I think this sets us apart, and it might be different from how other companies operate. I'd like to highlight that we've made significant progress over the past year.

Petr: And one more thing, I might have mentioned this already, but our collaboration with designers and our copywriters is a crucial aspect. It's not just about the software – it extends to our work style. When a designer wants to introduce something new, it goes through a design review. Mira, our design system designer, or the team collectively decides if it fits into the design system. If it does, the next step is integrating it into the design part of the system in Figma. Then, it gets implemented into our design system – and it's not limited to our design team. Any front-end engineer can contribute to our design system.

This means that it's not just about the software; it covers the processes within the company as well.

Jachym: And I would also say it’s about a kind of lifestyle…

Petr: It's the company culture.

Jachym: Definitely, it's a collaboration of skilled individuals, each with their own unique abilities. This teamwork allows us to create an outstanding product, even though we're just a team of four people. However, it's been a journey from what we were before to what we are now.

In our team, we've got a fantastic copywriter who's really adept at language and written communication. His contribution is indispensable; without him, our documentation wouldn't be as impressive. And then there's our design system designer – he has a complete overview of everything happening across the different apps. His organizational skills are outstanding, which compensates for areas where we might not be as strong.

This mix of skills and roles really elevates our overall capability. Strengths of each member cover areas where the rest of us might have some gaps, creating a well-rounded team.

Petr: Our designer Mira is great at Figma, a design software used for creating screen layouts and manipulating elements. This software plays a crucial role in our design system. Mira's expertise with Figma is impressive; he has aligned the design process with the coding aspect, ensuring a direct match between the two.

Jachym: Also, since I joined this team, we've had two leaders. Both of them are really great guys. Our current leader, Albert, is a true visionary, and he has a way of guiding us that's truly exceptional. This has had a significant impact.

Ultimately, it all comes down to teamwork. When you have a strong team working together, like we do, you can accomplish amazing things.

Okay, for the last question, let’s go back. What can you remember about your first computer?

Petr: In our family, computers weren't a part of our household until I was around 15 years old, maybe a bit later. However, my dad always had some company notebooks lying around. He used to fix things like televisions, so there were often computers and even game consoles in our home. That's when I started to tinker with computers, initially diving into some MS DOS. I remember typing commands almost blindly and often not getting the results I wanted. I even attempted to get Microsoft Windows 3.11 up and running, but it was a struggle.

Nevertheless, the allure of software and the world of games from my childhood kept me intrigued. These experiences pushed me to learn how to navigate and use these systems. This curiosity essentially set me on the path of working with computers.

So, all along, I kept engaging with computers, even on various different machines. Since we didn't initially have our own computer, I was often tinkering with different setups. When I finally got my hands on a computer of my own, I felt experienced and quite familiar with how to handle it.

Regarding how I got into frontend programming, it's an interesting story. I stumbled upon a book in a shop that talked about creating dynamic web pages. It was available in Czech or translated from English. The technology it covered was quite obscure – Visual Basic Script. This technology only worked on Internet Explorer, and it's no longer supported; it's almost like a relic now. But, this was where I learned my very first programming lines. It was an incredible experience at 15. I felt this immense happiness when I saw my code in action, making things happen on the screen. 

Jachym: I've got some really early memories related to computers. When I was a little kid, we had a computer at home, although I can't quite recall the details. What I do remember vividly is that classic black screen with green or white letters – a basic interface. Even at that young age, I found myself captivated by how it all functioned. Pressing a key and seeing something happen felt almost magical, even if I wasn't able to read yet. I'd always bug my dad, asking him to switch on the computer so I could experiment with it. I'd type random things, mostly just hitting keys, and it was incredibly enjoyable.

A lot of my early experiences with computers revolved around gaming. Back then, after school, I used to attend afternoon classes, and during those sessions, we'd play games like "Prehistorik" and "Prince of Persia." It was a blast. Each of us got around 10 minutes a day to play a game. Year by year, the games kept getting better – the graphics improved, the gameplay got more engaging, and so on. As I got older, I started trying more things, hacking… and here I am now 😄. 

We’re starting with Jachym and Petr’s story but we’ll be introducing all the people behind the Flamingo design system right here, on the Life at Ataccama blog, every week in September.

And if you want to know what they’re working on right now, head on over to the Flamingo design system website!

More Flamingo

Figma Design Handoffs with Jan Patka

Developers, researchers, and product managers all wonder: What's the latest…

Read more

Writing the Flamingo design system with Dan

We're here with Daniel Bizon, UX writer lead, to talk about his role in…

Read more

Crafting the Flamingo design system with Mira

We're launching our Flamingo design system into the world, so…

Read more