Over the past month I’ve been on a little indie hacker journey, where I built my first freemium plugin for Figma: Screenshot to Layout. Essentially it’s an OCR plugin: it recognizes text from screenshots and renders it back to Figma. In my first version, I used a file input. I felt I had a nice […]
Category Archives: figma
Figma – Screenshot to Layout plugin (2)
- Posted in figma figma-plugins
I am working on my plugin to build a layout from a screenshot. What does it do? Select an image in Figma, run the plugin command “Screenshot to Layout”, and then see a Figma layout appear with editable text. What is it for? Useful to quickly start working on a new design based on a […]
Figma plugins
- Posted in figma figma-plugins
Just some plugins that have been of use lately. General Navigate multiple siblings Downsize Development of plugins Debugger Node decoder Figlet
An intro to building Figma plugins (2)
- Posted in development figma figma-plugins
In the previous tutorial, we ended with 2 rectangles. The second building block that’s good to learn about is rendering text to the canvas. Working with text is its own challenge in Figma, because there are a lot of edge cases. The first thing to understand is that a font needs to be loaded in […]
An intro to building Figma plugins (1)
- Posted in development figma figma-plugins
In this blog post series I would like to give an introduction to building Figma plugins. We will be learning using a series of “building blocks” and then turn it into a real plugin in the end. In this first tutorial we will be looking at the most basic of basics: creating a rectangle. We […]
Figma: screenshot to layout plugin
The first thing I am building in my bootstrapping journey is a Figma plugin to turn a screenshot into an editable layout. You have a Figma plugin: Imagine you take this screenshot: And then when you process your image, you get this editable layout: This way, as a designer, if somebody hands you something to […]
Property toggle in Figma
Leuk, zo met 1 klik van dark naar light mode met deze plugin.
The 11 Figma plugins I immediately installed again on a new account
When you create a new Figma account, all your plugins are gone. This creates an interesting situation where you’ll only install plugins that you actually use. The plugin list on my Mono Figma account is huge from trying things in the past and not cleaning it up. But my new freelance account, it’s clean. Here’s […]
Designers: please use rectangles for borders, not lines
To draw a line, use the line tool. Sounds logical, doesn’t it? However, since year and day, I’ve avoided using the line tool and I don’t think I am the only designer to do so. If you’re using a line for a border, do yourself a favor, and just draw a rectangle instead. What you’ll […]
Tweaking a plugin to provide batch translations in Figma
- Posted in blijvend-leren development figma javascript - 1 comment
This probably the nichest of niche blogposts, but if anyone finds themselves in this situation, here’s some help. I wanted to translate an entire Figma document to another language. The document contains about 20 screens with a moderate amount of text layers on every screen. The use case was to do a usability test in […]