Community Corner

FigPilot is an AI assistant designed for Figma artists. He has brought the latest and most powerful AI technologies, ChatGPT and DALL·E 3, to Figma. It supports Figma、FigJam and Dev mode 🎨 Have a conversation with FigPilot and simply tell him that you want to create an image. He can generate any image you can imagine and insert it into your Figma canvas. 🔥 Have a conversation with FigPilot, and he can help you with copywriting, brainstorming, explaining any questions you have, etc. The text he generates can also be inserted into your Figma canvas. 🔑 all features are free of charge. You only need to set up your OpenAI API Key. We will not collect any of your private data, and all settings are stored locally. This plugin only interacts with OpenAI. If you have any suggestions or feedback, please leave a comment or contact me on X

I was recently searching for a plugin that would order objects in Figma by name, however all I could find was plugins that sort layers, and not move the actual objects around. So I had to write my own plugin, and here it is: it simply sorts layers on canvas by their name. Left to right, top to bottom. Install, like, share: Figma This is useful for making presentations, ordering icon sets and keeping your Figma files organized in general. If all selected objects belong to one parent element, the plugin will also sort them in the layers panel like countless other plugins do. How to use Select layers you want to sort. Preferably they should belong to one parent but anything will work. Run the plugin, it will sort your layers. You can also select nothing, in this case plugin will automatically find all frames (only frames) on the page and sort them. Have feedback or something is wrong? Feel free to reply here!

Hi all! I built a i18n with variables plugin that can help you establish a Translation Management or Content Review System right within Figma with Figma String variable. Problems to solve One useful use case for Figma String variable is design localization or content review (like mentioned in this Youtube video) , but they come with certain drawbacks that this plugin aims to solve: Creating variables, and attaching variables to text layers is very time consuming for a large design file or a complex prototype Difficulty in identifying text layers that are without attached variables later on Not easy to create variables in bulk Features Display all visible text under a Figma layer as an editable table Create and assign variables for each text with ease Auto create variables in bulk Search and filter the table to quickly identify a text layer that needs to be assigned a new or existing variable Import and export the text and variables Playground file Please see the playground file fo

Picwise.ai is an AI-driven all-in-one image processing tool that can: Generate attractive StockImages, Avatars, Logos, and more using AI Remove backgrounds, Get rid of background Hassles Upscale images, making them sharp instead of blurry Trace images for free, Easily convert images into vector layers Here is the plugin link, Start for free:Figma

I would like to promote Figlet, a plugin that, given its quality, in my opinion has not received enough attention. Figlet is like a codepen for Figma. If you have a plugin idea you can quickly try it out in Figlet. One of my favorite workflows is to ask chatgpt for the code for a UI-less Figma plugin, then iterate on the code in Figlet. For example I recently had to deal with a bunch of ALL CAPS TEXT in scanned designs, and wrote a quick plugin to change all text to sentence case. Within Figlet, you can also learn from other people’s code throught the Figlets they shared. I encourage budding plugin developers to give it a try.The community link is:Figma

Hi everyone, I build a Figma plugin in order to copy elements with interactions using variables to a new file. Here is the youtube video link (if you need subtitles): https://youtu.be/3G9b34_0X6E And the video below The plugin is able to recreate missing variables in the file and to relink them. Figma might implement it in the next months but you can already try it today It’s very useful if you made smart interactions and want to share it with people or reuse them on another file. PS: I tried to make it work for maximum of cases & fields but did not test all the cases (especially component/instances interactions). Try & tell me if you encounter a problem. If you have any remarks, suggestions/improvement, write them here 🙂

In a Figma plugin, the code that has access to the document API and the code that renders the UI are in different contexts, so you need to use postMessage() to send a request for data from one thread to the other. The other thread then needs to listen for the "message" event and respond by calling postMessage() to send back the requested data. The source thread then also needs to listen for the "message" event to receive the requested data. All of this asynchronous event handling is an awkward fit for what is conceptually a synchronous function call. The figma-await-ipc package wraps this process with a simpler interface. The package’s call() function lets you essentially call a named function in the other thread, while awaiting the promised result. Any parameters you pass to call() after the function name will be passed into the receiving function: // main.ts import { call } from "figma-await-ipc"; try { const title = await call("getProperty", "title"); figma.currentPage.sele

I’ve built a little library for creating simple wizard-style plugin UIs without leaving the main thread. There’s no need to mess about with a framework like React, or calling postMessage() to signal back and forth between the main and UI threads. You just make a call like: const title = await input.text("Enter a title:"); and the fwidgets library will show a plugin window with a labeled text field: Once the user enters the text and clicks Next, control will return to the main thread and your plugin code will continue. Obviously, this is a pretty rudimentary user interface, similar to a CLI tool asking you one question at a time. But the advantage is that the code to get the user’s input is just a simple one-liner. You can focus on the actual work of calling the Figma APIs to provide useful functionality, while sprinkling in requests for user input as needed. Other input widgets are available, like a drop-down menu or color picker:   const align = await input.dropdown("Text

Figma Click on a Figma component or its children and the plugin will generate React code and render the generated component in a preview. You can change the configuration of the editor, plugin, compiler, code writer, etc in realtime. Source: GitHub - kat-tax/figma: Bridge Figma to React

refer to How about having an option copy as base64? Export to base64 @user19 @Anwarul_Islam I created a plugin that can convert image to base64 tutorial: run plugin https://www.figma.com/community/plugin/1226170501704996152/Pwireframe select image click Copy as Base64 button this is demo todo automatically write base64 text to clipboard (require Figma to provide an API for writing to the clipboard)

was wondering how everyone got into Figma plugin development. would love to see what other folks favorite tutorials, writeups, videos, etc are around this subject!

Hello everyone! I am excited to announce that I have just created a new Figma plugin called QoQo. QoQo is an AI companion designed specifically for UX designers. It helps designers work faster and more efficiently. I am currently looking for testers to try out QoQo and give me their feedback. If you are interested in testing QoQo, please let me know in the comments below and I will send you an access code. Figma

This plugin identifies text information within images and converts it into readable text. First off, take a look at this GIF. Features Highly accurate text recognition No need to select a language How to Use Select an image. Hit the ‘Read’ button. Your text data is output. Voila! Installation Just install from this link.Figma

Get it while it’s hot at brainshift.design/generator! https://twitter.com/brainshift_/status/1672617107593261057

I build a feature to update spacing on selection change Below is a quick video how it works What do you think ?

Hey guys we are so happy to announce that we have created a plugin which export compressed Images, PDF, SVG and WebP. For now we are only having these formats but soon we will add GIFs also, right now this plugin is absolutely free and in future we might add some PRO features but users will be able to use the FREE version to export if they don’t want PRO features. 👉 https://www.figma.com/community/plugin/1233404694629290096 We launched this plugin just 11 days ago and in just 10 days we got 1K Try outs 🥳 Please let us know your feedback so we can improve our plugin and add more features.

This is not another AI plugin for copywriting. Copywriting plugin seems to become very mainstream since chatGPT. But they share something in common, waiting for generation and requiring subscriptions. I’m just trying to make something that is faster, better UX. Unlike AI plugins, this is without waiting the “generating” process like you see in most AI plugin. I want to focus on populating copy with speed + good copy ideas. So I created this. Basically I prompted some useful copy for UI and landing page (1000+ as of now) and make it into one collection then turn it into a plugin. Instant search results based on keywords Quickly swap existing text in your selection with one click Organized website and UI copy categories Variants of formal and casual tones to choose from Figma

Hi guys! After working with a lot of tables last year, I was looking for a way to speed up selecting similar layers like table cells, list items and so on. But normally I’d want to select elements in just a single column or screen, not across the whole page. That’s why I developed Tree Navigator. How it works First, you select the element that you want to select all instances of, and then in the plugin you can choose in which of the parents of that layer you want to select all other matching elements. So for example in a table you’d have the option of selecting the whole table or a single column. In the former scenario all cells in the table would be selected and in the later only the cells in that specific column. Cells in other columns would not be selected. Now the interesting part is you can also select cells from two different columns and then you get the option to just select all cells in those two. Scoping the search to siblings instead of the next common parent effectively. I’v

Hey all, wanted to share my first Figma plugin: Bookmarks, a browser-style bookmarking tool to save nodes and jump from layer to layer. I made it after getting tired of jumping between different device size mock ups while working in large files. I want to polish it and make the window resizable, and try to figure out how to share bookmarks with others. Hope you all like it 🙌

👋 Hello Figma lovers! We’ve just launched our first Figma plugin - Tracer! It’s been a couple of days and it’s already rockin’ the trending section ✌️Figma With Tracer, you can convert your raster images to vectors with just 1 click for FREE! 🧑‍💻 Stay tuned since we already have a couple of plugins, also utilizing AI, in development 👉 Check our Instagram https://www.instagram.com/figmastic.store/ or email at figmastic.store@gmail.com

Hello, Figma community! 👋 A while ago, we released an all-in-one solution streamlining your product creation process. It is a new, enhanced version of the previous product (UX Flow) with over 1 million downloads! 🔨 Build flowcharts, sitemaps, timelines, and information architecture 📝 Create user stories 🧐 Perform SWOT analysis 🤯 And many, many more! 🔥 Directly from Figma, with carefully crafted components, templates, and dedicated plugin. Today, exclusively for Figma community, we offer you 50% discount for the first 20 users! The counter starts now! 😁 Get your discount! Link to the plugin Don’t hesitate to message me or uxstackguru@gmail.com! Cheers! ✌️

New Plugin Hey guys! Me and my partner are pleased to announce our new plugin called Teton. Teton automates and reforms your web or UI designs into a graphic that you can showcase! For some more information, here are the steps: How-to-use To create your graphic, choose your desired layout, select up to 5 frames to showcase, and add your finishing touches. Press generate and you’re all set! If you have a chance, please give our plugin a try and follow our twitter! Plugin: https://www.figma.com/community/plugin/1200632775986419931/Teton

How can I add a node to figma.currentPage.selection via plugin? Basically I hide all items, and added a particular node as visible. I want this items to figma.currentPage.selection from plugin. Any option?

Hey everyone! I wanted to share a Figma plugin that I’ve been working on. QoQo - Your AI Companion It’s designed to help UX designers like myself save time and streamline their workflow. The plugin uses AI to generate user personas, design checklists, and experience briefs. This can be especially helpful when it comes to tasks like user personas and experience briefs, which can be time-consuming to create manually. The plugin is completely free to use and I’m constantly working to add new features and improve it. I’ve been testing it with a group of beta users and have received great feedback so far. I would appreciate it if you could give it a try. I’m looking forward to hear your feedback.

Hey there! A month ago we decided to move from Sketch + Zeplin to Figma. Our workflow for those tools was quite usual: designers create Sketch files, upload them into Zeplin, and frontend developers use Zeplin to navigate through views, components, styleguides, etc. to get assets, sizes, offsets, colors, — you name it. When we started, we could not find out how to “glue” Figma and our workflow. The thing we could not get is an absence of search in Figma. Yeah, you can use plugins built by community (such as Find & Focus), but you have to have rights to edit files. But our frontend devs do not have such rights. We started thinking about it, changing workflow in different ways. E.g. we asked the developers to copy design files to their “Drafts” and use the plugins there, but it wasn’t handy. Files are being constantly changed, and you always have to copy there, click here, etc. After some trials we decided to build our own browser extension to fix this problem. Here is it: Figma Sear