Figma for Agile Collaboration with Apirak Panatkool | Seven Peaks

Mr. Apirak Panatkool is a leader in UX design and education based in Bangkok, Thailand. As a UX Coach at ODDS, Apirak excels at helping businesses create seamless and user-friendly experiences. Previously, he served as the UX Evangelist at Omise Payment Gateway and UX Coach at Ascend Group, Thailand’s first FinTech unicorn. He is a former Google Developer Expert in Design and currently is an instructor at Skooldio. Mr. Panatkool is also a co-founder of UXThailand, a Facebook group boasting over 42,000 members, and is the founder of UXAcademy, which provides courses and thought leadership on UX/UI, Information Architecture and Figma. We caught up with him to share some of his insights prior to his upcoming plenary session at the BKK Design and Dev Leaders Meetup at Seven Peaks on February 28th, 2024.

In the dynamic realm of software development, collaboration between designers and developers is paramount to success. Figma, a powerful design and prototyping tool, has emerged as the frontrunner in facilitating this collaboration, particularly within the framework of Agile software development. This article discusses the pivotal role that Figma plays in aligning information architecture, user experience (UX), and design within the Agile methodology, emphasizing the need for continuous adaptation and collaboration.

The Evolution of the UX Community

The study of information architecture was an established discipline before user experience (UX) design. Information architecture studies the delivery of content, namely, how we make sure that the user gets the content they want – and also how to design an interface or website to fulfill this need. However, the landscape has evolved, and now, designers must find tested and proven ways to ensure users not only receive the content they desire but also experience a seamless design that offers solutions to their problems.

In Thailand, the concept of UX still has much ground to cover compared to other regions. This presents a unique opportunity for growth and education in UX principles.

UXThailand stands at the forefront of this movement, providing a community for sharing case studies, portfolios, and customer successes, highlighting the evolving nature and narrative surrounding UX. The UX community is continuously advancing, and in confluence, are constantly seeking and demanding tools that can enhance collaboration and adaptability. To illustrate how we approach this, UXThailand will be holding an upcoming multiple-day event with a preliminary session online (two days) followed by an in-person workshop (conference day and workshop day) for a total of four days.

Designing with Agile Development in Mind

While Adobe Illustrator and Adobe Photoshop remain unparalleled for drawing and photography, Figma has carved its niche for designers and developers collaborating on user interface (UI) design within an Agile context. Software development inherently requires constant collaboration and the ability to swiftly adapt to change. Figma's unique features make it the perfect fit for the ever-evolving nature of software design and software development.

Design that is not associated with software development or digital products, can assume that there will be a set point when the process is “completed” or “finished.” However, this is not the case with software design – where there is never a hard and fast “finished product.” As a matter of fact, the day that you launch your first completed design of a software product is actually the first day of the real development process – when you are able to test and validate your designs using real user feedback and data-analytics.

In UX design, there are two main components: continuous delivery and continuous discovery. Continuous discovery can be further broken down into three components: preparing content, validating content, and collaborating with the delivery team. For illustration, take a look at the continuous cycles as employed by Seven Peaks – an exemplary process that is undertaken by a leading driver of digital product design & development:

In the world of software development, where projects are often innovative and unique, continuous discovery becomes paramount. Figma's real-time collaboration, flexible modes for designers and developers, and features like auto-layout configurations highlight its valuable impact on the UX/UI design process.

As consultants, we are often faced with having to help our clients understand the difference between designing for digital products as opposed to designing an artwork, advertisement, or other traditional medium of creative design work. Waterfall contracts are made because of the belief that finished software can be treated as a completed project. At this point in time, many clients have learned from their past mistakes; results that are readily associated with trying to implement a waterfall model or defined work scope for something that is essentially, not. 

A common question that we run into from clients is, “How can other software projects complete their scope?” The answer is because many projects are repeats or re-implementations of things that have been done before, as opposed to digital product software development which is essentially creating something new. As a compromise, recommending Agile methodologies superimposed onto traditional workflows have gained traction – utilizing concepts like agreeing to incorporate man-hours into billing instead of trying to pre-define a rigid scope of work.

Changing Perspectives on Collaboration

Figma is for designers who want to work on UI and collaborate with developers. Software work needs collaboration, and the unique property of never having a finished product - means that whenever there is a change, it necessitates changes to be done throughout the entire design system. Software designers aren’t afraid of change, because digital products need to be flexible and adaptable; and are always changing. Therefore, one of the critical factors is how do we change the design and run into the least amount of problems?

In Figma, you can do everything in one file. If the project is not very large, this can be used - without even needing to use dev-mode.

When you have bigger projects, it might be preferable to use different files for different purposes and advantages - in order to have one for design systems, one for payments, or basically a file for each different module of an application. It requires an organizational model, able to synchronize multiple files of the same project, which is only possible with Figma Organization.

“Figma doesn’t just solve problems in design - it solves problems in collaboration.”

Figma Enterprise extends its capabilities for larger projects, offering the flexibility to organize files according to different modules of an application. With features like local variables (eg. light mode, dark mode, or multilingual versions of the same application) and version control similar to GitHub, Figma simplifies complex design processes. Notably, the tool's ability to tackle design and collaboration challenges positions it as one of the most valuable assets for project management.

Auto-layout configurations are another great example of a valuable feature in Figma that addresses cross-collaboration in design issues. It possesses the same attributes as with “Flex” in development, so both designers and developers understand each other, and also equally share the burden of making changes. This is my favorite feature of Figma.

Figma also helps to make design systems easier. In creating, designing or adjusting components, Figma makes it a breeze to apply these changes across the entire design. Design systems aren’t just about making components, but more importantly, it is about understanding the reasons and motivations behind certain design elements. This refers to the business reasons and gets into the user experience. 

Figma aligns seamlessly with Agile principles, allowing teams to navigate the challenges of software development where change is not only inevitable but embraced.

A Paradigm Shift in Mindset

Beyond its technical prowess, Figma is a catalyst for changing beliefs in working culture and career paths for both designers and developers. As a leader in any organization, how do you inspire and manage people so that they are encouraged to try different roles? There is a need to adopt changing beliefs in working culture and career paths for both designers and developers - we don’t have to limit ourselves to siloed career roles.

“Understanding software development makes you a better designer. At the same time, being a developer that understands design also makes you a better programmer.”

We want to encourage leaders to embrace a paradigm shift in management mindset. The focus should change from viewing individuals as resources with predefined capabilities to recognizing their potential for learning and growth:

“Don’t look at people as resources - in this perspective, we have definitions on what each resource can do or achieve. Humans aren’t resources, they have the ability to learn and grow into an infinite number of directions.”

This shift in mindset is crucial for inspiring collaboration, fostering innovation, and achieving desired business outcomes. By changing the fundamental way that leaders view their organizations, they can inspire teams to embrace diverse roles and cultivate a culture of continuous improvement, fostering innovation and success in the highly competitive and constantly changing landscape of software development.

Catch Apirak Panatkool’s Panel Session at the upcoming BKK Design and Development Leaders Meetup at Seven Peaks on February 28th, in collaboration with Figma. Register for the event here!