4

Public Announcement: Beware of Figma's limitations. SOLVED

over 5 years ago from , Designer

I recently switched my workflow over to Figma to work on an e-commerce website. I want to warn anyone that is taking a leap from Sketch to Figma to be wary of its limitations. I am working on the large screens for the e-commerce platform and I am using components to build repeated elements within the design. Come to find out that using instances of those components makes your file huge and you start to hit the memory limit in the browser. This is the error message I am receiving while working on the file.

"You're about to run out of memory! This file is getting pretty big and could run out of memory soon! Please save your work and contact Figma support for more details."

I have discussed this with the Figma team and I cannot get a straight answer as to why this is happening. I recently broke up the files into their own individual files but I am still having performance issues. One of the files only has 14 large screens with no images but it is still choking.

I tested Figma to an extent before switching over from Sketch with no issues but now I am up a creek without a paddle.

Has anyone else experienced these issues with Figma? Are there any solutions on how to remedy the memory usage and files size? I could remove all the instances of the components to make the files smaller but that totally defeats the purpose. Any advice or help from Figma users would be highly appreciated.

8 comments

  • Brennan Smith, over 5 years ago

    I was able to solve the issues I was having with the Figma team. I was using components wrong. For instance, I was stacking all my icons and creating a master icon set. I would then only show the icon I needed from within the layers of the component to show a specific icon. This was creating havoc on the file size due to all the layers that were adding up throughout my design since I was using the icon in other components as well. I learned how to use the dropdown for instances to replace icons today :)

    5 points
    • Thomas Lowry, over 5 years ago

      Glad you got it sorted. I wrote an article detailing this method (master icon component). It is really handy, but can grow out of control very easily. The instance swapping is a much better way to do it as you discovered. I am waiting to make some updates to my article since, as good as the instance swapping is, it does not work (yet) if you want to swap instances from components which reside in team libraries. It sounds like that is coming soon though!

      With the stacking/master icon method, I find this technique useful for creating multiple states of a single component without having to maintain two components. ie: checkbox (checked/unchecked), or a tab control (active/normal), etc. One of the great things of having access to Figma's layer stack of each component is definitely one of best features.

      1 point
      • Brennan Smith, over 5 years ago

        I read that article and based my icons off of the article but as you mentioned it can get out of control. I believe you wrote that article before the instance swapping was released and I used this method in my designs for 100's of icons. I am in the process of cleaning up the master icons now and it has made a huge difference in performance. I went from 1.6gb to around 555mb cleaning up last night.

        Figma is so new that there is not a lot of resources out there to learn about best practices. Thanks for chiming in and I look forward to future medium posts.

        1 point
        • Thomas Lowry, over 5 years ago

          Thanks so much. Definitely written before even localized instance swapping was a thing. The product is growing very quickly.

          Thanks for the warning about how it can get out of control. Will definitely be a data point to include on the next one and amend to that one.

          2 points
  • Tyson KingsburyTyson Kingsbury, over 5 years ago

    wow....nope...not had problems like this...been using FIGMA for about 1/2 a year or more at this point, and had nothing but great experiences....and many of my files have 20+ screens (and complicated ones at that)...

    hope things work out for you Brennan!

    and hope someone else chimes in here with some good tips/hints... wish I had some to give you, but I haven't had any experiences like yours...

    3 points
  • Andrea GrassoAndrea Grasso, over 5 years ago

    I am having no problems with HUGE projects. What's your hardware? OS? Browser?

    1 point
    • Brennan Smith, over 5 years ago

      macOS High Sierra verison 10.13.1 3.3 GHz with 15gig of memory

      Google Chrome Version 63.0.3239.132 (Official Build) (64-bit)

      How do you deal with nested components? I think I may have built my components to be hogs. For instance, I have a master icon component that consists of 100 icons that get shown or hidden depending on the circumstance. I then used that master icon component in my master component buttons with different states and placed the button instances throughout my design. Is this wrong?

      0 points
  • Nelson TarucNelson Taruc, over 5 years ago

    Just wanted to echo Tyson and Andrea: I'm currently working in an 80+ artboard Figma file that does take a little while to download, but once it has, the performance is smooth as butter.

    Our design team uses both Figma and Sketch (and Axure), and Figma's cascading-style approach to component/symbol design is way more intuitive than Sketch's attribute-based approach. If I had a pro tip, it would be to fully understand the relationship between a master component and an instance. Once I figured that out (through trial and error), it made Figma so much easier to use in terms of design velocity.

    Anyway, I have yet to hit any file limitations or performance issues with Figma, so if you're thinking about giving it a try, I definitely would recommend it.

    0 points