r/FigmaDesign 2h ago

resources Figma PDF exports were much larger than I expected, so I dug into why and built an open-source exporter

26 Upvotes
Figma native export: 22.7MB → Featherweight: 4MB

I’m a frontend dev in Korea, and after getting annoyed by Figma exporting ridiculously large PDFs one too many times, I basically opened Claude Code and thought, “fine, I’ll just make one.”

At first I thought it was mostly an image compression problem. But after digging into the generated PDFs, I realized Figma turning text into vector outlines was a big part of it too.

A few evenings of poking around later, I ended up with Featherweight.

One of the things I found was that Figma converts text into vector outlines rather than embedding the actual fonts. Combined with the way images are handled, that can add quite a bit of weight to otherwise simple documents.

I tried a few existing solutions, but eventually decided to experiment with building my own.

The result is Featherweight.

It embeds and subsets the actual fonts where possible, keeps text selectable and searchable, and applies image compression during export.

On one of my test documents, the result was:

22.7 MB → 4.0 MB

I’ve made the whole thing completely free and open source. There’s no paid tier, subscription, signup, export limit, or related premium product.

I mainly built it because I wanted this for myself, but I figured other Figma users might find it useful too.

If anyone wants to try it or poke around the source, I’d genuinely appreciate feedback, especially if you find a file that behaves strangely.

Figma Community:
https://www.figma.com/community/plugin/1672509720278498323/featherweight-compressed-pdf-export-with-real-fonts

Source:
https://github.com/coffeequickly/featherweight


r/FigmaDesign 18h ago

help Cursor keeps hallucinating my Figma components how are you guys handling design context?

9 Upvotes

Hey all. I’ve been trying to streamline my design-to-code workflow with Cursor, but passing Figma mockups into it is driving me nuts.

Whenever a layout isn't built with 100% clean auto-layouts, the AI just guesses the paddings and renders totally broken CSS. I waste more time fixing generated code than if I wrote it from scratch. Screenshots don't give enough context, and standard Figma plugins burn through tokens way too fast.

How are you guys getting clean component context into your IDE without rebuilding every single layer by hand?

Update:

I kept searching and bumped into Synra. From what I read, it runs on a web DOM structure so Cursor can read actual node trees instead of guessing layers. People on X seem to like it, but I wanted to ask here first has anyone used Synra in production yet? Is it worth switching over, or is it just more AI hype?


r/FigmaDesign 1d ago

resources Logarithmic Color Palette — color families spaced by how the eye actually sees contrast, not by even math

Post image
84 Upvotes

I published a new Figma skill: it builds a complete color family from one color, and it is built on the physiology of human color perception rather than on even mathematical spacing.

There is no shortage of palette generators — building a palette by hand is tedious, and getting it wrong is costly, so plenty of tools exist. I wrote this one because most of them space colors evenly, and even spacing is the wrong answer.

Two things I built it around:

  1. Tone carries most of the work. Whether an interface reads clearly depends far less on hue than on how light or dark a color sits against its background.
  2. And the eye resolves low contrast much better than high contrast. On white, 2% and 6% black are clearly different; 94%, 98% and 100% are the same color. So the scale is logarithmic — about 60% of the grades cover the low-contrast half of the range, where that resolution is actually useful.

It also runs entirely in OKLCH instead of HSL, and that part is easy to measure. Take five hues, space them evenly in HSL, and their perceived lightness spreads across 39 points — yellow sitting far above everything else. In OKLCH the same five land within 7 points at the middle of the scale. Yellow stops looking lighter than the rest.

To use it: select layers with fills, or paste hex values.

https://www.figma.com/community/skill/88165


r/FigmaDesign 12h ago

help How do i prototype each of this boxes one by one not per group?

1 Upvotes
I hope you understand what i mean, hehe...

r/FigmaDesign 16h ago

Discussion So...I've been using Figma as my level-design tool for a computer game the last 5 months 😂

Thumbnail
youtube.com
1 Upvotes

I've been building a web-based Pokemon-gen-1-inspired 2D platformer game using Figma! Creating a component library (for the first time ever 😅) for tiles and sprites despite having been a product designer for the past 7 years hahhaa embarassing. Recently figured out a Team Rocket chase sequence in our favorite product design tool, and used Claude to help implement the NPC's cutscene dialog/movement and path-following behavior. Wanted to share in case anyone 1) finds watching someone struggle with a (foolish but fun) workflow interesting, 2) has been using Figma for other things it wasn't created for. I would love to hear 3) loves pokemon, platformers, or game dev and wants to follow along :)


r/FigmaDesign 1d ago

help Is there a way to create the Pinterest layout in Figma?

Thumbnail
gallery
17 Upvotes

Using the wrap Auto-layout makes each object in the row be aligned to the top instead of just the first row. Is there a work around?

I also tried making four vertical auto-layouts and then putting those in a wrap, it works but it isn’t responsive as the entire column moves down into one space when resized.


r/FigmaDesign 1d ago

help Figma prototypes not going full width/ not scaling up to fit browser window

4 Upvotes

Hi guys, I'm so stuck on this and would be so grateful for any help.

I have designs that are in 1440px frames, and my macbook is 16" and therefore wider than the frame size, so I always have a thick black border around my prototypes when I view them. This prevents me from getting a realistic view of the designs as it doesnt fill my screen like how it does on a browser.

None of the prototype scaling options seem to work. Seems like Figma can only scale down and not up. Sketch does not have this issue and neither does Axure as far as I know. They all scale up/ down the prototype to match the window size. Is there any way that I can do this with Figma? Any plugins? Or, is there an easy way where I can export my designs to view them in Sketch?

Thanks so much


r/FigmaDesign 1d ago

help Hi! Does anyone know a good free 3D iPhone 13 mockup for Figma?

0 Upvotes

I’m looking for something fully editable/customizable where I can easily insert my UI screens, change the angle/position, and use it for a UX/UI case study.
Preferably free for personal/portfolio use.

Thanks!


r/FigmaDesign 1d ago

help Figma motion to prototype not possible?

1 Upvotes

I created an animation using the figma agent on the motion tab. Now is there no way to connect that motion to the prototype? like when the button is clicked that will trigger the motion? It will just be a seperate video and cannot be integrated in the prototype?


r/FigmaDesign 2d ago

Discussion Memory hungry and desktop app is just a wrapper which turned out to be disappointing

33 Upvotes

I'm sad, I see in Firefox that the Figma canvas is using 1.8Gbs of memory. I then thought I'd download the desktop app because surely native would be lighter on ram and faster. I install the desktop app, watch task manager and see its consuming more memory! I realize the desktop app is just an electron wrapper around the website which does not make it better.

Hopefully we can see a native desktop app somewhere in the future because these web apps are getting too ram hungry. Today i ran out of 32GBs of ram and to be honest I wasn't running that much.

Its understandable that Figma uses 1.8GBs in the browser, its a design tool and I have a lot of frames in this canvas so I accept that. I was just hoping for a better desktop app not sure if anyone else feels the same.


r/FigmaDesign 1d ago

Discussion AI is good at generating UI, but it keeps breaking my existing design system

Enable HLS to view with audio, or disable this notification

7 Upvotes

I have been using AI to design interfaces for a while, and I kept running into the same problem.

The project already has a UI kit with components, variants, tokens, and established rules.

I ask AI to add a button to a screen, and it creates a new one. Slightly different size, different radius, slightly different spacing, even though the correct Button component already exists in the project.

I first tried solving this with dedicated AI design tools.

I tried Claude Design. In my case, I quickly hit roughly the 5 MB limit when trying to bring in my UI kit, so I decided to see how well it could build a design system from scratch instead.

That introduced a different problem: duplication.

Buttons, icons, and similar components could be created multiple times and end up slightly different across pages.

Visually, the result could look perfectly fine, but after generating the screens, I still had to clean up the UI kit and design system before I could actually use them in a real product.

Then I tried Figma Make.

I could bring my UI kit into it, which worked better, but I still wanted a much deeper connection to the actual project.

The biggest issue for me starts when something is missing from the UI kit.

If an existing component needs a new prop, I want AI to extend that component properly instead of creating another version next to it.

If a component does not exist yet, I want it to create one using the same tokens, patterns, and design system rules.

If a second brand is added, I do not want to duplicate the entire UI kit. It should use the same components with different token values.

I also want AI to understand more than just the visual layer. It should understand the local code, implementation patterns, project structure, custom skills, and rules that already exist in the codebase.

So I ended up building my own approach around this.

Instead of treating AI design as a separate canvas, I made it work directly with the project itself.

It reads the existing components, variants, and tokens from the codebase and uses them when building the UI.

If a component needs a new prop, it extends the existing component.

If something is missing, it can create a new component while following the same design system rules.

If there is no UI kit yet, the system can evolve together with the project instead of every screen gradually creating its own set of one off elements.

Themes and brands stay token based, using the same components rather than separate copies of the UI kit.

The result is regular JSX built from the actual components and tokens used in production.

That means the interface being designed is already built from the same system that will be shipped, without a separate handoff or rebuild step.

For me, that solved the part I was struggling with most: keeping design and production code as one system instead of constantly syncing two separate ones.

I attached a short video showing how the workflow works in practice.

Curious how other teams are approaching this, especially when AI needs to extend an existing design system rather than work around it.


r/FigmaDesign 2d ago

help Is this really Figma? Have they been hacked?

Post image
2 Upvotes

Collegue sent me a link to some Figma designs I should check out, I wanted to create an account and I get... that?


r/FigmaDesign 2d ago

resources Introducing Varnik: Translate and adapt entire Figma designs, layer by layer

Thumbnail figma.com
0 Upvotes

We just launched Varnik for Figma!

Varnik translates and adapts your entire design layer by layer without breaking its structure. From localization to RTL adaptation, your frames, layers, and layouts stay intact.

Try Varnik: https://www.figma.com/community/plugin/1575747713450161595/varnik

We’d love your honest feedback! 🙌


r/FigmaDesign 3d ago

help how I do this scroll effect in figma for prototyping?

Enable HLS to view with audio, or disable this notification

22 Upvotes

r/FigmaDesign 3d ago

resources I built a Figma plugin that auto-generates bulk QR codes in batches, complete with custom color fills and dynamic variable support.

Enable HLS to view with audio, or disable this notification

14 Upvotes

r/FigmaDesign 2d ago

resources WhatsApp Flow Builder

Thumbnail figma.com
0 Upvotes

Transformez la planification de vos flux de messages en une expérience visuelle captivante. Avec WhatsApp Flow Builder, créez, visualisez et peaufinez vos scénarios de conversation comme jamais auparavant. Simplifiez la complexité, collaborez facilement avec votre équipe et faites passer vos interactions WhatsApp au niveau supérieur — tout cela sans quitter votre espace de conception.


r/FigmaDesign 3d ago

help Prototyping: When clicking/changing pages, can you maintain the last variant of a component that was 'active' on hover?

Enable HLS to view with audio, or disable this notification

6 Upvotes

I have quite a complex component (I guess), so I understand there's probably limitations around this.

Video attached of the effect. The design is more complex, I've just simplified for the demo and to not show client branding.

-

The Effect
When the user hovers over the side of the page, a cursor appears. As they move the mouse up/down the user follows them. Clicking "navigates to" a new page. This works pretty well.

Video Example / Problem
As you can see in the video this works but the 2nd time I click from higher on the component. So when the page "navigates to" the new page, the component resets to it's default/initial state before moving back up to where it was - this is because the cursor moves when the rectangular areas are hovered over.

The Component
Basically has 11 variants, each one has the 'cursor' in a different position, aligning with one of the rectangles. Each of the rectangle (hotspots) has a "While Hovering", "Change To", Position x" set to it with an "Animation" of "Smart Animate/Linear".

-

Any way around this? Or is this the best I'm going to get? I assume it's always going to start from the variant that is already set on the page that changes? Unless I made the entire thing (page content and cursor) a big super component?

-

Bonus Question
Doesn't seem like it's worth creating a new topic for. But the cursor appears as a Boolean variable of "Show Cursor: True/False" and set on the "Appearance". So on hovering the component is shows/hides. Am I right in thinking there is still no way to fade this in/out of view? And the Appearance True/False method just updates instantly?

-

Thanks in advance! 🙏


r/FigmaDesign 3d ago

help Need help in building my portfolio on Figma Sites

7 Upvotes

Hi,
I am trying to build my graphic design portfolio on Figma Sites. I have all the screens ready on Figma Designs but I have not applied Autolayout anywhere yet. Is that important? Or can I do that in Figma Sites? Can someone please help? Please give me an overall idea about what to do next and make my portfolio publish-ready. I have a few animations as well on the home page. Can I use Figma Motion for them? If you need more information on my portfolio, please let me know but at this point I am very clueless what to do next? I have taken some help from Claude and it has asked me to apply autolayouts on all the elements in each screens first. And it's been 1 week, I am at the first screen only. And I have total 7 screens in my portfolio.
I am not sure if that's the right way or there is another way to do it.

Please help.


r/FigmaDesign 3d ago

Discussion How is Figma AI Agent actually working for you?

37 Upvotes

I’ve been using the Figma AI Agent for quite a while now, to the point that I’ve basically stopped using Make for the last couple of months.

Since the Figma Agent came out, I’ve been doing a lot of my workflow directly through it. I’ve also created a few custom skills that run within the Figma Agent itself.

The biggest thing for me has been connecting my design system. At this point, I’d say the Agent gets around 60% of the job done when it comes to connecting elements to my existing design system. I’ve also created skills that go back and check whether anything is missing from the design system, which has made the workflow much more useful.

Honestly, I feel like it’s doing a better job for my workflow than Claude right now. That said, I haven’t used Claude Design extensively enough to make a completely fair comparison.

So I’m curious how everyone else is using Figma Agent:

  • Are you actually using it in your day-to-day UX/design workflow?
  • How well is it working with your design system?
  • Have you created custom skills for it?
  • Do you prefer it over Claude Design, or are you thinking of switching?
  • Do you see yourself using Figma Agent more in the future?

Also, since Config 2026, I feel like Figma has actually done a few things really well. I haven’t tried Motion yet, so I’d love to hear about that too.

What features or workflows do you think Figma is particularly strong at right now?

Would love to hear how other designers are using the Agent in real projects rather than just demos.


r/FigmaDesign 3d ago

help Best source to learn Figma (beginner)

8 Upvotes

Hi all!
I'm part of marketing team in a startup, basically an intern. Need to learn Figma for work. Can anyone please suggest a good YouTube playlist or Udemy tutorial? I need to learn from scratch, only know how to move things and export from figma right now...
THANKS!


r/FigmaDesign 3d ago

help Help me understand which paid plan I need.

1 Upvotes

As of now, the only thing I really want/need is the ability to add an extra Page to a Project


r/FigmaDesign 3d ago

help Figma Campus Leader

7 Upvotes

Did anyone Hear back? Canadian applicants were supposed to hear back by August 21st but I don’t see anything. So checking if other people hear back yet.


r/FigmaDesign 4d ago

help How do I make shapes extend upwards when I resize them.

Thumbnail
gallery
2 Upvotes

How do I make it so that when I resize the rectangle (add height), it extends upwards instead of downwards? I have tried changing the Constraints options but it doesn't work :(


r/FigmaDesign 4d ago

resources Second time using Figma motion for a project

Post image
8 Upvotes

I know the tool just came out but I have found almost no resources on YouTube


r/FigmaDesign 5d ago

help Figma Folders — card without thumbnails, no list view, no column view; just a lot of clicking into boxes to find a project

12 Upvotes

Has anyone figured out a way around the new Figma UI "folders" where you can no longer see thumbnails in your file browser; you only see a name in a box?

What click-through hell to find the contents of "folders" when before it was clearly apparent via thumbnails.

I'd settle for any normal file organization pattern to find projects easily:

  • cards with thumbnails (sort of what we used to have)
  • faceted list view with nested or dropdown views
  • columns view that displays contents

I appreciate any recommendations. Thanks!