Figma / Help

Would dividing into separate files speed up Figma?

Would dividing into separate files speed up Figma?

Figma/Help · August 8, 2018 at 5:58pm

Would dividing into separate files speed up Figma?

Figma / Help · August 8, 2018 at 5:58pm
I use Figma to manage for my design system. To make it easier on developers, I have a single file called UI which contains entire flows for both mobile and web. There is also another page within UI called "Components" where all the related components go. It's a lot of stuff.
Since I've started doing this, Figma seems unusably slow. On my home computer (MB Pro with 16GB RAM), it's almost impossible to make updates.
Does the Figma team officially recommend breaking things into more files to speed things up?
If so, is there a clean way to move components to a new file without breaking every connection to them and having to do it all over again?

August 8, 2018 at 7:01pm

I had that problem. It took 90 seconds to load a file. Now, I keep my files pretty small. less than 30 frames.

  • reply
  • like

Did it help?

What about a design system - do you have separate files for stuff like Colors, Icons, Typography, etc?

  • reply
  • like

I'm also hoping someone who works at Figma can weigh in here?

  • reply
  • like

Did it help?

What about a design system - do you have separate files for stuff like Colors, Icons, Typography, etc?

Yes, now my pages load within 5 seconds. One file for my design system, colors, typography and a bunch of components.

  • reply
  • like
  • reply
  • like

So you've got them in separate frames, but looks like in the same file. I'm wondering about breaking that stuff out into different files.

  • reply
  • like

These are the frames containing all my UI components. I'm wondering if it's too much.

  • reply
  • like
  • reply
  • like

How long does it take for the page to load up?

  • reply
  • like

The page loads up fine, but using it is extremely...laggy.... There's like a 2-second delay every time you move a Frame, or zoom out, etc

  • reply
  • like

On this topic we're working hard to improve both the initial load time and the performance after load. It's definitely not where we want it to be. Stay tuned though.

like-fill
7
  • reply
  • like

August 9, 2018 at 12:06pm

We have to break all of the major sections of each project into their own files. It's the one major drawback of Figma. If there are too many pages, Figma becomes too slow and unstable.

like-fill
2
  • reply
  • like

On this topic we're working hard to improve both the initial load time and the performance after load. It's definitely not where we want it to be. Stay tuned though.

Thanks Josh! @josh Would you recommend keeping my design system as it is then? It's a lot of work to move components into new files and then having to re-link everything. If speed improvements are forthcoming, I can try to just keep things as they are.

  • reply
  • like

It might be an issue with how you structured your components. I work hard to keep mine simple/clean without a million layers and options. I found that dragging items that are used frequently slows things down because it is replicating the change a thousand times around the overall screen. How complex are your components?

  • reply
  • like

It might be an issue with how you structured your components. I work hard to keep mine simple/clean without a million layers and options. I found that dragging items that are used frequently slows things down because it is replicating the change a thousand times around the overall screen. How complex are your components?

For the most part pretty simple and granular. But in total, there are a lot in one file. I was hoping it would help our developers to see everything in one place (bird's eye view) rather than broken into 10 different tabs.

  • reply
  • like

I've definitely encountered this same issue and I'm recommending my design team break things up. We might move to putting our components into files related to their type (input, surfaces, composite controls, styles etc). Some of our files are super large and hard to work with.

However, I will note that many of the files I've seen around my office that are hard to work with have waaay too much going on in each component. All the states are encapsulated within a single component so there winds up being 400 layers in a single one. I've recommended that people break each component up. Create a scaffolding base, then wrap an instance of that in another component and apply overrides. Then people can just use the component swapping feature when they want a new state and that's pretty smooth.

The biggest drawback that I have when it comes to breaking up components across files is now there are multiple libraries to enable for consumers. This is both a drawback and a plus I suppose. It keeps the library pane focused on what you want to use but also prevents component consumers from seeing the whole system without enabling each library so discoverability isn't as good. I'd love to be able to publish into a single library from multiple files.

like-fill
3
  • reply
  • like

August 10, 2018 at 12:53pm

I think bitmaps add a load to the load time

like-fill
3
  • reply
  • like

* a lot

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```