Prototype Pattern: Real Company Applications

How Companies Use Prototype:
Companies like Adobe, Figma, Canva, and Notion leverage Prototype pattern in specific scenarios where object duplication with complex state is central to their product experience.
Adobe Photoshop: Layer Duplication
Photoshop layers can have complex state including blend modes, masks, adjustment curves, and effects. Duplicating a layer requires cloning all this configuration. The Layer interface has a duplicate() method. Each layer type (ImageLayer, TextLayer, AdjustmentLayer) implements duplication differently. ImageLayer deep clones its pixel data and mask. TextLayer clones text styling but shares font resources (immutable). This allows users to quickly create variations without rebuilding complex configurations.
Figma: Component Instances
Figma uses a variant of Prototype for component instances. A designer creates a master component (button with specific styling). Each instance is a clone that can override specific properties (text, color) while inheriting others (size, corner radius). The master component acts as the prototype. When the master updates, all instances reflect changes unless overridden. This is Prototype pattern combined with property inheritance, allowing efficient reuse without full duplication of unchanged properties.
Canva: Template Duplication
Canva templates are complex objects with multiple layers, elements, and styling. When a user starts from a template, Canva clones the template structure. Each element (text box, image placeholder, shape) is cloned with its properties. Images are shallow cloned (reference to shared asset storage) while text content and positioning are deep cloned (unique per user document). This hybrid approach balances memory efficiency with independence of user edits.
Notion: Block Duplication
Notion's block-based editor allows duplicating blocks (paragraphs, to-do lists, databases). Each block type has different cloning requirements. Text blocks clone content and formatting. Database blocks can either clone structure only (schema, views) or structure plus data (rows). The Block interface has duplicate(includeContent: boolean) allowing users to control duplication depth. This flexibility is achieved through the Prototype pattern with parameterized cloning.
Interview Insight: These companies don't just clone everything blindly. They carefully decide what to deep clone (unique state), what to shallow clone (shared immutable resources), and what to parameterize (user-controlled duplication depth). Discussing these nuances shows mature understanding.
Common Thread:
All these applications involve rich objects with nested structures where reconstruction from scratch is impractical. Users expect instant duplication. The Prototype pattern provides this while allowing each object type to implement appropriate cloning semantics for its specific needs. The alternative (factories with complex configuration builders) would be significantly more verbose and error-prone.

💡 Key Takeaways

✓Adobe duplicates layers with complex effects and masks using type-specific clone logic

✓Figma uses Prototype with property inheritance for component instances

✓Canva balances deep cloning for unique content and shallow cloning for shared assets

✓Notion provides parameterized cloning to let users control duplication depth

✓All applications carefully distinguish what should be cloned vs shared

📌 Examples

1Photoshop layer duplication with blend modes and effects

2Figma component instances inheriting from master prototypes

3Canva template cloning with hybrid shallow/deep copying

4Notion block duplication with optional content inclusion

← Back to Prototype Pattern Overview