Oct 5, 2017
Figma is transforming my entire workflow
And it’s awesome!
Figma recently shipped the first full release of their Team Libraries system. It is no secret I have been obsessing over the development of this product. I went in skeptical about a web-based cloud app as an everyday design tool, and came out over-the-top impressed by not only the performance (in that it feels more responsive and native than you would ever expect a web app to feel), but also in terms of how much sense it makes for this type of tool to live completely in the cloud. If you were ever on the fence — Team Libraries is the perfect reason to get on board.
So in my third instalment of Figma-centric articles, here is what I would like to cover:
- Less tools, more designing
- Team Libraries and component organization
- How I am using Figma on a creative team
Less tools, more designing
I often read comments diffusing the conversation about design tools only to make the obvious point that better tools ≠ better design. This has always been the case — the tools will always take a backseat to great ideas. However, I do believe that any tool that reduces friction during the design process, has the potential to redirect time and energy back into actually designing. Since moving to Figma, there are fewer hurdles that I have to overcome. This means more time can be spent improving and iterating, instead of tackling the logistics of building, sharing, collaborating and maintaining files. Part of this, is the reduction of additional tools and services required to get the job done.
Some examples of additional tools or services I no longer require:
- third party low-fidelity prototyping tools (or poorly integrated plugins) to make simple click-throughs
- third party services/tools to facilitate collaboration and commenting
- third party services/tools to facilitate developer hand-off
- cloud/network storage service to share files or host libraries
- third party version control services/tools
All of this happens seamlessly in Figma, and it just got better—the new Team Libraries introduces an easy-to-use component publishing system that lives in the cloud alongside your design documents. What does this mean? Any component you design can be published to your team’s library and pulled into any of your projects. Each instance maintains a link back to the original master component (which becomes your single source of truth). If you make changes, publishing the updated components to your team’s library gives you the option to update them in any file which contains an instance. This of course means less time maintaining components, but more importantly, makes it much easier to create alignment and consistency when everyone is using the latest components.
Figma’s last major update (only 2 months prior!) introduced the first iteration of click-through prototyping. In seconds you can start linking screens together to deliver a prototype. It’s coupled with smart features where linked components will remember what frame you have linked to, and automatically create those connections for all instances. This is just one of many “little big details” in Figma that conserve precious time.
Along with that update they also delivered developer hand-off features, allowing developers, even without a paid account, to inspect and export assets. If you haven’t already done the math, the economics of Figma are very appealing when you factor in the amount of other subscription services you no longer require.
And on this note, I will also add that I appreciate how Figma is differentiating between viewers and editors—giving viewers the ability to comment and inspect files is a huge advantage and reduces a lot of friction when you don’t have to worry about adding paid users to your team just so that they can leave a few comments. Having to constantly deal with license and budget approvals at my workplace would be enough to make my head explode 😂.
Team Libraries and component organization
When I started to migrate my workflow from Sketch to Figma, I have to admit, I initially felt a bit lost without a place to put my components, or an easy way to access them. I was really missing the “Symbols” page. Enter Team Libraries. Now you can not only publish components from any project to the Team Library, you can also easily access any component within your file from the components panel. The left hand sidebar which was previously only reserved for layers, now has three tabs: one for layers, one for components (local to your document), and one for accessing the components in your Team Library (Tip: keyboard shortcuts alt + 1, alt + 2, and alt + 3 are really handy to quickly navigate between tabs).
The introduction of the components tabs scratched the “Symbols page” itch that I mentioned before. These tabs make it really easy to access the components which may not be part of your team’s library yet. These could be one off components, or those still in in the design phase.
Organizing your components in your team’s library can be accomplished in a number of different ways. You may choose to setup one master document to house your entire design system, or break it up into multiple files. You can also simply publish components from the documents where you have authored your master components without migrating your components to their own file. This works great, but I find it much easier to maintain documents dedicated to components if you have a large UI system. Because of the way Figma will organize components in the Team Libraries pane, you can use frames or groups to sort them into logical buckets (ex: buttons, tabs, form elements, alerts, etc). Changing the background colour of frames or groups will update the preview in the sidebar. Of course the possibilities are endless when it comes how you organize your system. William Newton wrote a great article about how he is organizing his components at Gusto here.
How I am using Figma on creative team
Since many of the Figma success stories I’ve read about are product centric, I thought I would share my experiences, thus far, of working with Figma on a creative team. The team I work on is small, and I am the sole dedicated digital designer. You may ask…what need does a single designer have for a cloud-based tool with multiplayer and component libraries?
Presentations and sharing
Let’s start with multiplayer. I see discussion about the lack of need for multiple designers to be working on the same file. While I’ve already experienced great success in using it to collaborate with other designers to quickly generate and riff off ideas, I see a lot of benefits to non-designers. For example, we often have weekly or biweekly check-ins on projects where I am required to present a status update. Previously, in these updates I would often share my screen (low quality, scaling issues, additional software, “please promote me to presenter!” ), or I have to export still comps and distribute them so collaborators and stakeholders could view them at 100% size. Soliciting feedback was a hassle, and usually involved me scribbling lots of notes, or combing through comments in PDF files.
By introducing my collaborators to Figma, I can simply share a URL to the project prior to the call. I don’t have to prepare a presentation, or export anything. I can just use Figma! Those on the call can simply click the URL, and they are now looking at the same file that I’ve been working on straight from the tool.
By clicking my avatar in the top right, they can observe my screen, and I can deliver my presentation. Along the way, any user who wants to go back and investigate something in more detail, can simply switch off from observing me, and browse around the different frames without disrupting the presentation. Any questions or feedback are easy to address because I can simply switch to their view to see what they are looking at and follow their cursor. If required, I can also produce variations, edits, or suggestions right in the document for everyone to instantly provide feedback on. If something is too big to tackle in real time, I often leave comments throughout the design with the commenting tool so that I can reference them later. All of these things lead to quicker iterations, less note taking, less-back and forth , and ultimately in faster approvals.
The same is true when sharing work for feedback outside of live presentations. Figma has been steadily adding support for live embeds (essentially an iframe which displays your Figma document) for many leading project management tools. There is no exporting comps to your desktop and uploading to share. You are simply creating a link back to your live document, eliminating confusion around whether or not someone is looking at the latest version.
Guidelines
We have also been using Figma to produce specification documents for various web properties. Rather than producing and maintaining a time consuming PDF, we can share a Figma url that includes an at-scale version of the web property, with notes, and design guidelines for internal content creators, developers, and website authors to reference. Along the way, if we need to make amendments, because the Figma URL is live, we just have to make changes to the design and its ready to go.
An evolving process
As we begin to dive into a massive website project, Figma is quickly becoming an essential part of our process. We will produce our wireframing and low-fidelity prototypes in Figma all the way through to the the visual design phase. During this process we will begin establishing components and push them to the team library for use across many files. As we vet out the components in different scenarios, and the design evolves, being able to make modifications that are global across all files will be a huge time saver. Come time for development, as we test out the component designs in code, any modifications to the design due to implementation will prompt us to once again quickly update our components to reflect the production environment.
Having that complete library of components which reflect production will be a game changer for our internal processes when it comes to publishing new web content. No longer is the process trapped within the web team, where the design team is involved only to provide design recommendations or a handful of assets, our team can now respond by quickly mocking up pages in a variety of viewport sizes by leveraging our pre-approved and developed component system from the Team Library. Buy-in and approval now resides in our team (along side brand enforcement), and website admins now have a pixel-perfect blue print for easy implementation.
Using this tool, and interacting with the team at Figma along the way has been an awesome experience. The agility of the team is impressive when you consider how fast they are adding innovative and stable features to the product, and not only listening, but actually fast-tracking implementation of user feedback. It instils a level of confidence that any desired features that may be missing are probably not that far down the road, and is probably the reason a link to their release notes has found a place in my bookmarks bar. My time spent in Figma is usually the most enjoyable and most productive part of my day. I’m hoping my excitement within the office is contagious as we bring on more collaborators.
Please share your experiences!
For those located close to Waterloo, ON, I will be co-hosting an evening at the Accelerator Centre where I will be presenting a live demo about Figma and its capabilities on October 24th. More info here.
Disclaimer: Figma found this article to be helpful for other designers, so they’re advertising it on Twitter and Facebook with my permission.
