Sorry I am amazed by tens of thousands of layers. I have not used figma but with all the kerfuffle recently, I get it is sort of photoshop with collaboration. But how, how does any user interface design get to have 10,000 layers? Is each layer a square or a comment or an erase? I might not get the scale of the collaboration, or something but the numbers sound ... huge.
It's pretty easy actually! Take a look at this page for just a button component: https://i.imgur.com/TodWS0r.png
It has 1.3k layers, and this is for one component. Most design systems have around 50 components, many more complex than just a button. This is from the Ant Design System: https://www.figma.com/community/file/831698976089873405
Another way to think of it that may help put it into perspective for devs, think of the number of html elements in your average storybook page. Atlassian's page for their button has around 2k html elements to display all the variants and documentation: https://atlassian.design/components/button/examples. A Figma file represents all of the components in the same file, which quickly leads to an explosion of layering. Performance becomes a concern VERY quick.
So what is a ‘layer’? Just any path at all? I think people thought you mean filter or effect layers, so thought a simple button gradient or something was being built up from like 250k transformations.
Best way to think of a layer is as an html element (or in Penpot's case, it's exactly that).
Calling such a concept a 'layer' is quite confusing, given my experience with Photoshop, OmniGraffle, Pixelmator, and most other drawing tools I've seen. Why not just call it an "element" or "shape" or "item"?
When designers started switching from Photoshop to Sketch, "Layer" kinda changed meaning from "a clear sheet with drawings on it" to "any object on the canvas".
In Photoshop a layer could have many shapes on it, if you drew one shape/mark on top of another within one layer, they would be inseparable. If you drew any two things in Sketch, they would always be separate, I suspect this is why they stuck with the term "Layer" even though something like "Object" may have been more accurate.
I think layer is quite correct. Both Photoshop and sketch approach it the right way. Think of a sheet of paper as a layer. In Photoshop layers are sheets of paper that each matches the size of the document. On each paper you can draw whatever you want. They then lay on top of each other and the white parts are transparent.
In sketch, instead of sheets of paper that match the size of the document, you have a perfectly cutout shape for each stroke you draw. You can then move that cutout around within the document.
Both of those have the same principle except one is cutout one is not.
I agree that layer is correct, though I understand where there might be some “intuition clash” with people who are used to the classic paradigm.
When each layer is a transparent sheet it has an absolute Z order that translates 1-1 with the physical thing it’s virtualizing (transparencies, probably from traditional animation).
However if you cut out tiny shapes and arrange them with some on top of others to make a larger composition, there is no longer an absolute Z order to any element because there are a bunch of smaller stacks of various heights.
The virtualization no longer translates to the physical world, and from my experience that disconnect can sour people against a new way of doing things, regardless of whether it’s better.
Do you know of any resources where one can learn how this all works under the hood? ie If i want to build a baby figma for learning purposes.
How does Figma approach this layering, as I understand you have your in-house built engine to support it, right?
Not a figmate but I would guess they create their own virtual representation (e.g. how the browser maintains the CSSOM & DOM trees) and render that to a canvas, rather than relying on the browser to render the SVG.
You are right. They created their own with webgl.
https://www.figma.com/blog/building-a-professional-design-to...
Holy cow. Wow. This image really opened my eyes to the design world. I’m just personally wondering whatever happened with “an eye for design” and intuition.
Atlassian software shouldn’t be used as an example of anything except what not to do.
Annoying, ganky UI's don't just build themselves, ya know.