How we use Framer X at Wirex to build a great fintech app
At Wirex, we love design. It’s where all things start — from an idea and hypothesis to building a real app. As product designers, we don’t just create nice-looking screens, we find the best solutions for our business and users. That’s why strong design processes are crucial for us. And that’s why Framer X is one of our favorite design tools.
Why Framer X
We live in a time when static screens aren’t enough to build a great app. Stakeholders want to see the real business solution, not just imagine how it could work once it goes live. Developers want to know how the design component behaves, and how it will respond to different conditions and constraints. Designers want to spend less time polishing pixels and checking if the design components are up to date with what’s on production.
Framer X covers all of these cases. Its visual interface is tremendously smart and predictive. You can create responsive layouts and components on the go, without having to think about the device’s screen size.
The code capabilities of Framer X allows you to connect your production components and use them in the design process. You can also create your own interactive components with animations and micro-interactions, organize your components into a shareable design system, and reduce the gap between design and development.
And finally, Framer X allows you to create high-fidelity prototypes in minutes and start thinking about how your solution will work, not just how it will look.
How we use Framer X
Design System Not UI Kit
What a product can survive nowadays without a design system? Most likely, you created yours in Sketch, Figma, or Adobe XD. You can easily build your design system in Framer X too and there are some big bonuses.
Framer X gives you Team Packages, where you can place and share components with your team. We started our design system by creating separate packages of the common basic elements for all our platforms — typography, colors, icons, etc. Using these basics we built separate components packages for web and mobile applications. If you change the link color in the basic package, all the components that use this color will be updated as well.
Creating a design system isn’t enough if your team can’t use it. We created a fully interactive library of components for our web platform. Then we published it on our own Wirex Design server. Now anybody in our company can view and play around with components, explore the code behind it and learn more about how and when to use them.
Interactive Components
We’ve created a set of interactive components for our design system. The first cool thing about Framer X is that instead of handling a number of instances of one component with different states, you can have one single component. You decide what properties and states you want to manage and create customizable property controls for them.
The other cool thing is that these components can be fully interactive — buttons respond to hover or tap actions, you can type text in input fields, select options in dropdowns and so on. They act like real app components that allow you to build high fidelity prototypes later.
Also, you can add logic to your components. For example, we have a reference label in the exchange transactions where the crypto amount is calculated in fiat. We added exchange rates to our component so the reference amount is recalculated automatically every time you change the transaction amount. Working with real data is crucial for producing scalable solutions.
Rapid Prototyping
For me, the main power of Framer X lies in its prototyping capabilities. As product designers, we don’t draw buttons and icons every day. We solve business and user problems, and make our app better while we’re at it. And when you can build, test and share the solution as it would appear in production, that takes your design solutions to the next level.
Using our design system components, we create real-life prototypes and upload them to our Wirex Design server and share it with the team. Everybody can open the mobile prototype on their smartphone (better to user Framer Preview for this) and it will fit any screen size. Teammates can interact with your prototype — swipe, scroll, tap, navigate between screens, type in inputs with a mobile keyboard and, and so on, to get the feel of the real app.
Using overrides you can connect different components and add logic in your prototypes. You can validate errors, change components’ states depending on certain conditions, add animation and transitions. With these high-level prototypes, your team can concentrate on the solution itself and not what it looks.
Overview
Framer X has a huge potential for product design. It simplifies your work process, and allows you to deliver better solutions for business and users. We still use Sketch + Zeplin for our delivery process alongside Framer X for prototyping. But I expect that we will make Framer X our main design tool going forward.
