“Do things that don’t scale” is great (even if seemingly counterintuitive) advice often given by Paul Graham/Y Combinator. This is something that I have taken on board here as the founder; one of those being the number of products we release. As of today, we’ve just turned 6 months old, which means we’ve released one Figma plugin per month on average since we began.
While this may not be something that’s scalable, it was very important to solve some of the most urgent and solvable problems that I personally faced on a weekly or daily basis over the last 10 years working in digital agencies.
There is a list of about a dozen problems we need to solve (and will solve with enough time) first before we start focusing on much bigger and fundamental problems to the way we think about design and development. Our end game from day one has always been that the distance between design and production should be zero; so every decision we make is designed to take a step closer to that reality, never further away.
With that being said, I thought it would be nice moment to take a snapshot of the best Figma plugins we’ve released so far. While the title of the article may be slightly delusional, I’m really proud of what has been accomplished so far, and we’re really only just getting warmed up.
TinyImage
Export compressed JPG, PNG, SVG, WebP, GIF and PDF files from Figma, reducing files sizes by up to 95%.
Every day in my previous agency, me and my fellow designers/developers would need to export images from Figma and then figure out the least painful way to compress them afterwards. This could involve opening Photoshop, going onto a shady looking website or trying a command line tool. Regardless of which method we used, the fundamental problem remained the same: assets change all the time (due to design revisions or other creative/content reasons) and we would inevitably need to re-export and re-commpress dozens of assets per day.
TinyImage was designed to remove this middle step entirely and shift all of the compression into middle of Figma’s own export functions. What started out as simple JPG/PNG compression back in January has evolved to include support for: JPG, PNG, WebP, SVG, PDF and GIFs - each format with their own unique settings and features in the Figma plugin.
Thanks partly to the awesome feedback and support from early adopters, I’ve been able to prioritize and ship the features that were clearly going to solve the biggest pain points in there workflows. This conversation does not stop, and it’s been great to continually optimise and find ways to improve the Figma plugin to solve these daily problems for some of the top design teams in the world, and there’s still more to be done to make this the best Figma plugin it can be.
Bannerify
Animate and export production ready banners from Figma to HTML for different platforms in seconds.
I would say this is the most personal Figma plugin so far; I used to dread getting caught up in the banner feedback loop for large campaigns. Don’t get me wrong, designing and working with banners in Figma as a developer was a big step up from the Photoshop days (shudder), but once again, the only thing you can count on is a dozen revisions of the banners. Just when you thought you were done (and free), there would always be yet another round of client or internal feedback that meant re-exporting hundreds of assets and updating all of the HTML and CSS for dozens of banners to “roll out” the brand new design updates.
This was soul crushing; and eventually all you can do is laugh, if only to stop yourself from crying in the corner instead.
I had been working on the Bannerify Figma plugin since I was invited into the Figma Plugins BETA program back in August 2019. It was an extension of another tool I had built previously (weirdly enough, called “Figmatic”) that used the Figma API to convert a Figma of banner designs file into HTML/CSS. It was very crude, but it proved to me that the idea worked. Once Figma plugins came along, I realised that all the questions I wanted to answer around “how do we add animations” could be solved by building out a real animation timeline interface within Figma itself.
Releasing it earlier this year was a great feeling; and I’ve had awesome feedback from many teams who suffered the same problems I did in my previous banner projects. Now, the entire process of exporting banners from Figma to production ready HTML/CSS has been automated, and building another “revision” is literally a one-click process. To me, purely in terms of the amount of pain and time that this Bannerify removes, this is still the best Figma plugin we’ve released for heavy automation so far.
Favvy
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Creating favicons for websites has always been a bit of a dark art, as the “documentation” on the subject is thin (at best). Over the years, there’s been a bunch of different requirements for different devices, but along the way, few people have dropped the excesses of favicon images and files in favor of a more optimal set of icons needed for a website in 2020.
Favvy is a Figma plugin that automates this entire process with one-click, by using a single square Figma frame as the source of truth. It generates all of the images, code and files required that you can just “drop in” straight to your website or PWA (progressive web app), with no other configuration or manual work required to make your favicons work as expected.
You won’t have to manually look up the latest articles on favicons or create them with a combination of design tools or web apps, now you can keep a single version/size of it in Figma as your source of truth, and update/re-export it as needed for the lifetime of your project or website/PWA.
The simplicity and speed of favvy makes it the best Figma plugin for exporting production ready favicon packages directly from Figma.
Pitchdeck
Create and present slide decks with animations, videos and links from your Figma designs.
Starting back in 2018 when I was co-running the DesignOps Melbourne meetup down here, we were already seeing some of the presentations being done entirely in Figma.
More designers are using Figma to collaboratively create presentations, which is awesome. However, using Figma for presentations still lacks some of the familiar interface and features expected from Keynote, PowerPoint or Google Slides. More importantly, none of those other apps allow you to use Nicolas Cage as your laser pointer cursor; the Pitchdeck Figma plugin was built to start solving these problems and more.
Pitchdeck comes with have all the familiar tools you need to make a great from a web-based presentation out of the box — speaker notes, timer, laser pointer, and slide navigation (which can be controlled from your phone).
I’m very mindful that working inside of teams means that sometimes other team members or stakeholders will prefer to have a presentation in a format that is more at home in their daily workflow. That’s why Pitchdeck also includes the option to export your presentation from Figma to a file that can be opened in Keynote, PowerPoint or Google Slides (or just trusty PDF deck).
The feedback from our customers has been incredibly helpful and encouraging; the problem of slide decks is well and truly alive, and I think there’s much more that can be done to rethink how we go about designing and presenting them. This is the best Figma plugin for magically turning your Figma designs into stunning presentations.
Pixelay
Compare Figma designs with your local website development builds using smart browser overlays.
One of the most common sources of disappointment in the design and development process, is the result of the design and development process. Almost every time a design goes through the “handoff” process (which I argued in another article is fundamentally broken), there will be a disparity between the intended design and the development implementation. This generally isn’t the fault of either party, but a large chasm that exists by nature of adopting this “throw over the fence” approach to having designers and developers working together.
While the fundamental problem is sadly going to take much longer (technically and culturally) to become mainstream, our Pixelay Figma plugin meets each party where they’re currently most comfortable, and help push the process in the direction of “code” as the end game, rather than simply looking towards some static frames of designs instead.
This is a problem that takes up hours of both designers and developers time, with designers knowing that there are issues with the build, and often needing to sit down and visually point out every single difference one by one. Pixelay takes the approach of overlaying any frames from Figma where the original designs live with the developer’s local environment, automatically loading the frames to the same widths as the original designs to ensure the correct CSS has been written for the series of “breakpoints” that were initially designed.
This is the best Figma plugin to take a step in the right direction, where we treat code and design as the same thing; when code is the “source of truth” for design in your production environment, it’s really important to ensure that as much attention is given to that instead of only focusing 100% on the static designs in Figma.
Crypto
Securely share static Figma designs with stakeholders as password protected links.
The noticeable theme with all of our Figma plugins is “recurring”; these are problems (at least in an design team or agency environment) that are constant and painful. When my previous agency switched from Sketch to Figma, we were able to give up everything in our old workflow… well, except for “InVision”. As much as “open design” is core to Figma’s mission and belief that helps drive the direction of the product, old habits die hard and there was an uneasy feeling about inviting clients or other teams into Figma files where they could see everything (even the stuff that “wasn’t ready” or “in progress”).
To “solve” this issue, we continued to use InVision, which all the designers hated using, due to it being a slow and clunky process to constantly upload and update designs from Figma every day. When I asked one of the designers how much time this was wasting for them, replacing the time they should otherwise be spending designing instead; they estimated that it was at least a few hours each week. This might not sound like much, but when you consider the countless other meetings, distractions and commitments that distract designers away from actually doing their work, those few hours per week of lost time are precious.
To start solving this problem, the Crypto Figma plugin was designed to remove the need for those extra steps in order to simply get a selection of “final” frames onto a password protected preview link, where a client/reviewer wouldn’t need a Figma account and could feel safe knowing that their work (which may be under NDA, as it often is) would be shielded from prying eyes.
The obvious question would be “but does it support Figma prototypes?”, to which the simple answer is: “not yet, but it’s something we’re working on adding support for, and has been on the roadmap since day one”. It seemed more important to build a working version that solves the core problem first, get a sense of if that’s actually solving the problem, and then work on the much bigger project of replicating Figma prototype support into Crypto.
As of today, if all you want is a way to share password protected designs of the frames you’ve selected from your Figma project, then Crypto is the best Figma plugin as an alternative to InVision as your only option.
Pro Bundle