How we use Figma at Studio Lenzing

We already talked about our 4 favorite tools a couple of weeks ago: Notion, Miro, Slack and, obviously, Figma. (If you missed it, you can catch up on it here).

In this article, we will tell you how we set up and organize files, how we work internally and externally with clients and partners, how we structure design critiques, which plug ins we love most and why LoFi prototyping is so easy with Figma.

Figma: Collaborative Design

Although this has already been said, too, we cannot emphasize too much how great a tool Figma is as it combines many tools in one. Rather than switching from tool to tool, feeling stressed by too many tabs and programs filling any desktop space, Figma allows to have it all in one which simplifies and relaxes all of the design process. And the best part is that we can share anything we like at all time with any person included. Figma allows people to work on the very same project / file at the very same time, bringing feedback, transparency and collaboration to a whole new level. It is not unusual that we are two designers, one copywriter and one researcher all tinkering within the same project, focusing on our own tasks whilst also catching up with everyone else's progress, thoughts and ideas. Besides, we can also have stakeholders, clients, project managers etc. pp take a look and give their two cents to the whole story, too — if that is what's needed at a certain point.

Setting up files with Figma

Right, let's have a deeper look at how we use Figma. Before talking about that, we'd love to take a moment to say that this is not a "How to xy" kind of article. You might find a different need and style with and for using Figma and that is all cool. If this article gives some impulses and inspiration — great. If not, also great. This is our subjective perspective and even though we like it as it is, we also know that there are many other views and ways on how to use Figma.

We like to see Figma like a white canvas, giving you any space and freedom to make and create. Which is something we truly enjoy, yet we also found ourselves struggling first as in how to organize and structure our files. Since there are no regulations or templates by Figma, it is easy to jump right into the design process, skipping any need for structure and thereby getting lost in chaos. Which, in turn, harms any collaborative process, especially when people work remotely without talking and working face to face.

So, let's get deeper in our structure. Most of the work happens throughout Wireframes, Design WIP and components. These are our primary sections of Figma files. We use the wireframes page to store and sort all our visualized ideas. Often, we use pro create and an iPad to create wireframes. This helps us to quickly load the wireframes into Figma which makes them accessible to anyone involved. Then, all the design magic happens in Design WIP. We categorize this page by big headlines like "Playground" or "Ready to discuss". This helps all participants to find their way around.

In general, we are always transparent with our designs, no matter what status they have. This transparency also helps everyone to orient themselves. In case that there is no design system, we build all our main components into the components page. From our experience, it makes sense to quickly build the components as main components and implement them on the exploration screens as in the process, you quickly reach the point where you realize: "Crap, I needed main components now." Most of the times, here is already a lot of exploration of the same component. All the main components are arranged horizontally and with category headlines in this page.

The Secondary part is divided into: Cover, About, Resources and Export

In the cover page you will find the cover of the project, the logo, maybe a title, e.g. "Website Redesign." In the about page, one will find all important information about the Figma file. Contacts to the design owner, a roadmap including all tasks and milestones, as well as links to assets, Dropbox files, Miro and Notion boards.

In the resources page, we put everything that already exists about the topic and that matters to our design process. Explorations, existing designs, critiques etc. Lastly, there is the export page. This is where you will find the screen export, PDFs, user test learnings, basically anything that one might wish to export.

‍

Working internally & externally with Figma

As transparency is written with a capital T at Studio Lenzing, everyone within the team has access to every file at any given time. It helps us feel connected and stay in touch and also makes it easier to fill in for someone in case of holidays or sickness.

As mentioned, we love to work on the same project / file at the same time. In this way, we can complement creatively, be proactive or reactive without needing to explain ourselves or our process all the time as everyone can see what the other person is working on. As a result, it's easier for us to completely dive into the creative flow and give or receive feedback throughout.

Apart from making neat and clean designs, we also use Figma for any internal project documentation or to build LoFi prototypes to show and give an idea of our designs (more on that in just a minute).

Sometimes, a project needs researchers, developers, engineers or project managers to take part in the process. With Figma, we can decide which parts or versions of a design to share in order to keep it easy and manageable, and also have other people comment without being able to accidentally deleting or changing a design.

Variants & Interactive Components with Figma

A couple of months ago, we signed up for testing and using a rather new feature called "interactive components." And yes, we really think that this feature opens up another world to us. With "interactive components" we can design and work with prototypes in an even more interactive way and simultaneously reduce time, effort and stress whilst working.

Speaking about great additions, another very useful feature is called "integrated variants". To start with, Variants are a collection of components sharing properties, but at the same time having different values for those properties. These component sets can either be one or multidimensional and on primary, secondary, tertiary level etc. Working with and duplicating these components without Variants can be quite painful, as it can get quite a paper chase the more components and dimensions you have. With Variants, you can simply create / find a single component holding all possible variations. Again, this shows how Figma combines many tools and skills within a single platform, making printable and other tools obsolete and showing the future of interactive work and design.

Of course, we are aware of the fact that this feature is still in beta and certainly has its rough edges just by being a beta version. Yet, we already used it to build prototypes and click dummies and even applied it when user testing.

Design critiques with Figma

At least once a week, but often even twice or thrice, we meet on the couch in front of our big TV and mirror Figma to discuss our designs and processes. In general, we have a weekly design stand up where everything will be discussed. Yet, sometimes a project needs more attention, love or a quicker response, leading to a second, third or fourth design date in front of our TV.

When there's no urgent deadline or quick adaption ahead of us, we like to take time and present and discuss our different designs, projects and thoughts in detail. This way, we can fetch the other ones where they are standing, bringing everyone to the same status quo and having space to jointly discuss what's missing, needed, wished for or dreamed of.

Every designer will show their projects and the designs, talk about processes and changes whilst comments or proposed modifications by the rest of the team can be directly noted in Figma throughout the comment function. This way, we can talk and discuss and document without needing to stop the talking and flow. These comments will then be worked through, serving as gentle guidance.

In the end, our designs live by the feedback we give. At Studio Lenzing, constructive critiques are part of our DNA and creatively and warmly shape the work we do.

Favorite Plug-ins for Figma

When asking Malte, the Figma's top three plug-ins are these:
Autoflow
Lottie Files
Mapsicle

LoFi Prototyping with Figma

Looking back at the days when Sketch was our design tool of choice, this tool was all about design and design only, outsourcing prototypes and the like to other programs. Which was okay back then, yet meant extra work and steps to the final result. All the nicer, that Figma allows us to bring prototyping and designing altogether.

We're obviously talking about Low Fidelity Prototypes that serve as a first impression, yet it's often this first impression that is asked for and that we can now easily produce in one breath. This LoFi prototype helps to really see, feel and explore the product that we're building. What makes sense? Where are difficulties or discrepancies we didn't see or think of before? Does the whole product make sense the way we designed it? Is it fun to use and experience?

Prototypes help us a lot to question and proceed the design process we're in. At the same time, they're the easiest way to make our thoughts and ideas tangible for stakeholders and clients who can take part in the process and get a better understanding of what we do and how we think.

To us, Figma seems pretty straight-forward. We find it to be a fantastic collaborative digital design tool. However you like to use it, we hope you enjoyed this little insight and look behind the scenes of Studio Lenzing.

‍