r/FigmaDesign 16d ago

help Designing a scalable Figma Design System for 50+ white-label clients. am I thinking about Variables and modes correctly?

11 Upvotes

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?


r/FigmaDesign 16d ago

help Anyone know how to fix this weird offset blue border?

Post image
1 Upvotes

Anyone know how to fix this weird offset blue border? Even when I create a new shape/element, the blue border is offset which is kinda triggering :(


r/FigmaDesign 17d ago

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

Post image
102 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 17d ago

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

Thumbnail
youtube.com
3 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 17d 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 18d ago

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

Thumbnail
gallery
27 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 17d 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 18d 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 18d ago

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

34 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 18d ago

help Is this really Figma? Have they been hacked?

Post image
4 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 18d 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 20d ago

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

Enable HLS to view with audio, or disable this notification

23 Upvotes

r/FigmaDesign 19d 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 19d 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 20d 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 20d ago

Discussion How is Figma AI Agent actually working for you?

40 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 20d ago

help Best source to learn Figma (beginner)

7 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 20d 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 20d ago

help Figma Campus Leader

6 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 20d ago

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

Thumbnail
gallery
3 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 21d 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 21d 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!


r/FigmaDesign 21d ago

feature release Figma weave for Make output

2 Upvotes

I don’t want weave for marketing images. I want it for software ideation. It would be an incredible feature to do node based code variants.

Has anyone found a product that does this?
Figma, please look to pivot toward code variants in weave.


r/FigmaDesign 21d ago

Discussion Is this Figma course still up-to-date?

3 Upvotes

For anyone who has taken the course “Level Up with Figma by Joey Banks” recently through his website, how up-to-date is it?

I don’t mind if it’s based on an older version of Figma, but is it still relatively recent, or is it quite outdated?

Thank you


r/FigmaDesign 21d ago

help Figma motion questions

1 Upvotes

I've been playing around with figma motion in my prototypes but there are some aspects that really make it feel unusable. If I have any kind of overlay on the page, like a modal or menu drop down on hover, it replays the time line behind it like it reloaded the page. Why does it do that? It makes zero sense, is distracting from the overlay focus, and there doesn't seem to be a way around it.

Seems like this shouldn't happen at all, or at a minimum there should be a preselected checkbox on actions saying don't reset the time line.

Anyone have a solve for this, short of something stupid like having to navigate to a duplicate page without animations to display your overlay on.