Introduction to the problem
A bunch of copy came in for a web page, and I didn’t feel like jumping in and out of Figma while formatting it and taking notes.
You can’t natively highlight text in Figma, and that’s never really been a problem—except this particular night, I was feeling quite stubborn.
It’s one of those moments when you realize:
- How have I never noticed this before?
- Can I scheme something up to fix this?
Figma’s API has some pretty hard stops when it comes to text manipulation. You aren’t able to directly target text nodes in Figma’s API, and more… I also have some pretty hard stops on accepting things as they are.
That’s when I got creative and decided to see if we could target line breaks. 😈 — We could!
Two-step process that brought it home
The breakthrough came once I realized I could separate large blocks of text into individual elements for each line break. From there, the two-step process for the plugin was born:
Format Text: Paste your content into Figma, open the plugin, and click “Format Text.” This splits your text at each line break and creates individual text nodes for each line.
Highlight Text: Select the lines you want to emphasize, click “Highlight Text,” and voila—highlighting that works. Or at least gets us closer than ever before.
At first, the highlight was appearing behind the text, which wasn’t ideal for highlighting exactly what you wanted. So we went back into dev mode and had the highlights generate on top of the text with a lower opacity.
Now users can grab either end of the highlight or hold “option” on Mac to resize as needed. That concluded the build of Text Highlighter 1.0 for Figma.
Built for the love of the game
When me and the other digital contributors looked back at this, we came to the conclusion that this is another example of why AI isn’t taking everyone’s jobs. It’s just going to highlight (pun intended) the real makers.
The ones who do it for the love of the game. Sure, AI helped code a tool, but it didn’t come up with the idea to make other digital contributors’ lives easier.
We, us humans, did. And while this plugin isn’t something that’s going to be used by millions, there are going to be the few psychopath designers up at 2 a.m. wanting to stay in Figma to format text. This is for them. ✌️
What’s next for version 2.0
The current version gets the job done for basic highlighting needs, but we’re not stopping there.
In version 2.0, we’re working on a feature that will import text and automatically insert line breaks based on text wrapping. It’s one more way to make this process smoother and more efficient for the designers who need it most.
If this sounds like something you’ve been waiting for—or if you’re one of those midnight psychopath designers who just needs things to work—give it a try here.