Building a Figma plugin with a server side and API calls in 2 hours using Claude AI.
Rogie King has another example of roughening up icons for wireframes.
A new project by Gavin McFarland makes creating and bundling Figma plugins easier. “Plugma uses Vite to bundle Figma plugins and is configured to inline all styles and scripts into one file. It uses a local server for development, that passes messages from Figma’s main thread to the local server using web sockets.”
A tutorial on creating an AI-powered Figma plugin that generates colors based on your descriptions. It’s pretty cool to see how accessible it becomes to build a plugin using LLM (in this case, OpenAI).
Lee Munroe and the design team at OneSignal learned how to create Figma plugins from scratch and shared the first steps for building something simple. Between an excellent Create Figma Plugin toolkit and ChatGPT, I recommend giving it a shot.
Jason Lengstorf from Learn with Jason talks to Figma Developer Advocate Jake Albaugh about how Dev Mode improves the design handoff and how the Figma plugins API enables more powerful customization.
Tom MacWright writes about his experience building the Placemark plugin for creating vector street-level maps and Placemark Globe for rendering a globe. He covers several interconnected topics, including tracking usage, sandboxing, plugin architecture, and authoring flow.
“Transform your plugin ideas into reality in just minutes! Featuring official Figma color variables, dynamic interactive components, ready-to-use promo material presets, and a live preview across 3 stunning themes.”
Evil Martians, the team behind the Polychrom plugin, shares lessons they learned while building it and how they incorporated traditional elements of computer science into their work, like algorithms, data structures, and tree traversal techniques.
New in-product workflows for requesting and approving plugins and widgets within Figma on the Organization and Enterprise plans.
That’s what I love about this community so much. Fons Mans shared an idea for the plugin, Rogie stepped in and offered to build it, and three days later they already had some WIP. Don’t know if I need this plugin yet, but seeing this collaboration makes me so happy.
Figma plugin idea: Generate Bento
— Fons Mans (@FonsMans) August 24, 2023
Select artboards, hit generate and get a beautiful slide using the selected frames as blocks and the document colors as backgrounds ✨
“The problem with Figma plugins is that the market is really not that big. If you look closely on the Figma marketplace, you can probably tell pretty fast there are relatively few plugins making money. There are some UI kits listed where, if you divide the views/uses between 100 to get a sense of the revenue, you end up with something like €20-€400 which is frankly not worth the effort.”
I don’t think that’s necessarily true, and know that some creators make significantly more. That said, I wish it was easier to guesstimate the market size for the idea on the Figma marketplace. I love how Etsy shows the number of sales in every shop, and in combination with the number of ratings, it can give a rough estimate of the item’s success.
Evil Martians is a product development consultancy behind some well-known services and open-source projects. In this post, they talk about the process of building a full-featured frontend application-style Figma plugin — with storage, auth, routing, and more. A fascinating deep dive for any curious developers!
Sawyer Hood, Software Engineer at Figma, built a plugin template that demonstrates streaming LLM responses inside of a plugin to get you up and running with the next AI project.
“Figlet is a sandbox-like environment with a built-in editor that allows you to play with and learn how to use the Figma developer platform right inside Figma.” It’s made by Gavin McFarland, author of the popular Table Creator plugin, and funded by Figma Creator Fund.
I love seeing how teams improve their workflows with internal Figma plugins. Here, Bryan Berger from Discord built a handy plugin to randomize avatar fills from their design system library. The source code is available on GitHub. (I guess something is in the air, as Miguel Solorio is building something similar for his specific use case.)
Built a handy new @figma plugin to randomize avatar fills from our design system library (growing!). Caching prevents duplicates and category filtering allows one to be intentional about the vibe. pic.twitter.com/AxLfbkM6Bo
— Bryan Berger (@bryanberger) April 6, 2023
Discord designer Daniel Destefanis built an internal plugin for generating entire conversations using ChatGTP and rendering them using their design system. This is an excellent example of automating a mundane part of day-to-day work with AI.
Built a new @figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily. pic.twitter.com/4M01yB87tZ
— Daniel Destefanis (@daniel__designs) March 29, 2023
Cool open-source proof-of-concept, related to the above post by Edward. For now, I’m skeptical of AI-generated components (explaining ideas and details may take longer than building from scratch), but bullish on offloading mundane tasks, error detection, and quality checks to the AI.
Okay, my mind is blown. “Developing plugins for Figma using ChatGPT can be a powerful tool for automating low-level tasks and generating specific parts of code. However, it’s important to have a clear understanding of your goals and the steps necessary to achieve them in order to use ChatGPT effectively.”
Improvements to publishing, managing, and promoting plugins and widgets — now multiple people can publish updates and a playground file can be added to provide more context on when and how to use a resource. For more details, see the Twitter thread by Figma PM Bersabel Tadesse.