Designing for Flutter
If you google “designing for flutter”, you’ll get some great tips on how designers can learn to code and how developers can design their apps with Flutter.
You won’t find much help for designers who are accustomed to designing for iOS and Android apps separately, and are now designing for a single multi-platform Flutter app.
There aren’t as many rules to follow as you may think. Our team has shipped a two major Flutter apps, and here's a few things that I’ve learned along the way:
Bring your unique design language.
The Material widgets are most numerous and also very flexible in their expression. This doesn't mean that Flutter apps are just Material Design for iOS, even though they can be.
The beauty of flutter is that you can make identical apps for iOS and Android but you can also specify where you want them to diverge. The Cupertino widgets are there to help bridge the gap so you can keep your iOS toggles — and even use them on both platforms if you wish.
The great thing about how Flutter's widget system works is that it's extremely flexible, so take advantage and design something original.
Get to know the animation classes.
Handing off our perfectly crafted UI animations from design team to the engineers has always been a challenge, but Flutter provides new tools to make our lives easier.
Before Flutter, UI animations were implemented by different team members, on separate teams and at totally different times. I have many memories of reviewing build after build from one platform trying to achieve what the other had no problem implementing.
Animation consistency across iOS and Android has never been simple, until now.
Flutter's Curve class provides designers and engineers a shared reference for choosing the right animation style. There are also pre-built Material animations to achieve some of the more fancy transitions.
We pick the style, set the duration and the before/after states, and it renders the same on both platforms.
Make use of Rive and other animation tools.
Designers now have control over the final animation output, using a tool called Rive.
You can make animations as you would in another prototyping design program, but with the benefit of producing a final product for your team to use in the app. These files can be added as easily as any other image asset.
You can also define states of your animation, if you want an event to spark a particular movement using the same assets.
The MGM Resorts app's Digital Key is a prime example of an animation changing state based on the user’s input as they interact with their hotel room door. The states you can see below are: Idle, Unlocking, Unlock-Success.
The app knows when the Bluetooth connection is made with the lock, the animation state to show is Unlock-Success which transitions beautifully from the Unlocking state, thanks to Nick Boes.
Another bonus about Rive we discovered recently is the ability to import Lotti animations.
Geoff Roseborough made a loading state for the website that we wanted to also use in the app and, with a little effort ordering the layers panel after import, we created a .flr file to use in the Flutter app.
Enjoy live working sessions, thanks to Hot Reload.
Flutter diminishes a lot of the natural awkwardness between a designer and engineer trying to make decisions together in real time.
Hot Reload allows engineers to see UI updates almost instantly without having to wait for a full rebuild of the application, meaning you can make UI adjustments and see the change right away. You can also quickly check how the UI will look across devices. No more silence waiting for a build to load, while both of you think you’ve got better things to do than collaborate.
Hopefully this has put your design mind at ease, and you’re excited for your team to build with Flutter. It’s a refreshing new way to design apps!