Layer System: Implement a Composable Rendering Layer Stack with Blend Modes

Question

## Problem

Design a layer system for a graphics application. Each layer has: `id`, `content` (2D pixel grid), `opacity` (0.0-1.0), `blend_mode` ("normal"|"multiply"|"screen"), and `visible` flag.

Implement:
- `add_layer(layer, position)` — insert layer at given z-position.
- `flatten() -> Grid` — composite all visible layers top-to-bottom using their blend modes.
- `move_layer(id, new_position)` — reorder layer.
- `set_opacity(id, opacity)` — update layer opacity.

```python
class LayerSystem:
    def add_layer(self, layer: Layer, position: int) -> None: ...
    def flatten(self) -> list[list[tuple[int,int,int]]]: ...
    def move_layer(self, layer_id: str, new_pos: int) -> None: ...
    def set_opacity(self, layer_id: str, opacity: float) -> None: ...

# Blend formulas (per channel, 0-255):
# normal:   result = top * opacity + bottom * (1 - opacity)
# multiply: result = (top * bottom / 255) * opacity + bottom * (1-opacity)
# screen:   result = (255 - (255-top)*(255-bottom)/255) * opacity + bottom*(1-opacity)
```

## Follow-ups

1. `flatten` recomputes from scratch every call. How would you cache intermediate composites and invalidate on change?
2. What data structure best represents the layer stack for efficient reordering?
3. How does the order of compositing (top-to-bottom vs bottom-to-top) affect the blend result?
4. Describe how Photoshop's layer panel maps to your class design.

Layer System: Implement a Composable Rendering Layer Stack with Blend Modes

Question Details

Full Details

About This Question

Topics

More Figma Interview Questions