How Developers and Designers Can Collaborate Using Flutter

Last updated 123 days ago by Julia Park


The Pain Point of the Designer-Developer Handoff

A common pain point in the work between designers and developers is the back-and-forth to refine a digital product. A developer takes a first pass at designing a product based on a designer’s vision. The designer wants to tweak some things after testing early versions of the product. But conveying exactly what opacity she or he had in mind or how a drag and drop should behave isn’t exactly easy. Often, designers create another prototype just to explain what changes they want. This takes a lot of effort, time, and communication — especially for applications rich in animations and transitions.

At Favorite Medium, we asked ourselves how two teams from disparate background in education and in work experience — can collaborate more efficiently. How can we creatively address the handoff between designers and developers? What kind of workflow can reduce unnecessary steps, save time, and help us create better products?

A New Tool: Flutter

When Google announced Flutter in Google I/O 2018, we were excited about this new framework that enables deployment of native apps on both Android and iOS from a single codebase. To us, it looked more impressive than other cross-platform frameworks. Offering more flexible and beautiful UI possibilities, it also seemed to streamline the workflow between designers and developers through close collaboration within the tool. We decided to try it out ourselves.

One of Flutter’s biggest promises is a high-performance universal animation framework that allows developers to build custom transitions and animations with native performance. We can add animations to nearly every widget in our application, starting with simple click animations for buttons all the way to complex transitions between screens. In combination with hot reloading, playing with those animations is easier than ever before.

However, compared to simple values like button color or font size, animations have more values to tweak like animation speed, timing, easing, and keyframes. They’re also harder to adjust and debug, leading to increased back-and-forth between developers and designers when it comes to making changes.

Fortunately, Flutter is a very flexible framework, giving us freedom in how we can approach these problems. Here, we share an example of how we improved designer-developer interactions in a Flutter-based project, with comments by our designer Julia Park and developer Slava Olenin.

Read full Article