Athletics

Software Spotlight: Figma

When it comes to digital collaboration tools and software, there’s no shortage of options on the market. For years, Athletics relied heavily on Sketch for coordination between site design, UX, and development. While we built a number of sites we’re very proud of using this platform, including Pulitzer Arts Foundation, Hotel Vermont, Meet NYU, ArchLeague, Urban Omnibus, we recently migrated away from Sketch to Figma, enticed in no small part by the fact that Figma works on our browsers of choice and as a desktop application. This flexibility made it significantly “lighter” to work with — a tremendous asset when building complicated websites. Conversely, Sketch required us to store files on the desktop, slowing down machines, and ultimately, slowing progress. In the intervening years, our decision has been validated time and time again, significantly shaping the way we structure teams and deliver work.

Single tool

Prior to using Figma, we bounced from Sketch to InVision to Avocode to Principle, a circuitous route from design to development. Figma changed all of that, bundling the functionality of each of these applications (and more) into a single, streamlined package. Basing workflows around a single file for design that can be presented to the client and inspected by a developer, Figma affords us prototyping tools that link screens together for a more immersive review experience, including smart animations that approximate simple motion conventions and interaction principles. Figma is not only useful in design, but also in the critical wireframing phase, particularly when it comes to prototyping key experience features and testing ideas in a “realistic” environment. And never resting on its laurels, we’re impressed by the constant stream of new plugins made available to users.

“Figma stands on the shoulders of giants, but exceeds expectations around every turn. The way it spans the disciplines of design into web development is so seamless, I couldn’t imagine going back to another way of working.”
Ross Luebe, Technical Director, Athletics

Team structure

Figma integrates well with our team structure, consisting of two primary people, a Design Director UX Lead and one or more UX Designers, supported by a Technical Director and Project Manager. Building tight module and components libraries within Figma allows us to open up the project to additional designers, while the ability to create team or project hubs promotes collaboration by assigning access to multiple designers.

“Figma has allowed us to get closer to a single source of Design / UX truth across client, design, and development teams than any other tool thus far.”
Matt Owens, Creative and Project Lead, Athletics

Remote work

The issue of remote work and collaboration is front-of-mind for creative businesses at this moment in history. Figma has proven an indispensable tool in the WFH period, epitomized by three capabilities. First, Figma allows you to “follow” someone within the app. Non-designers, for example, can follow designers in presentation or design mode, which is smoother than screen-share, and easier to press back and forth between people without disrupting the share. Second, Figma makes it easy to peek at what work is being done or has been done, all within the same file. And third, commenting functionality allows us to give detailed feedback on design files. For these reasons, Figma has been a major boon to design and development teams spread out around the world.

System management

Libraries are a key element of Figma’s usefulness. We use the application’s “Team Libraries” in a standard way: each project has one, with components being pulled into each working file within the project, keeping things consistent and timely. Setting up tight libraries makes making updates across multiple component instances faster — with one change to the library, multiple templates will be changed accordingly. Setting up tighter libraries also means we can easily transfer site components to the client’s design team when the time comes for them to take ownership over the product.

“The way you design components and modules in Figma is very close to how they are built in development, which is helpful when you’re trying to figure out certain interactive behaviors.”
Jaime Patino-Calvo, Interactive Designer, Athletics

Client education

The issue of client education, meaning on-boarding client teams on the software we use to coordinate and collaborate, is familiar to anyone working in a (commercial) creative context. We introduce clients to Figma early on, helping them get familiar with it as a design and prototyping tool. The use of Figma also saves our team plenty of time translating working files into presentable decks or powerpoints. This has the added benefit of giving clients access to clickable prototypes to tell a richer, truer story about the work-in-progress. Our clients have responded positively to Figma as a platform for progress, and as clients become more and more digitally savvy, we foresee this trend only increasing.

“Figma really streamlines the design process in that it allows us to go from sketching, to design, to presentation without having to switch tools.”
Triana Thompson, Designer, Athletics
“As a designer, Figma’s built-in prototyping features make it easy for our team to give clients a more accurate and real approximation of the final experience before development begins.”
Ellen Voorheis, Designer, Athletics

Case Study 1 — Prototyping

To illustrate Figma’s profound prototyping capabilities, let’s explore a recent project in which Figma was the bedrock of our design-dev workflow. ServiceNow is a digital automation expert helping businesses reap the benefits of digitization and automation on an enterprise scale. For the past few years Athletics has worked with ServiceNow to launch its interactive digital publication, Workflow Quarterly, with six issues published to date. With ServiceNow, we relied on Figma in two main ways: as a high-fidelity prototyping engine, and as a design-development communication tool. For the former, we sought to build the second issue of Workflow Quarterly upon a more dynamic system of layering than than general site experience. Since our vision was less traditional, we tapped Figma prototyping functionality to approximate the experience, helping hone in on the design and experience with the client faster and easier. By the time our development team came on board, the idea was fully designed and reviewed, creating less opportunities for roadblocks and detours. With the design and UX system and corresponding style guide, components, and modules built out in Figma, the latter phase of the project focused on extending the system and clarifying the nuances of the UX. Some content ideas required a Figma prototype that went through formal presentation and review to test and validate the concept. This approach allowed us to present fully realized variations for modules such as CTAs and Table of Contents. For content such as interactive data visualization-oriented features, Figma was used in a more loose fashion to facilitate conversations around development possibilities that were then implemented in code. It is this versatility between creating high fidelity prototypes on one end of the spectrum and making loose sketches that can inform development on the others that gives Figma its real power and flexibility for our team.

Case Study 2 — Collaboration

To illustrate Figma’s critical collaboration advantages, let’s have a look at our recent project with The Counter. The Counter is an award-winning investigative newsroom exploring the American food system. Having worked with The Counter to define a new brand name, brand strategy, and visual identity, we were poised to kick off the design and development of their new editorial platform. We applied Figma for initial sketching and experience definition, mainly working with loose sketches in an independent capacity (individual designers working discretely). As the platform came into focus, we began working together in a single file, setting up a team library to share modules and styles, and using pages to track rounds of design and progress over time. These pages were easy to refer back to, and keep as separate links for sharing with the client for review. As designs were finalized, a final, approved file was set up as both a reference for the client and for the development team, complete with detailed annotations. The library and final file have continued to be extremely clear and useful reference points as post-launch changes emerge, and the team’s nuanced memory of why certain things were done fade.

Conclusion

Over recent years we have seen workflows for design and development merge closer and closer together. Figma is a reflection of this inevitable goal of having design, user experience, and development work more seamlessly and efficiently. Tools like the latest version of SketchAdobe XD, Anima, Webflow and many other solutions are working to solve these similar challenges, but we have found Figma to be the best solution for working on projects of scale with our highly collaborative teams. We look forward to Figma’s evolution and are always open to hearing about other creatives’ software preferences and workflows. When it comes to bridging design, user experience, and handing off to development teams, there is no one right answer. Just the best solution for the moment.