Welcome to the a brand new series of Figma Innovators Insight where we'll be sharing stories of Figma community creators around the world. This is the first Q&A of the series and we'd love to welcome Ben Katz to share his story and insights.
Welcome, Ben! Please tells us a bit about yourself!
Sure! My name is Ben and I am a 24 year old developer, product designer, and the creator of Print for Figma
I was born and raised in British Columbia, Canada, and I currently live in the beautiful city of Vancouver. From a very young age I have been fascinated with technology and the web. I created my first website at the age of 8, started a semi-successful YouTube channel at 12, and began freelancing at 15. After graduating high-school, with no clear idea of what I wanted to do, I applied to Simon Fraser University’s Computer Science program a day before the application deadline. When I received an acceptance letter in the mail six months later, I made the decision to move out at the age of 17 and rent a dingy basement suite at the base of foggy Burnaby mountain, atop of which lies the brutalist concrete fortress that is the SFU campus. Working part time as a designer at a social enterprise called Plastic Bank, I patiently completed my degree over the course of 6 years, and as of 2024 I am now back at Plastic Bank working as a full time Technical Project Manager.
What sparked your interest in developing plugins for Figma, and how did you get started?
In early 2020, as the COVID-19 pandemic became a reality, my university classes had moved to online instruction, and I suddenly had more time and more skills than ever before. After working on a doomed-to-fail startup with some friends a year prior, Figma had become my go-to software for all types of design work, including my work at Plastic Bank. However, I still found myself using Adobe InDesign for print design. Figma had just launched their new plugin API, so I asked myself - how might I bring the capabilities of traditional print design software into Figma? By August 9th, 2020, I published the first version of Print for Figma to the community.
What educational path did you follow that helped you in developing Figma plugins/widgets?
Aside from my CS degree, most of my education was self-taught. My experience creating WordPress blogs and basic websites taught me the basics of HTML, CSS, and JS, and a good friend I met needed help on a project, which forced me to learn React in 2019. With the help of countless YouTube tutorials, I soon realized that React solved all the pain points I had with Vanilla JS, and since then I have been continuously learning more about React and Typescript. Shout out to Web Dev Simplified for some amazing React tutorials, Kevin Powell for his deep dives into CSS, and Nielsen Norman Group for their amazing library of UI/UX design resources.
Are there specific skills or technologies you found essential in your journey as a Figma developer?
In terms of skills, I truly believe the foundation is the ability to learn. Half of learning is what you take in, but the other half is what you put out. You can watch videos, read articles, and complete degrees and bootcamps, but the true learning comes from putting that into practice. I’m not saying anything new here. In fact, I think it would be hard to find a developer these days who doesn’t understand this. However, I often encounter people who I know would be surprised with just how much they are capable of if they were to push through the initial learning curve of whatever they are trying to do. React only “clicked” for me once I forced myself to build something with it.
In a more practical sense, one skill that has really helped me level up is mastering my editor. There are dozens of shortcuts in Visual Studio Code that can make your life ten times easier. Some of my favorites are `Alt-Up/Down Arrow` to move lines around, `Shift-Delete` to cut entire lines, and using `Ctrl` and `Shift` with the arrow keys to select text. These may seem basic to advanced programmers, but I still see too many developers using their mouse when they could be using their keyboard instead. I’m not asking you to become a keyboard-only, Arch-Linux & Vim wielding wizard, but you'd be surprised as to how much these simple shortcuts can save you time and keep you focused on writing code instead of navigating through it.
Another important skill for all web development is an understanding of Chromium dev tools. Figma is an electron app, which means the desktop app is still a browser. Contrary to what we’d like to think, it’s rare that what you code comes out right the first time, and being able to browse through the DOM with dev tools is necessary for debugging both the visual and functional problems that you face.
In terms of technologies, I am a firm believer in not reinventing the wheel. One technology that has helped me focus on creating a product instead of mastering React build tools is Yuan Qing Lim’s create-figma-plugin.
Within seconds you can have a working Figma plugin, with a solid foundation that can scale with zero issues. For 90% of potential plugin creators out there, create-figma-plugin is the perfect starting point.
Where do you draw your inspiration from when designing and developing new plugins or widgets?
Inspiration can and should come from all aspects of life, however we are lucky that the Figma team puts incredible levels of thought into their software. So when I’m not sure how to design a UI element, I often look at how the Figma team approached it. This also ensures that your plugin feels like a native part of Figma. All of your plugin users will be Figma users, so it makes sense to keep things congruent. That’s not to say you shouldn’t break the mold when necessary, but again - don’t reinvent the wheel. At the end of the day, we are here to build a good product, not invent new design patterns. From my experience, it’s actually rare to see a plugin that tries to truly match the look and feel of the Figma interface, so while I also draw inspiration from other plugins, I often look to their functionality more than their design. Create-figma-plugin comes bundled with dozens of components that match the Figma UI, which is another reason why I recommend it for most creators.
Specific to Print for Figma, I often look to InDesign to see what industry-standard features I can port over to Figma, often trying to improve them as I do so.
What challenges have you faced in the process of developing plugins/widgets, and how did you overcome them?
One of the biggest challenges I have faced, and still face today, is understanding the limitations of Figma plugins and how all the pieces fit together.
The Figma Developer Docs covers these factors in great detail. As a beginner, I didn’t really understand the difference between Figma plugins and regular web applications. By reading the documentation and asking for help on the Friends of Figma Discord channel, I was able to understand what was possible and what wasn’t, and when I needed to do things like create my own server/API, etc. Prior to my Figma plugin, most of my experience was with applications where a server was rendering the frontend. Because of this, I could use NodeJS APIs and make network requests with ease. With Figma however, by default, you are purely writing a frontend application. I had to learn how to create my own separate backend using AWS to do some heavy lifting like file processing. That being said, Figma’s official Open AI Plugin Guide covers how to use NextJS for your Figma plugin, which means your front and back end can coexist more seamlessly. I recommend learning more about this area of development if you foresee your plugin interacting with any services outside of Figma.
Another challenge I faced was monetization, however the Figma Payments API made that a breeze. If you are looking for more control over monetization though, I recommend exploring 3rd party options like Lemon Squeezy, Gumroad, or Stripe.
How do you approach problem-solving when you hit a roadblock in your development process?
Usually the best way for me is to break things down into smaller problems. Diagramming is a great way to do this. I’ll first map out the bigger picture, and then add details where I can until I’ve identified the various sub-problems I need to tackle. This will also help you identify areas where you either need to learn something new, get help from the community, or even hire a specialist. This divide and conquer approach can be applied recursively until each sub-problem is easy to solve.
How has the Figma community influenced or supported your work as a developer?
I’ll take another opportunity here to shout out Yuan Qing Lim and his amazing create-figma-plugin tool, but aside from that, the Friends of Figma Discord has been a crucial resource for me, from seeing what other creators are working on, to getting answers to my questions. In terms of financial support, I want to thank the hundreds of Figma users who have subscribed to Print for Figma PRO. I have been able to reinvest much of the revenue into development and have hired various specialists to assist with complicated features.
Can you speak about any collaborations with other developers or designers that were particularly impactful?
First and foremost it has been a pleasure to work with you, Sonali! It’s always great to expand our horizons and work on other plugins aside from our own. I have also worked with some individuals I found through Upwork, as both a freelancer and as an employer. Aside from that, almost every conversation I’ve had on the FoF Discord has been very impactful.
How do you gather and incorporate user feedback into your plugin/widget development?
I have yet to build a proper survey or feedback form that lets users submit requests, but I’ve found that the comments section on the Figma community is a great way to gather feedback. My comments are often very positive, but a lot have offered great insight into how people are using my plugin, and what new features are desired. It’s surprising how often someone is using Print for Figma for a task I would have never thought of.
The other form of feedback I gather is user analytics. Although the qualitative feedback from comments and reviews is important, quantitative feedback plays a larger role in my decision making. I use Amplitude to gather anonymous data. Aside from the default data you would expect from an analytics tool, I can also record custom properties. For example, when someone creates a document using Print for Figma, I can see if they used a preset, if they added bleed or margins, and see how many pages they created. Sometimes the vocal minority has made it seem like my users are doing one thing, yet my data tells a completely different story.
Can you share an example of how user feedback led to a significant change or improvement in one of your projects?
I’ll give two examples, one from comment feedback, and one from data. Both of these examples influenced revenue. In a perfect world I could work on Print for Figma for free, but it’s also important as a creator to respect your time - if you are providing value, people won’t hesitate to pay for your product. With that disclaimer, let’s dive into the examples.
From the time I published the first version of Print for Figma in August 2020, until August of 2023, the plugin merely helped users create properly sized/formatted print documents in Figma. In that time, I received countless comments requesting CMYK PDF Exporting. In fact, I received so many requests that I spent months adding that functionality, and released it under a paid subscription plan. It was even more successful than I thought, and suddenly Print for Figma went from a side project into a side business. This is just one of many changes I made based on comments, but it was the most impactful.
In terms of data-driven decisions, I managed to double my amount of new monthly subscriptions by monitoring usage data. I created some charts in Amplitude, and observed that the majority of my users created less than 5 documents per week, yet something like 10% of users were creating dozens if not hundreds of documents per week. Clearly some users were getting huge value from the plugin. To support further plugin development I wanted to encourage those power users to subscribe, while keeping the plugin free for the other 90% of people. I adjusted my monetization model to align with this usage, and saw a massive amount of growth overnight. I respect creators who have the ability to offer their plugins for free, but without changing something I would have had to sunset development - yet I also didn’t want to alienate 90% of my user base by requiring them to pay for something that was previously free. Making this decision based on data was the best of both worlds - I was able to continue the development of Print for Figma, while keeping it accessible to almost everyone.
What trends do you see emerging in the world of Figma plugins/widgets?
To be frank, if I truly knew, I’d probably be working on it myself! That being said I think there are some obvious trends gaining traction. The most obvious being AI. However, I think the true value of AI is unlocked by integrating it into a product that provides value of its own, without AI. Anyone can make a plugin that talks to Open AI’s APIs, but integrating those APIs into a unique product is a lot harder to do. I’ve seen some promising AI wireframing plugins, yet they still leave a lot to desire. If I had all the time in the world, this is probably what I would explore.
What advice would you give to someone just starting out in Figma plugin/widget development?
For your first plugin, start with something that you find useful for your own purposes. Build something for yourself. More often than not, if you find it useful, others will too. Also, don’t be afraid of competition. Print for Figma is not the only plugin that exports PDFs, but it’s the only plugin that is marketed specifically for print designers. There is always room to do something better, or to market your plugin to a more specific niche. Both a Jeep and a Honda can get you from point A to B, but they are each marketed towards a different type of customer. Don’t try and serve everyone - serve a specific type of user, and you will find greater success. Lastly, start simple. You might have a vision of the perfect plugin, but in reality it will take time to get there, and being a perfectionist often prevents creators from taking the first step. Just get something out there, see how people use it, and adapt!
Do you have a favorite plugin/widget that you've developed or used? Why is it your favorite?
You know, I don’t use Figma as much as I used to as most of my time is spent either coding or managing projects at work, but I definitely have some plugins that I find myself returning to.
One I find myself using often is Image Tracer. Sometimes you find that perfect image but it’s not in vector format, and this plugin usually does a good job of tracing things.
I also often like to use Figma for creating animations and GIFs, and for that I use Figmotion. It was one of the first serious Figma plugins to come out and has stood the test of time.
Are there resources, such as books, websites, or communities, that you would recommend to aspiring Figma developers?
I previously mentioned some awesome resources, so I’ll summarize them here:
- Figma Developer Docs - everything you need to get started with plugins
- Friends of Figma Discord - get help from other devs and from the Figma dev team
- Web Dev Simplified - awesome React and web dev tutorials
- Nielsen Norman Group - amazing UI/UX resources
- Kevin Powell - the CSS wizard
- Create-figma-plugin - the create-react-app for Figma plugins
- Open AI Plugin Guide - awesome example for making a practical plugin
How do you balance your time between developing plugins/widgets and other responsibilities?
This is a good question! I find myself working on the plugin in short sprints. I’ll usually do some research and planning for each new feature/update ahead of time as I’m working on other projects, and then when I feel like I have a week or two that will be more relaxed, I’ll start development, and dedicate a few hours a day until it’s done. I do this because once I start coding, I find it really hard to stop, and it’s easy to lose your momentum if you have to stop mid-way through a new feature. After each sprint, I’ll take a long break, aside from small updates or urgent bug fixes. This gives me time to step back, look at my usage data, and make good decisions. However, if I was working on my plugin full time, this might look different.
Do you have any productivity tips or routines that help you stay efficient and focused?
I think one thing I’m realizing as we roll into 2024 is that above all else, physical and mental health is priority number one. When I’m feeling on top of my game physically, it makes it easier than ever to get work done. So don’t neglect a single thing in exchange for “productivity”, as it actually makes things worse. I’m guilty of using plugin development as a form of procrastination from other things in life, and that’s not healthy. As I said before, divide and conquer - keep your tasks small and achievable. This helps me stay focused because I’m not worried about all the implications of some big feature, rather just the task itself.
What's next for you in the world of Figma plugin/widget development? Any upcoming projects you can share?
I’m actually very excited for this year, as I plan to create a B2B version of Print for Figma that will be catered towards teams of people rather than individual designers. I’ve heard many successful founders say that if you have something that’s working, don’t try and find greener grass. Instead, double down. So that’s what I plan to do - continue to work on Print for Figma, and expand its audience through a B2B version. I’ll be posting updates to my Twitter/X @benktz, so drop me a follow if you want to see how it goes.
Where do you see yourself and your projects in the next five years?
As much as the safety and security of a job is nice to have, I really do see myself building my own products full-time within the next 5 years. The SaaS space continues to grow, and we as creators have more access than ever to niche audiences and markets. I’m hoping I can grow Print for Figma much further, but if not, I think I’ll still be building digital products. Only time will tell! Lots can happen over that amount of time, and I can’t wait to see how the UXtionary community evolves! Thanks, Sonali!
0 Comments