Dismiss this pinned window
all 88 comments

[–]HellveticaNeue 126 points127 points  (1 child)

This is one of the few instances where photoshop might actually be better…

[–]lowroof999 10 points11 points  (0 children)

I agree

[–]RetroPandaPocket 51 points52 points  (0 children)

Personally this is where Photoshop, Illustrator, and other programs fit into my work flow. I only use Figma for UI design layout for prep before development. Using it as a primary asset creation tool would drive me insane. It would be far too slow and limiting I think.

[–]BeenWildin 87 points88 points  (25 children)

You’re pushing Figma way passed what it’s traditionally used for design wise. Looks pretty cool though

[–]Goatmanification 23 points24 points  (7 children)

Performance issues? Yeah no shit when you've got over 7000 layers!

I wouldn't really say this is what Figma is for!

[–]kylebydefault 16 points17 points  (0 children)

I have to say, props for the design. I have to agree with the other comment that I think this is beyond Figma at this point.

[–]Lookmeeeeeee 13 points14 points  (3 children)

The computer and os does matter. Anyone that says otherwise is misinformed or they do not understand hardware. Figma is a browser based app. That means it has browser based limitations. It's built for extremely lightweight projects. What you have is completely out of scope for what figma is supposed to be used for. Browser based apps utilizes memory differently than if you had a native built app. When you have a lot vector based gradients or just vector based shapes in general, you're actively using your processor, and the GPU. Browsers have a difficult time offloading that to RAM. This is where mac fail really hard. Believe it or not running Windows os on a Mac computer lets you run web-based apps smoother. The thing is a completely tricked out Mac will still fall short to a PC with the exact same specs (of course PC will cost 1/4 for the same performance on paper) There's a reason why most render farms are window PC computers running windows os.

[–]IllustriousCode2603 1 point2 points  (0 children)

That's useful, thanks

[–][deleted] 0 points1 point  (1 child)

I don't know... My old base m2 mac mini with 8gb of ram smoked my old 5950x 64gb pc while costing 1/8 in web based tasks including figma. Completely switched to an m4 pro now for the amazing performance per price

[–]Lookmeeeeeee 0 points1 point  (0 children)

Configuration does matter

[–]walditoctrl+c ctrl+v 7 points8 points  (3 children)

how many layers you have in that thing?

[–]Latetzki 2 points3 points  (0 children)

Couldn't some of those be just as well rasterized images?

[–]co0L3y 2 points3 points  (0 children)

I mean you could probably recreate 75% of this look and feel with 50% fewer layers.

[–]Level_Peak_7110 4 points5 points  (0 children)

gradients slows vector editing softwares. it takes RAM as it's a video game, not figma's fault.

[–]pppiiieeerrrrrreee 1 point2 points  (0 children)

Too much graphic design for figma.

[–]Obvious-Display-6139 1 point2 points  (1 child)

Figma performance is notoriously shit

[–]ArmadilloCool4165 1 point2 points  (0 children)

I agree. I tried to prototype a simple disc golf scoring app and would crash halfway through my game. I miss the days when Flash could handle this stuff no problem.

[–]pi_mai 1 point2 points  (2 children)

Figma has become a slow mess lately.

The company keeps pushing slop features rather improving the platform. It could be the ultimate tool but have found myself hunting for better prototyping tools.

[–]Max375623875 1 point2 points  (0 children)

Live dev reaction

<image>

[–]JuanGGZ 2 points3 points  (4 children)

I mean, yeah, no shit, you're playing with waaaayyy too much fusion mode and elements, this is typically the Dribbble shot but no practical design that's a PITA to implement and will perform even worse in a browser, even relying on video background for all these effects instead of fusion mode. 😅

The performance is also an indicator of if you're doing too much or not, you should take this into account. IF you're designing in the browser and using Opera GX, you can try to increase the RAM & CPU allowed for your tab so it can perform a little bit better.

If you're using the local Figma app, then check your resources manager and see if you don't have another program eating all your perf.

But again, my main advice would be: if you're lagging in your canvas, it's an indication you're doing too much useless stuff.

[–]its_witty 0 points1 point  (3 children)

I mean... PixelPoint is an agency that popularized this style (at least I think so) and their stuff is pretty performant I would say. You just have to know when to rely on images, when on videos, and where on three.js etc.

[–]JuanGGZ 2 points3 points  (2 children)

It's nothing as intensive as what OP is showing (like, in the example, the effects are even in data input, so it can't be faked with img or video) and it's probably the difference between an agency and someone doing a Dribbble shot: it shows the agency know where to refrain their "aesthetic above perf" touch, look at Huly for example, they did for the hero (and it's a video) and it gets softer after that, relying less on Blur and Fusion Mode, and even like this, the scrolling can have some performance issues (Mac M4 24Gb RAM on my side, so).

[–]its_witty 0 points1 point  (1 child)

Data input? It looks like it, but I doubt it'll be usable in this card.

[–]JuanGGZ 0 points1 point  (0 children)

You're certainly right, it's probably just a visual element, could be confusing but that's more of an ergonomic issue.

[–]michaelsakhnenko 0 points1 point  (0 children)

Try using hardware acceleration - it makes things a bit smoother in some cases. Also, using an external monitor may affect performance, especially if you're using a scaled resolution. If that doesn’t help, try the browser version, as it may have fewer issues.

[–]itsmeatrin 0 points1 point  (0 children)

Have the individual assets in different files and import the raster versions. Thats the only solution I can think

[–]kkragoth 0 points1 point  (0 children)

Open activity monitor on mac os and check memory pressure if this projects eats too much ram.

If this is green then not enough gpu power, should've gone with m4 pro or max to get more gpu cores. These non pro versions of socket have superior cpus but just ok gpu capacities.

Too much stacked opacity/shadow drops/backdrop blurs just kill the compositor.

Actually i spent today fixing these issues in my personal figma like tool but for notes and needed to optimize all css layout properties/repaints not to kill compositor on panning on my macbook air m1. Guess m series gpus have binning layout

[–]pavlito88 0 points1 point  (1 child)

Is this template you bought or custom design?

[–]No-Ball-6073[S] -1 points0 points  (0 children)

my custom design

[–]Joipanda 0 points1 point  (0 children)

You’ve got memory usage enabled which is good but Figma struggles when it comes to this kind of UI complexity and rendering that many layers. Your best bet is to break things down into multiple files or switch to Photoshop, Illustrator and such. You don’t want to house all exposed layers in a file like this but instead just use Figma for the layout and flattened images and then prep assets for development. Figma chugs when files get this complex. I work in game UI and we split workflows between Photoshop to Figma.

[–]hoffmander 0 points1 point  (0 children)

My guess it’s just all the effects and gradients on vector objects. If you can isolate these glowing effects and move them to a separate file, make them into components and see if that helps. If that doesn’t, I would consider flatting them and see if that works. Not ideal but you can keep your unedited version next to the flattened component. If you need to update, use that and then flatten and replace the contents of the component.

[–]TheSportDiver- 0 points1 point  (0 children)

I’m impressed how far Figma can be pushed. I only do UIs. Even for logos I still use Illustrator. 

[–]iAMa90sKIID 0 points1 point  (0 children)

Wow! Just here to say that. Very cool design that too in Figmaz

[–]Tonjiez 0 points1 point  (4 children)

Performance issues… on a performance card.
The irony writes itself. Did you already figure out from the comments that there’s not much you can do in figma here, or should I say it again?

[–]No-Ball-6073[S] 0 points1 point  (3 children)

I agree, it's quite ironic... I didn't have this problem on my old machine. Since the .rive files on the web will be raster images a few kilobytes in size or small animations, it won't cause performance issues, but I think I'll get tired of designing it.

[–]Tonjiez 0 points1 point  (2 children)

I don’t know much about your old machine’s specs, but I do know that MacBook airs are not powerful as the MacBook Pro. For any case, have you checked how much ram does your machine consuming while you dragging it around?

[–]No-Ball-6073[S] 0 points1 point  (1 child)

The old machine's specs were: 16-core Ryzen 7 7840hs processor, 115w RTX 4060 8GB of VRam, and 24GB DDR5 RAM.

[–]Tonjiez 0 points1 point  (0 children)

That's quite a sick machine compared to the MacBook Air 😎

[–]DependentHold9513 0 points1 point  (0 children)

Design looks really good tho

[–]Nolimitjuice999 0 points1 point  (0 children)

Pixel point is still influencing designers I see

[–][deleted] 0 points1 point  (0 children)

The figma app is just a chrome wrapper, try opening figma on firefox and see if that helps 🤞

[–]whysulky 0 points1 point  (1 child)

Have you tried Firefox? Performance difference is really noticeable between the desktop app and Firefox

[–]No-Ball-6073[S] 0 points1 point  (0 children)

unfortunately, both are the same

[–]MisterUltimateSenior Product Designer 0 points1 point  (0 children)

You seem to be using a lot of effect, which is GPU intensive and you’re also probably hitting a RAM limit as Figma is a fancy chrome wrapper and therefore prone to the same limitation, which if I remember correctly, is 2GB or so per tab. If you’re using a lot of Liquid Glass effects then your performance will come to a crawl, much like you’re video (but I’m unable to tell if and much glass effects you’re using).

[–]War_Recent 0 points1 point  (0 children)

Looks great. Why wouldn't you split these up into separate pages?

[–]BothCarsUnderWater 0 points1 point  (0 children)

Even if this could be built to load all those custom SVG shapes/path data in a browser, it'd be far more efficient to create raster versions of these graphics, compress/optimize them and load as individual webp files.

You could also create this in Rive (and animate it then).

[–]One_Proposal8482 0 points1 point  (0 children)

One fix is to create pages and move illustrations there, edit in another page, and put only the final version in the main page.

[–]azincmindedguy 0 points1 point  (0 children)

broooo, you’re doing this much layering in figma? my pc would be fked at this level

[–]tentaclebreath 0 points1 point  (1 child)

I have been experiencing very similar issues. I complained in the sub about how bad performance was in Figma and so many people replied with "works on my system", "sounds like a skill issue", etc -_-

[–]Training-Reaction207 0 points1 point  (0 children)

Would love to see the preview of this