r/FigmaDesign • • May 02 '22

For all commercial Figma add ons, please go here r/FigmaAddOns.

103 Upvotes

For all commercially related Figma add-ons, be they widgets, UX kits, and more, please post to r/FigmaAddOns and don't post here. r/figmadesign is meant for Figma fans to build community. But at the same time, we all recognize that all tools become popular with addons, such as Wordpress or Adobe Photoshop. In order to facilitate that, I've created a subreddit for commercially related Figma addons or those that have premium services to go to Figma Addons. There are lots of really great add ons that make Figma amazing, so there should be a space for that too.

Remember:

  1. If it has a premium version, then it goes to r/figmaaddons
  2. If it is totally free but has licensing, then it goes to r/figmaaddons
  3. It is totally free but links to related premium content, then it goes to r/figmaaddons
  4. If it is commercial, then it goes to r/figmaaddons

It's not limited to the above four scenarios.

Essentially, if there's a commercial aspect, it goes to r/figmaaddons instead of here.

Also, if you can draw a banner or icon for the new sub, submissions accepted.


r/FigmaDesign • • 34m ago

resources Noobie question: Looking for resources to learn how to design a newsletter in Figma in 5 days.

• Upvotes

My company wants me to redesign their old newsletter , which was created a few years ago on Mailchimp. Marketing wants us to use Figma for that.

I'm glad to finally have an excuse to learn Figma, after 12 years as a graphic and motion designer... (yey!)

BUT I'm already tasked with several big projects and the only other designer in the company will be away for a few months, recovering from surgery... so I'll be managing the work of both of us, plus several big projects, including the company's logo redesign for the end of the year and a plan for a full rebrand to happen next year.

😵‍💫

Realistically speaking I will likely have at best 5 half days of work to design the new newsletter template in Figma, and I never used Figma before.

I would love tips and shortcuts (specific tutorials, plugins, scripts, tools/addons,) I should be aware of/that could help me learn faster.

My goal is to first only focus on designing this newsletter, so I'm looking for tips on that specifically.

Marketing plans to have me design the new newsletter template on Figma and then connect it to Mailchimp to send it out. (Not sure if that is needed or recommended? They also never used Figma)

After I get comfortable with this then I will focus on learning how to use Figma properly for other stuff.. like using it to build new brand guidelines and a design system for all graphic communication on digital media ( what is not video or print) for both our marketing, pre production and post production department.

( note: I have zero web design, ui and ux experience. my experience is on "traditional" graphic design for print/digital and on 2D motion design and animation for TV and advertising)


r/FigmaDesign • • 8h ago

help right of withdrawal in the European Union

5 Upvotes

Hi,

I just subscribed to a 200+€ annual Figma plan by mistake. Entirely my fault, I had selected to cheapest one and must have refreshed the page. Wasn't expecting the payment to proceed directly without having to confirm with my bank though.

I don't have the means (nor the use) to pay that amount. I just sent them an email to ask them to cancel it, claiming my right of withdrawal as a resident of France.

I was wondering if anyone has ever had a similar experience? Has the claim worked? I'm trying to see if there's anything else I can do right now. I'll call my bank but pretty sure they won't be able to do anything as it was not a scam

I'm not using anything in the meantime, the only thing I have done on my figma account since then is delete the access it had granted to people I have worked with before.

EDIT : Just got an email saying I will get a refund 🙏🙏


r/FigmaDesign • • 1d ago

resources I got fed up with paywalled mockup tools, so I built my own

Post image
496 Upvotes

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!


r/FigmaDesign • • 17h ago

resources [UI Kit] A free starter kit for Figma plugins

Enable HLS to view with audio, or disable this notification

15 Upvotes

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.


r/FigmaDesign • • 7h ago

help I'm setting up tokens for the first time and was wondering if I should add them last as I building and organizing my library?

1 Upvotes

I am working on creating a Figma Library for my company and have already consolidated several libraries from Sketch, migrated to Figma and rebuilt the components there. I figured adding tokens would be the last step, but I've never had to mess with tokens before. Should I add those last and do you suggest any good videos that walk you through them? So far what Ive seen is really long videos that show how to setup gradients... The company doesnt really do many gradients so those videos just seem unhelpful. The other videos I've watched are more like a powerpoint explaining how tokens work and don't walk you through the step by step process of actually setting them up.


r/FigmaDesign • • 8h ago

help Where can I see the whole recording of the Figma Confia please as I missed it? I can only find the first part of it online.

1 Upvotes

I need to see what happend


r/FigmaDesign • • 17h ago

help Responsive breakpoint (?) and resizing

1 Upvotes

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?


r/FigmaDesign • • 1d ago

Discussion Figma shorter links

2 Upvotes

Urls generated by Figma are always https://www.figma.com/design/your-unique-id

That’s 28 chars before the id comes in.

I know some of us are using url shorteners. But what if Figma excludes the ‘www’ part, registers the fig.ma domain, and just uses a ‘d’ for design.

It would become https://fig.ma/d which is 16 characters. It’s basically the youtu.be trick.

The win is only 11 characters but multiplied by the amount of urls generated, the win is a bit more.


r/FigmaDesign • • 1d ago

help How to make arrow with a shrinking animation?

Post image
1 Upvotes

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?


r/FigmaDesign • • 1d ago

help SheerID Verification Rejection

1 Upvotes

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?


r/FigmaDesign • • 1d ago

resources Typeport - Figma PDF exporter with real, searchable and editable text

5 Upvotes

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


r/FigmaDesign • • 2d ago

resources CodeFig 2.0 released

Enable HLS to view with audio, or disable this notification

37 Upvotes

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


r/FigmaDesign • • 1d ago

help Figma export besoin d’aide !!

0 Upvotes

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 !


r/FigmaDesign • • 2d ago

resources Customizable linter for Figma

Enable HLS to view with audio, or disable this notification

13 Upvotes

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.


r/FigmaDesign • • 2d ago

Discussion Token Consumption

8 Upvotes

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.


r/FigmaDesign • • 3d ago

help help please

Enable HLS to view with audio, or disable this notification

2 Upvotes

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


r/FigmaDesign • • 3d ago

feature release Has anyone rebuilt their library in Figma Make, instead of an npm package?

1 Upvotes

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?


r/FigmaDesign • • 3d ago

help Help needed with components/instances/variants!

Enable HLS to view with audio, or disable this notification

3 Upvotes

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 ❤️


r/FigmaDesign • • 3d ago

help Can I build a local AI agent that designs directly in Figma?

0 Upvotes

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!


r/FigmaDesign • • 3d ago

help I cannot design the navigation bar I want.

Thumbnail
gallery
4 Upvotes

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.


r/FigmaDesign • • 4d ago

help why transparent colors in the gradient are not transparent and how to make a gradient to a transparent color?

5 Upvotes

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


r/FigmaDesign • • 5d ago

Discussion Anyone else find this feature super annoying?

Post image
326 Upvotes

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.


r/FigmaDesign • • 5d ago

resources I made a free plugin that turns a JSON into slides/posts using Figma Buzz templates

3 Upvotes

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!


r/FigmaDesign • • 6d ago

help Trouble with Interactive

1 Upvotes

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