Community Corner

Check out this new video showing how Master plugin can help you iterate with Figma AI and make changes fast across multiple components. As a bonus, I have a little Figma AI prompt engineering tip for you. Tips for using Figma AI with Master plugin

This is my chart generator plugin . I set that ordinary user can use it 5 times and after that period of time he or she needs to pay for premium feature. Figma BTW : nobody did buy it .

Hi Figma Community! Handoff is a set of free and open-source, end-to-end workflow tools for design and development teams looking to streamline their use of Figma design systems. We’ve just released a Figma plugin that allows you to easily export your styles and components as tokens. Use it to annotate your design system, marking components that are ready for use. Choose which attributes should be extracted from each component layer. Preview foundational and component design tokens in CSS and configure their naming conventions. You can export all the tokens and generate a static design documentation site via CLI. We believe the Figma community will benefit from an open-source project like Handoff, and a collaborative approach to the challenges of design token usage. We’d really love to hear your feedback!

Macro Automate Now: Your Ultimate Figma Automation Tool With this plugin You can automate your work in Figma. I assume there are no such plugins on the market like this . You can push Record Macro and do whatever You want , creating eg. rectangles , changing colors , makit it bigger , duplicating it. After that just push Stop . You can choose the macro You created and play it … Imagine how it can increase the efficiency of Your work. Please , please share what You all guys think . Please rememebr this is just a Beta version of it. It can help You for example , create the website ui mockup … Figma

Hello Figma Community! We’re excited to introduce TemplateR, a powerful Figma plugin designed to automate and generalize your marketing language with personalized graphics. This plugin will make your design process faster and more efficient, and help maintain a consistent visual style across all your marketing materials. What can TemplateR do? With TemplateR, you can: Create your own templates with multiple pre-designed graphic variations. Generate countless personalized graphics using dynamic input fields. Share templates with colleagues for seamless collaboration and content creation. Ensure visual consistency in your social media presence, emails, and advertisements. Why TemplateR? TemplateR simplifies the design process and empowers everyone in your organization to create professional-looking images with ease. No more waiting for designers or struggling with complex design tools. With TemplateR, you’ll save time, maintain a consistent brand image, and improve your marketing effor

Introducing the Chart Rectangle Generate Figma Plugin – now available for FREE! Simplify your design process with our new Figma plugin that allows you to quickly turn data into stunning charts. Perfect for enhancing presentations and improving data visualization at no cost! Watch our quick tutorial to see it in action . Why Choose Chart Rectangle Generate? Efficiency: Generate charts without leaving Figma. Customization: Tailor charts to fit your style. Cost-Effective: Completely free to use. You can create chart from Json or CSV . ! Get it now on the Figma Plugin Store! Let’s make design easier and more accessible together. Your feedback is invaluable! Figma Check the tutorial here : https://youtu.be/1RIOtA97DQw

Variables is a great new feature in Figma, that helps to make design & development workflow much more flexible and optimized! But currently there is no chance for developers to see all variables in dev-mode without editor rights, and even though - it is impossible to export them to CSS or SCSS. Natively Figma allows only to get CSS variables as a part of component code. In case, to solve this difficults and make variables usage and handling perfect for both designers and developers, our team made a light & elegant solution - AVE-plugin or Advanced Variable Export. You can check out plugin for free right now in Figma Community. Plugin will help you to export variables to CSS or SCSS code, and even more - it can fragmentate variables to different folders depending on variables structure in Figma! We will appreciate any feedback, functionality requests, bug reports, etc. Push it to your favourites so we’ll keep motivation for the further plugin improvements!

Instantly convert Figma designs to production-ready code with CopyCat. Our Figma to code plugin will help you build faster than anyone else. Click on a Figma design, open the plugin, and CopyCat will generate React code instantly. Check it out here: CopyCat Setup Instructions: Step 1: Download CopyCat plugin on Figma Step 2: Open CopyCat on the figma file you want to run the plugin on. You can find the plugins by clicking the Figma logo in the top left corner and clicking on the plugins option. Step 3: Generate React code! Select the parent frame of the design you want to convert and CopyCat generates code from Figma instantly.

Good day, fellow designers I would like to share my latest creation with you. It’s my own brew of a multi-brand design system. It’s less about the system itself, but more about tools and workflows to make it work. Medium – 23 Feb 24 In the article, you will find links to the system, plug-in, design samples and a story about how I made it work. Have a nice read 😉

When ever you use community and copy a design file from there and come back to community and want to go back to your search results but the back buttons are disabled not working properly this is a bug i dont think this is intentional many people have posted the same problem from past few years and still it is not fixed i don’t know why but giving feedback is useless these days smh

Hey Figma community! I’m thrilled to introduce “Parrot,” a powerful plugin that simplifies the translation management process right within Figma. If you deal with multilingual design projects and want to streamline your translation workflow, this plugin is for you! 🌎 Key Features: Design in Different Languages: Create and manage multiple language versions of your designs within the same Figma file. Say goodbye to swiching interfaces for text and translation managment - all right within figma. Translation Keys Made Easy: With Parrot, managing translation keys has never been more convenient. Assign unique keys to design elements and update them directly within Figma. Import from Android and iOS: Seamlessly import existing translation keys from Android and iOS projects or i18Next JSON files to jumpstart your localization efforts. Export with Ease: Effortlessly export your translated content to Android and iOS projects for a smooth handoff to developers. i18Next and CLI support is

I made my first plugin with my friend! It’s fairly simple but I wanted to share it with you. ColorValue writes out the values of selected colors or updates a text label with the color value of the selected shape/frame. If you have any feedback please let me know! Thanks always.

I’m really excited to announce our new Figma Chart Builder Plugin. This plugin allows you to interactively create/edit/insert charts with layers! Currently it supports 11 chart types with a variety of options on each chart. You can get it today as part of our Figma + React data viz library called Unify Viz. Check it out here: https://unifyviz.com

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 🙂

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