Web design without a web designer? Xfive turns to Figma.
Since 2006, Xfive has gone from a two-man startup with a few remote contractors to a thriving web development shop with offices in Krakow, Melbourne, and San Francisco. The company provides development services to digital agencies, startups, and enterprise companies alike.
Two years ago, Xfive rebranded itself and launched a new website. Since then, the business has continued to rapidly progress, while parts of its website — including the homepage — lagged behind.
Several prominent areas like Customers and Work were simply outdated, but more fundamental issues were at hand — including a confusing navigation scheme, a multitude of CTAs vying for attention, and a swarm of landing pages to navigate (and maintain).
Due to the nature of their work, Xfive does not usually employ designers. Typically, clients provide the designs and Xfive executes on development.
Enter Lubos Kmetko, an Xfive content producer. Lubos had recently taken Figma for a test-drive as part of writing two comparison articles covering best UI design tools for Windows and best tools for designer-developer workflow.
Not a designer by trade, Lubos felt confident that he could handle the redesign with Figma. But he needed to make sure all stakeholders had a platform for reviewing comps and submitting feedback.
Prototyping and collaborating in Figma
Lubos used Figma to redesign the Homepage, Customers area, and Work sections of the website, which included streamlining the global navigation and reducing the number of CTAs and landing pages.
After creating mockups of each page, Lubos sent a preview link to various stakeholders spanning marketing, sales, production, editorial, and development. Even the chief operating officer wanted to review and feedback on the proposed changes.
Since Figma is 100% cloud-based, anyone with a browser could review and comment on the designs. “It was as simple as sending a link to the stakeholders,” said Lubos.
The team jumped into review the comps, using the Comments tool to exchange ideas and offer input. Often, Lubos was incorporating feedback in real time and/or explaining design and user interaction ideas to the team — all within Figma. Meanwhile, all feedback, changes, and updates were stored and remained in sync.
“By far, Figma offers the best workflow among the current UI design tools, especially when combined with prototyping and commenting,” said Lubos.
Milosz Bazela, COO and Head of Xfive, especially liked the ability to view and comment on mockups within the browser. “Thanks to Figma, it was easy for everybody — from marketing managers to copy writers — to access designs at all stages of development and to provide very specific feedback,” said Milosz.
Streamlining designer-developer workflow
Once comps were approved, it was time for the designer-developer handoff. “Figma works great for designer-developer collaboration and, during this project, it really proved itself,” said Lubos. Instead of sending files to developers via email or Box, and worrying about version control, Lubos shared designs via Figma.
Developers opened Figma in the browser and used Code Mode to inspect design files without using external tools like Avocode and Zeplin. Through Figma, they could inspect and export CSS as well as iOS and Android code.
“With Code Mode, I got all the specs I needed — whether it was size, color, or padding — which removed any guesswork and helped me code faster and more accurately,” said Aleksandra Worhacz, Front-end Developer at Xfive.
“The way Figma supports collaboration is simply amazing. It’s like Photoshop married Google Docs. But, surprisingly, Figma is much lighter and simpler,” added Artur Kot, Front-end Developer at Xfive.
Just the beginning…
For Xfive, this is just the beginning. Using Figma for its redesign became an important testing ground for using Figma on client projects. Lubos imagines creating and sharing functional prototypes with teammates and clients and collaborating in real time — instead of the “old way,” (attaching PDFs and JPEGs to an email in order to communicate functional design ideas).
“From sharing design prototypes, to discussing implementation details, to developer handoff, Figma makes collaborating so much easier,” concludes Lubos.
