Plugin Finchy January Review: Kicking the year off right
What a month! January has flown by. I’ve kicked off a few projects, and crossed off a couple of items off the goal list for this year already. January is the first month, and a month of firsts. I wrote my first medium article, on how to display images from your Figma canvas in your plugin UI and published my first npm package
If I was to try and sum up this month into one theme, it would probably be something along the lines of starting with strong foundations, or putting in the effort today, to avoid effort tomorrow.
Making tools for making tools for tools
A wise person once said to me “Process kills creativity”.
So the more streamlined the plugin creation process is, the more creative we can be.
This month I’ve been investing time into improving my workflow, in order to create more plugins in the future. Last year I got into Vue3, and my Rename Styles Plugin was the first project I made using the Vue3 framework.
I found GitHub templates to be super useful for this, no more worrying about webpack configs, and installing the right packages. With a couple of commands pasted into the terminal, I can get cracking with a plugin idea in a familiar environment within seconds.
If you’re interested in Vue3 and Figma Plugins, check out my Vue3 Plugin Template
It’s worth mentioning, you definitely don’t need a front end framework to make plugins, and I’ve seen some great work with “vanilla” methods to building plugins. However, there are a handful of repos out there for getting up to speed with frameworks such as React and Svelte
Hey can you send me the latest icon?
We saw the release of Figma’s latest version of their design system UI2. I haven’t dived in too deep yet to see what we can leverage as plugin makers. However I have taken all the icons from UI2 and put them in a repo for you to use within your plugins.
I created my first npm package, and dipped my toe into the world of SASS, with the intention that these icons work alongside figma-plugin-ds
As always, you can check out the repo at github.com/PluginFinchy/
Live Preview
I found myself getting frustrated, tabbing back and forth between VSCode and Figma, relaunching my plugin every time I made a front end change.
Using the node package live-server, I created a webpage with an iframe of my plugin. Now every time I make a change, the web page refreshes automatically, and I don’t have to relaunch a plugin.
Organiser
A Figma plugin for managing your design files.
It was after a conversation with Luis Ouriach that we both realised, none of the plugins available in the community quite achieved what we wanted.
So we sat down one evening, had a remote white boarding session in a Figma file, and a few hours later, the first prototype was born. We had something “working”.
The hardest part by far was creating a draggable mini map of your nodes. But by leveraging some open source frameworks, we got somewhere near what we wanted. There’s definitely improvements to be made with the drag-n-drop feature, however, released is better than perfect.
Managing design tokens for NewsKit
NewsKit is NewsUK’s design system. And like most design systems is built upon design tokens. Supporting multiple themeable brands, we needed a robust way of handling each brand’s theme data.
If you want to learn more about out Design System, check out my colleague Ellis Capon’s post on NewsKit: A themeable design system for unique media brands
As a company we migrated to Figma last year, which meant migrating most of my Sketch plugins. One of those plugins, was our JSON theme exporter.
NewsKit Themes are stored in JSON files, separated by each token type. Colours, font properties, typography presets, shadows, border radii etc.
By doing this though, we created a bottleneck for ourselves, designers were having to hand write JSON files in order to get their themes into production. (I’m so sorry I didn’t manage to write this sooner, to those of you that spent days hand writing hundreds of lines of JSON)
It’s still a work in progress. And I intend on writing a thorough post on this when we’re nearer to completion. But for now you can check out the progress here.
Text Cropping
If you follow me on twitter you might have seen me teasing an upcoming plugin — Text Crop.
With Text Crop, spacing sits flush with the outline of your text. No more whitespace!
It’s in the final stages. I promise. If you want early access, do reach out.
To go back on my own words, I really do want this to be perfect (or at least close to) before releasing this into the wild. The plugin makes a set of components that will live in your design system files. The last thing I want is for design systems to have a dependency on a half-working plugin.
A full post on Text Crop will come out soon.
Onto February
January was a fantastic month. And I’ve had such fun talking with other makers about how to build plugins, and making efforts to establish some form of standards across the plugin space.
Next month, Text Crop will be released, and it will change your layout game completely, I promise!
I’m thoroughly enjoying writing about plugin development, and learning a lot myself as I do so. If there’s something about plugin development you want to ask me about, or think I should know about. Please get in touch, I would love to hear from you.
You can find me on Twitter, the Figma plugins slack and the Figma forum
