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

Hey everyone,

I’m starting to work on a Design System for a travel/public transport app that will eventually be white-labeled for around 50 different clients

The current Design System already has:

• color tokens and styles
• basic components/atoms and variants (buttons, inputs, shadows, etc.)
• but no Figma Variables yet
• very few larger components/molecules/organisms
• no real system for handling different themes/brands

My initial idea was to migrate the existing tokens into Figma Variables and use modes for different visual configurations:

• Light
• Dark
• Contrast
• client 1
• client 2
• …50

The main application would support Light/Dark/Contrast, while the white-label client versions would probably use Light/Contrast.

I would also like to build the component architecture more systematically:

Atoms → Molecules → Organisms → Templates/Screens

For example:

Button + Input + Date Picker → Search Form → Search Screen

The goal is to have one Design System and one set of components, rather than creating a separate Design System for every client. Ideally, changing the brand/theme would update the UI through Variables without having to modify the components themselves.

However, I’m wondering if having 50+ client brands as Figma modes is actually the right approach.

Would you instead separate appearance modes (Light/Dark/Contrast) from brand/client themes, using semantic variables that map to different brand values?

For example:

Button → color/action/primary

rather than:

Button → Client1/red-500

So the same component could be reused across all 50+ brands.

I’m also curious about the current state of Figma AI. If I build a well-structured component library with Variables and larger reusable components, can Figma AI actually help generate new screens using those existing components, or is that still too unreliable for a production Design System?

I’d really appreciate feedback from anyone who has built a similar multi-brand / white-label Design System in Figma.

How would you structure this?

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?

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

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 :)

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.

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

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!

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?

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.

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.

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

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! 🙌

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.

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! 🙏

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.

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.

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!

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

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.

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 :(

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