Take your wireframes to the next level with FLOW
At Little Miss Robot we’re always aiming to balance efficiency with creativity, both in the products we make and the way we work.
FLOW, short for Flexible Library for Optimised Wireframing, is our own internal library which allows us to easily create detailed wireframes, without being too restrictive. We use this as a starting point to keep everything efficient & consistent, but they still encourage creativity and some custom work. No pre-made templates!
What will you find in this library?
The name kind of says it all, FLOW is a library of components that you can use and share throughout your team and use as a base to build your wireframes on. It only contains high-level components with a few basic options like changing colours, label, sizes…
You can build flowcharts in no time
Since wireframing is more than just screen layouts we’ve included a few components that may come in handy, such as a flowchart system. You can easily customise every element by using the override panel.
An extensive yet easy to use icon library
At Little Miss Robot we work for very diverse clients that range from transportation and education to banking, batteries, ice creams and insurance… It’s always a hassle to find icons that can fit those specific categories. You don’t want to be losing time in finding icons sets and then tweaking them to be “sketch-proof”. In the wireframe phase you want to have clear icons that get the message across and are easy to fetch and use. That’s why we also combined FLOW with FLOW-icons. You can easily search for specific as well as common icons and they’re all “sketch-friendly” with easily switchable colors. We used the awesome Material design library from Google, it’s a pretty neutral set and it’s responsive.
Why did we build it?
We wireframe for almost every project and it became quite clear at some point that we need a systematic approach to wireframing. We don’t want to reinvent the wheel on each project and we want to maintain consistency across different team members and projects.. So the idea started to grow that we should have a template, which was/is quite handy. Then sketch integrated the shared library system and that’s when FLOW really took off.
“Now we could have one source of truth for all the designers in the company and have a branded wireframe library.”
Most importantly we could focus on what really matters and what is specific to each client; details, animations, storytelling, complex components…
It was also a great opportunity for us to stop a moment and think about what we were doing. Why should we use wireframes? How detailed should they be? Are they useful for a visual designer, a user test, a developer?
The challenge was to come up with a system that allows us to be creative without spending too much time on an early prototype but still having a clear concept that we could navigate, test and quickly change and present to clients.
How does it work? How to optimise it?
Optimisation 1: Use it as a shared library 🔗
We meant for FLOW to be used as a library, as we are fervent defenders of having one source of truth for efficiency and consistency. Using a shared library, will allow you to update all your files at once and keep your working file free from symbols, so lighter. But you can surely use FLOW as a template file to start your project. Then you’ll have access to all the components in your symbol page.
Optimisation 2: Combine it with Sketch runner for light speed 🏃🏃
Sketch runner’s plugin will really make the FLOW fly. It allows you to search through your symbols or shared library, amongst other really practical things.
Optimisation 3: Combine it with Paddy for that silky smooth sensation of automated button resizing 🍭
Yes, FLOW is compatible with the plugin Paddy which allows you to define padding for elements and then when you override the symbol, the element automatically resizes… Pretty neat!
Get creative! Stay flexible!
Make it your own or brand it with your company’s style. Simply tweak the symbols, save it and it’ll be updated in all your files.
Nested symbols allow you to change everything, so play around! An inputfield can easily become a search field, a checkbox option can become a link…
👉 Download FLOW.sketch and FLOW-icons.sketch here
👉 We’d love to hear from you, how you put FLOW to use and how you added to it. Let us know!
