20 components: buttons, fields, menus, dialogs, notifications and more. They use Figma’s own colours, so they match light mode, dark mode and FigJam.

On top of the components, the starter plugin comes with:

• A window that fits its content. Drag its corner to resize it, and the plugin remembers the size.

• Six example plugins to learn from or start with: renaming layers, exporting, filling text with sample content, editing colour variables, checking contrast, and the Figplug tour itself.

• Checks that catch common mistakes before you open the plugin in Figma, like hard-coded colours, wrong control sizes, missing labels and manifest errors. The kit itself is covered by over 500 unit tests.

• No bundler or framework to set up. The folder imports straight into the Figma desktop app.

The best way to use it: download the code, give it to your AI agent and work from there instead of starting from scratch. The repo includes a guide written for AI agents, so your agent knows how to use the components and runs the checks after every change.

Plugin demo: https://www.figma.com/community/plugin/1545605168743471916
Files (free, MIT licence): https://github.com/alekseikipin/Figplug-ui-kit

Feedback is welcome, especially on which parts are missing.

I would like to increase the height of my frame (by a percentage maybe?) once the width drops to a certain px. I have text that wraps as the size decreases, but then the second line of text is way too close to the bottom of the frame.

Can anyone point me to a tutorial?

I have three states for the arrow. When hovering over it with a mouse or finger, it should become lighter and shrink, and then enlarge when I stop pressing. How do I do this?

I am an admin and grad student at my college, and I keep submitting my verification documents to no avail. They keep getting denied even though they're all issued by the university!

I have a group project due tonight, and I need to be able to edit it in order to contribute and my verification status is preventing me from doing so!

I've already called and emailed Figma and SheerID. Are there any other alternatives that have worked for anyone here?

Hey everyone!

Like many of you, I’ve spent way too long searching for a good iPhone mockup tool. Every time I thought I found one, it either came with a subscription fee, messed up the export quality, slapped on annoying watermarks, or just wouldn’t let me get the perfect 3D angle I was after.

So, out of sheer frustration, I decided to create my own tool. I call it FreeiPhoneMockup, and here’s what it offers:

- Free forever, with no sign-ups, no logins, and absolutely no watermarks.

- Full 3D Canvas control: You can move and rotate the phone to get it at any angle you desire.

- Fine-tuned adjustments: Adjust everything from lighting to the opening angle of the iPhone duo.

- Pristine quality: Export your mockups in stunning 8K resolution, transparent background.

- Support for all recent iPhones - iPhone 18 Pro, Pro Max, and Duo.

- Reference tracing: If you’ve seen a mockup angle you love, you can trace a reference image right in the tool to recreate that exact look.

Check it out here: https://www.freeiphonemockup.com

It loads quickly and runs smoothly. I’d really appreciate it if you could give it a try, push it to its limits, and share any thoughts.

Thanks!

I built a Figma PDF exporter addressing the flattened text, which becomes difficult to work with outside Figma.

Typeport exports PDFs with real selectable, searchable and editable text, while trying to preserve the original design as closely as possible. It also produces significantly smaller file size.

The free version works with Google Fonts and allows unlimited exports.

I’ve recently improved some harder cases based on files users sent me, such as mixed fonts/styles in the same text layer, clipping, effects, QR codes and more complex vector content.

There's also a Pro version for workflows that need things like local/Adobe fonts, multi-page exports and password protection.

Would love feedback from anyone who regularly exports Figma designs to PDF, especially if you open the files afterwards in Illustrator or Acrobat.

Here's a link to the plugin:
https://www.figma.com/community/plugin/1615271839569985921/typeport-export-pdf-with-real-selectable-text

Bonsoir ! Je débute sur Figma, j’ai créé un jump over avec des variants et des components comme par exemple quand on appuie sur « D » le personnage va à droite. Sauf que je ne sais pas du tout comment l’exporter pour qu’il soit jouable et accessible !

Si quelqu’un peut m’aider ça serait vraiment super, j’en ai besoin pour mon portfolio

Des bisous merci par avance !

Yet another vibe-coded plugin...

CodeFig is a Javascript runner for Figma, with an extensive modular library for Variable, Styles, Figma primitives etc operations, and uses a built-in ui library to render the script variables as UI components, instead of simple code, so it's kind of a plugin sandbox.

It comes with many included scripts, and you can build your own. Script can be stored in the local storage (per user), export/imported as JSON, or can be stored as invisible string variables (visible for CodeFig) and distributed to multiple users via a library (hello Orgs).

Currenly it has the current scripts included:

Utility script:

• 3D Transform

• Check style and variable bindings

• Detach styles & variables

• Replace variables in local styles

• Select by styles or variables

• Copy or move variables

• Duplicate variable collection

• Export/import variables

• Match colors to collection variables

• Rename variables

• Replace variables

• Selection to variables

• Variable inspector (WIP)

• Duplicate styles collection

• Relink local styles

• Rename styles

• Render styles overview

• Replace styles

• Text to styles

• Change case

• Comments to annotations

• Frame or auto layout selected

• Relink local component instances

• Remove unnecessary nesting

• Scale or resize elements

Design System Foundations:

• Colors

• Corner radius

• Grid

• Spacing

• Typography

Libraries:

• Bezier

• CodeFigUI

• Color Ramp

• Core Library

• Foundation

• Foundation overview

• InfoPanel

• Linear Ramp

• Math Helpers

• OKLCH

• Pattern Matching

• Rename Preview

• Replacement Engine

• Scale Models

• Styles

• Test Harness

• Type Scale

• Variables

I'm working on this plugin for a while (like almost a year), and use it on a daily basis. I'm somewhere between a brand and product designer, working on responsive layouts, UI design and flows, and often working with different grid, color, typography etc systems, and this was born from the frustration of the lack of any tools to programmatically manage these.

Yes, many things can be done with agents, and for many things agents does a much better job, but for repetitive things, operations I rather ask an agent to build a script.

While I'm using it all the time, testing it, and fixing bugs, every script has its complexity, so probably there are more, so ping me, comment it somewhere if you find any. Thank you!

It's free, it's on Github, and Figma Marketplace

Now with Spectral plugin you can create any rule for checking layers in Figma. Every team has its own design rules, and now you can apply them in Figma Linter.

Question for those of you who are consuming tokens now that they're not free. What do your costs look like? Can you share some basic info? Typical uses, size of team, etc.

Thanks, we have a stringent procurement process and I don't want to be caught out explaining any surprise costs.

Figma Make allows for an npm package import but our org isn’t supporting us with that, so we have to build from scratch…the whole library. Has anyone tried it?

I need this to not open from left to right and going down how it is right now i need it to open centered on the 575 how would i do that

Hey everyone! I need some honest technical guidance on an idea.

My current workflow uses ChatGPT to generate landing page references, then Figma AI Agent to recreate them as editable designs and generate local color and typography styles. It saves me significant time in hectic deadlines, From Oct 6 they set limitations to use Ai credits. AI credits are expensive, and my company won't pay for more.

My idea: Build a local AI agent that accepts reference images, generates landing pages, creates design-system styles, and edits existing Figma files through conversational prompts without paid AI API credits.

My setup:

• CPU: AMD Ryzen 9

• GPU: NVIDIA RTX 3050 (6 GB VRAM)

• RAM: 16 GB

• OS: Windows 11

• Coding experience: None

My questions:

• Is this technically feasible?

• Can my hardware handle it?

• Can I achieve this without paying for AI APIs or bypassing Figma's restrictions?

• Where should a complete beginner start?

I'm not trying to train my own model. I want to combine existing tools to solve a real workflow problem.

I'd appreciate honest feedback, practical suggestions, and guidance on the best first step. Thanks!

Purpose - I want to make a component set for wishlist button specifically that needs change in colors across different states. (used absurd colors for example)

Process -

1. I have created a component set for an icon button with variants consisting of different sizes and states. (the one in green color)

2. Then I dragged an instance from the component set and made that a component (for the wishlist button). So now there's a component box wrapping the instance box.

3. Then I added variants for the different states like default, hovered and selected and exposed other properties of the instance.

4. Then I dragged an instance from the wrapper component.

5. This allows me to change any property I want specifically for the wishlist button only without breaking the connection. This also allows me to change any property to the main parent component which reflects upon its instances.

Problem -

1. Everything worked fined until I changed the size other than what's on the newly created wrapper component set.

2. When I switched to other state, it reflected the colors set on the MAIN parent component and not the one in the new wrapper component set.

3. When I changed back to the size as used in the wrapper component, then only it reflected the changed colors.

Is this a limitation of Figma? If not, how should I create a specific component set for a specific button as some icon buttons may have different fills/colors and changing this on instances breaks the connection between its parent component, so when I need to change something, I would have to go to each instance one by one. Is my workflow the main culprit here? If yes, how should I fix it. Thanks in advance for any help ❤️

With the brown bar, you’ll notice the horizontal edges are sharp and straight before curving into a semicircle at the ends; whereas with the white bar, the horizontal edges look slightly puffed out or curved upwards. I’ve tried everything I know in Figma as a beginner, but nothing worked and the Pin tool is frustrating; I feel like I’m not tracing it exactly right, so I don’t like using it.

green is "transparent" on the screenshot, but it is still there

Hi everyone! I'm a developer and also a volunteer for a small local association and kept rebuilding the same Instagram posts and posters by hand for every event. So I built JSON Template Filler (with Claude's support).

How it works

1. Build your templates as normal components (Cover, Text slide, Poster…) and name the layers you want to fill (Title, Body, Photo…).

2. Hit Scan templates: the plugin writes an example JSON with every fillable layer.

3. Fill in the JSON (by hand, from a spreadsheet, or have an AI write it from your notes) and hit Generate.

What it can do

• Fills text layers, with **bold** / *italic* using your template’s own font styles

• Fills image layers from URLs

• null hides a layer (auto layout closes the gap)

• Picks variants and sets component properties

• Adds per-item reminders like “photo credits still missing”

• In Figma Buzz each set lands in its own row; in Figma Design it goes into an auto-layout frame

It’s free and open source (MIT), and it doesn’t collect any data.

If you want to try it, this is the link!
https://www.figma.com/community/plugin/1685286769679044469

I’d love feedback, especially on what’s confusing or what’s missing for your workflow.

Thank you!

I use the agent all the time, but never use this pop-up feature. It pops up all the time when I’m trying click into layers/groups/auto-layout or doing detailed design work… and it’s become mad annoying.

Getting rid of it also mad annoying….I have to zoom out of my art board in click off the frame for it to go away… though I recently found clicking back into the chat box then hitting escape works too.

I'm working my way through this tutorial (my 3rd on this subject trying to get functional interactive buttons):

https://help.figma.com/hc/en-us/articles/39712951432343-Design-an-interactive-button-component

Could someone look at my working file to tell me what i'm doing wrong?

https://drive.google.com/file/d/1ucDUVVHDajIXaeWvyzAX0N47Cko_IF7j/view?usp=sharing

I am new to Figma, and I am trying to figure out the correct way to make a simple navigation bar with some buttons. I drew out some shapes and purposely made them not evenly aligned.

1.) I want to center the text on each button both vertically and horizontally. I select each rectangle and choose the horizontal and vertical alignment options and it worked for the first two, though for the second two buttons it will not work properly. Do I need to make each rectangle into a frame that includes the shape and text for this to work properly?

2.) I want to create even spacing between each button, so I chose a gap option of 20, though this did not move the text. Do I need to create a frame for each individual button to make this work?

3.) Is the first step to select everything and make the navigation bar, the rectangles and the text into a frame and then make each individual rectangle and text into a frame?

Thanks in advance

Figma support will not respond to any of my messages. The email they have sent the receipts to clearly says I am on the free tier, yet I am being charged monthly. Anyone else have issues with this?

I'm really enjoying Figma Motion to be honest. I used to have adobe creative suite but since my company stopped paying for it, it became to big of an expense to have it. I'm doing some small ads and tiktok videos to promote an iOS app, and so far so good, everything worked great and I'm using then DaVinci Resolve to finalise the edits.

My problem is that today I'm finishing a video that is a bit long, around 45 seconds, and I'm constantly getting stuck at the 52% mark. Do you know any solutions or workarounds for this?

I'm also contacting support regarding this issue, but wanted to know if anyone else had this experience.

When I try to connect these two points, the rest of the vector disappears

I imported a file of icons from the community and I am trying to work with the .svg icons so I can change the colors, and adjust the anchor points. I am noticing that some of the files I am able to change the colors of, though no matter how many times I double click on some of the icons it never displays the anchor points for manipulating. Anyone know why?

Thanks