4 ms·

250k layers to build up an image? I'm thinking Photoshop-style layers, or do you mean something else?

by chrisseaton 4y ago

katbyte 4y ago
I assume each feature is a layer
- rapnie 4y ago
  Or each simulated UI interaction.. amounts to much more layers (imagine a 10k long feature list).
longtimelistnr 4y ago
As a designer not in web development, I cannot even begin to wrap my head around that. Because at what point is just developing the thing directly or merging layers or using a more suitable app the solution?
- diegof79 4y ago
  I'm not the parent commenter, but I work using Figma (and other design tools). So, I may be able to clarify it. Figma is a vector drawing tool like Illustrator, which means that the comparison with Photoshop layers is misleading. What the parent post refers to as "Layers" is the name that Figma uses for objects like rectangles or text. So if you have a design file with many elements the number of layers grows quickly. The same happens in Illustrator or Sketch. The closest equivalent to merging a layer is combining different shapes in one or rasterizing vectors into pixels. The usual tricks to handle big files are to work with different pages (so the app doesn't have to render everything at once) or to rasterize the parts that you'll like to keep as a reference (and move the vectors to another file). It's not a problem of Figma, but a feature of vector design tools where you like to preserve the editing (and details) of everything. You'll have the same performance challenges in Sketch, XD, Illustrator, Affinity Designer, etc. The case of Penpot using SVG is interesting because big files will push the Browser SVG to its limits. (BTW I took a look at the Penpont code, it's interesting that they use ClojureScript for everything... it gave me the motivation to learn about CloujreScript).
  - rahabash 4y ago
    Ah, great explanation. Thanks for clearing this up!
jjcm 4y ago
Don't think of it as 250k layers for a single image. Modern design tools represent many artboards at once on the same page, i.e. https://i.imgur.com/wvWSv4F.png https://i.imgur.com/wvWSv4F.png from https://www.figma.com/community/file/1154649549752855805 https://www.figma.com/community/file/1154649549752855805 You're often representing every page on a site, or every component in a design system in the same file. A way to think about it is "If you counted every div on every page of Reddit, how many would there be?". Most modern sites will have around the same order of magnitude of html elements.
- petespeed 4y ago
  I see what you are saying regarding artboard view. But is it necessary? Can't the artboard be visualized in a better way? If such high-level view is desired, won't rasterized details be sufficient till one zooms in?
  - jjcm 4y ago
    "Can't the artboard be visualized in a better way?" It absolutely can! Caching and optimizations in a zoomed out view are a core part to many design tools today. These are doable when you control the whole stack of how these elements are rendered. Penpot may have to be more clever here though as they rely on the browser to render native elements.

250k layers to build up an image? I'm thinking Photoshop-style layers, or do you mean something else?

katbyte 4y ago

I assume each feature is a layer

rapnie 4y ago
Or each simulated UI interaction.. amounts to much more layers (imagine a 10k long feature list).

longtimelistnr 4y ago

As a designer not in web development, I cannot even begin to wrap my head around that. Because at what point is just developing the thing directly or merging layers or using a more suitable app the solution?

diegof79 4y ago
I'm not the parent commenter, but I work using Figma (and other design tools). So, I may be able to clarify it. Figma is a vector drawing tool like Illustrator, which means that the comparison with Photoshop layers is misleading. What the parent post refers to as "Layers" is the name that Figma uses for objects like rectangles or text. So if you have a design file with many elements the number of layers grows quickly. The same happens in Illustrator or Sketch. The closest equivalent to merging a layer is combining different shapes in one or rasterizing vectors into pixels. The usual tricks to handle big files are to work with different pages (so the app doesn't have to render everything at once) or to rasterize the parts that you'll like to keep as a reference (and move the vectors to another file). It's not a problem of Figma, but a feature of vector design tools where you like to preserve the editing (and details) of everything. You'll have the same performance challenges in Sketch, XD, Illustrator, Affinity Designer, etc. The case of Penpot using SVG is interesting because big files will push the Browser SVG to its limits. (BTW I took a look at the Penpont code, it's interesting that they use ClojureScript for everything... it gave me the motivation to learn about CloujreScript).
- rahabash 4y ago
  Ah, great explanation. Thanks for clearing this up!

jjcm 4y ago

Don't think of it as 250k layers for a single image. Modern design tools represent many artboards at once on the same page, i.e. https://i.imgur.com/wvWSv4F.png https://i.imgur.com/wvWSv4F.png from https://www.figma.com/community/file/1154649549752855805 https://www.figma.com/community/file/1154649549752855805 You're often representing every page on a site, or every component in a design system in the same file. A way to think about it is "If you counted every div on every page of Reddit, how many would there be?". Most modern sites will have around the same order of magnitude of html elements.

petespeed 4y ago
I see what you are saying regarding artboard view. But is it necessary? Can't the artboard be visualized in a better way? If such high-level view is desired, won't rasterized details be sufficient till one zooms in?
- jjcm 4y ago
  "Can't the artboard be visualized in a better way?" It absolutely can! Caching and optimizations in a zoomed out view are a core part to many design tools today. These are doable when you control the whole stack of how these elements are rendered. Penpot may have to be more clever here though as they rely on the browser to render native elements.