DesignAutomator

The Project

DesignAutomator – Automating Repetitive Design Tasks in Adobe Photoshop

DesignAutomator is a Adobe Photoshop plugin that revolutionises how designers approach multilingual and multi-format campaigns.
The tool automates tedious, manual work, slashing project timelines from hours to minutes whilst maintaining absolute control over quality and precision.

Role: Full-Stack Developer, UX Designer
Technologies: React, TypeScript, Redux, Adobe UXP API, Webpack
Tools: Figma, Adobe Photoshop, VS Code, UXP Developer Tools, Alchemist

Origin Story

Why Build DesignAutomator?

While working on marketing campaigns across multiple markets and formats, I noticed a frustrating pattern: 85% of my work consisted of repetitive, mechanical tasks – swapping text for each language, resizing elements, maintaining alignment, exporting in various formats.

I needed a tool that would:

Allow me to manage multiple languages without leaving Photoshop
Automatically adapt layouts across different dimensions
Maintain visual consistency across all variants
Reduce manual work from hours to minutes

I started with simple scripts automating basic tasks. As new challenges arose, I added features incrementally – intelligent alignment, responsive resizing, colour management, asset swapping. This organic approach built a plugin that genuinely solves real-world problems I encountered daily.

The result is a tool I use myself every day and which has evolved alongside my changing needs as both designer and developer.

The Challenge

Design teams at marketing agencies and creative departments face a recurring problem:

Multilingual, multi-format campaigns require manual:

Duplicating artboards for each language and market
Creating export versions in multiple dimensions (web, mobile, print)
Aligning and resizing elements in every variant
Organising files across folder structures
Mapping CSV data into designs (products, prices, descriptions)

Cost: A single campaign = 10+ hours of repetitive, manual labour.

The Solution

DesignAutomator automates the entire workflow through intelligent batch processing:

✨ Single setup → dozens of variants in minutes
🌍 Multi-language support → unlimited languages/versions with live preview
📐 Smart resizing → automatic dimension adjustment whilst maintaining proportions
🎨 Colour management → predefined palettes, one-click colour changes
🖼️ Asset swapping → automatic logo and graphic substitution
📊 CSV import → dynamic variant generation from data
🎯 Multi-format export → JPG, PNG, MP4 in automated folder structures
🤖 AI Integration → generative background fill (Photoshop + Firefly)

Result: Time reduction from 10 hours → 90 minutes without compromising quality.

Before & After – Real Results

→

User Interface

Key Features

1. Batch Processing – Dozens of Artboards

Process multiple artboards simultaneously without UI freezing:

Input: Master artboard set + configuration
       ↓
Processing: Asynchronous operations (BatchPlay API)
       ↓
Output: Dozens of artboards across languages/formats

Technical implementation:

Adobe BatchPlay API for asynchronous commands
Redux managing operation queues
Real-time progress updates with non-blocking UI
Error handling and operation cancellation

2. Multilingual Support & Localisation

Automated management of unlimited language variants:

Supported Languages – Proof of Multi-Language Processing:

Architecture:

{
  "languages.json": {
    "PL": { "name": "Polish" },
    "DE": { "name": "German" },
    "CZ": { "name": "Czech" }
    ...
  }
}

Workflow:

System scans text layers
Pattern matching identifies target elements
Automatic text mapping from configuration
Generate N artboards with language variants into respective folders

3. Smart Alignment & Precise Manipulation

Advanced layer operations with pixel-perfect precision:

Intelligent alignment options (customisable per artboard):

Vertical Alignment – centring, top/bottom content alignment
Dynamic Content Alignment – automatic adjustment as content changes
CTA Button Auto-resize – buttons automatically fit text length
Grid-based Positioning – TextBox positioning with tolerance

Additional operations:

Text Reflow – automatic text wrapping with custom rules
Batch Properties Edit – modify properties across multiple layers
Smart Resize – scale whilst preserving aspect ratio

Challenge: Projects have vastly different layer organisations
Solution: Pattern matching on naming + hierarchical scanning
Result: ~99% success rate without manual per-project configuration

4. Data-Driven Design (CSV Integration)

Import external data and generate variants automatically:

CSV File (N rows) + Template Design
         ↓
Mapping Layer Names → CSV Columns
         ↓
N unique artboards with real data

Use cases: E-commerce product cards, personalised campaigns, dynamic catalogues

5. Colour Management System

Change element colours using predefined palettes:

Functionality:

One-click Colour Change – transform element colours instantly
Predefined Palettes – brand/seasonal/campaign colour sets
Batch Colour Application – apply palettes across artboards
Colour Consistency – maintain visual harmony

Use cases: Seasonal campaigns, colour A/B testing, brand consistency

6. Asset Swapping & Image Operations

Intelligent asset substitution and manipulation:

Logo Swapping:

Automatic logo substitution (multiple variants)
Pattern matching for different versions (light/dark, colour/monochrome)
Position and size preservation

Image Operations:

FIT – resize images with cropping
FILL – fill areas whilst maintaining proportions
Smart Object handling – work with editable smart objects

Use cases: Multi-brand campaigns, seasonal graphic updates

7. Interactive Language Switching

Switch between language variants without batch processing:

Functionality:

Real-time Preview – instant language variant preview
UI-based Switching – switch through plugin interface
Quick Testing – rapidly verify all languages
Live Edit Mode – edit with instant preview

Benefit: Verify language versions without generating all artboards

8. Export Pipeline with Multi-Format Support

Intelligent export with configurable structure and formats:

Supported formats:

JPG – with configurable quality settings
PNG – with transparency options
MP4 – video export for animated campaigns

Folder structure:

Project_Name/
├── Type_1/
│   ├── PL/
│   │   ├── 1200x630_project_name_date_PL.jpg
│   │   └── 1920x1080_project_name_date_PL.jpg
│   └── DE/
├── Type_2/
└── Type_3/
...

Naming Convention: {format}_{project_name}_{date}_{language}.{ext} – fully customisable

Batch Export: All formats and languages in a single operation

9. Background Generation & Fill

Automatic background creation using Photoshop's native tools and AI:

Photoshop Native:

Content-Aware Fill – intelligent area filling
Generative Fill – AI-powered background generation

Use cases: Rapid prototyping, completing missing elements, background creation

10. Advanced Variable Sets Management

Manage language variable sets from the Advanced panel:

Functionality:

Variable Set Creation – create new variable sets
CSV Translation Database – access large translation libraries
Auto-apply Translations – automatically apply translations to artboards
Translation Reuse – leverage existing translations without leaving Photoshop

Workflow:

CSV Database (1000+ translations)
         ↓
Select Translation Set → Create Variables
         ↓
Apply to Artboards → Generate Variants

Benefit: No manual text copying – single source of truth for translations

Technical Architecture

Stack & Tools

Frontend:

React 17 + TypeScript (strict mode)
Redux Toolkit for state management
Custom hooks for Photoshop API integration
CSS Modules for styling

Build System:

Webpack 5 with custom configuration
Babel for transpilation
ESLint + Prettier for code quality

Adobe Integration:

UXP (Unified Extensibility Platform)
BatchPlay API for low-level operations
Custom TypeScript definitions for Photoshop API

Modular Architecture (Atomic Design)

components/
├── atoms/          → Buttons, Inputs, Toggles
├── molecules/      → Form fields, Option panels
├── organisms/      → Header, Footer, Main sections
└── pages/          → Complete views

features/           → Redux slices (functionality)
├── align/
├── dataset/
├── language/
├── resize/
└── type/

functions/          → Business logic
├── batch/          → Batch processing core
├── batchPlay/      → Photoshop commands
├── edit/           → Layer manipulation
└── create/         → Asset generation

Benefits:

Reusable components → faster prototyping
Separated concerns → easier testing
Scalable architecture → effortless feature addition

State Management with Redux

Why Redux?

Single source of truth for complex state
Time-travel debugging
Middleware for async operations
Predictable state transitions

Slices pattern:

// alignSlice.ts
const alignSlice = createSlice({
  name: 'align',
  initialState: { mode: 'center', tolerance: 2 },
  reducers: {
    setAlignMode: (state, action) => { ... },
    alignLayers: (state, action) => { ... }
  }
});

Each plugin feature = dedicated slice → modularity + separation of concerns

Technical Challenges & Solutions

Challenge #1: Performance with Dozens of Artboards

Problem: Processing dozens of artboards froze Photoshop's UI, preventing work

Root causes:

Synchronous command execution blocks the main thread
React re-renders on every state change
Photoshop API isn't thread-safe

Solution:

Asynchronous BatchPlay API – queue system for commands
Batched state updates – optimised Redux updates
Progressive rendering – show progress every N operations, not on every change
Worker-like pattern – simulate background processing

async function processBatch(artboards: Artboard[]) {
  const batchSize = 10
  for (let i = 0; i < artboards.length; i += batchSize) {
    const batch = artboards.slice(i, i + batchSize)
    await Promise.all(batch.map(processArtboard))
    dispatch(updateProgress((i / artboards.length) * 100))
  }
}

Result: Processing without UI freeze + live progress updates, cancel operations anytime

Challenge #2: Pattern Matching Across Different Structures

Problem: Projects have vastly different layer organisations – automating mapping seemed impossible

Assumptions:

Layers can exist in any hierarchy
Names follow different conventions (camelCase, snake_case, spaces)
Some layers are in groups, others standalone

Solution:

function findMatchingLayers(pattern: string, tolerance: number) {
  // 1. Recursive scan of entire layer tree
  // 2. Normalise names (lowercase, remove special chars)
  // 3. Fuzzy matching with Levenshtein distance
  // 4. Group detection (parent-child relationships)
  // 5. Return closest matches with confidence scores
}

Result: ~99% success rate without manual per-project configuration

Challenge #3: TypeScript Type Safety with the Photoshop API

Problem: Adobe's Photoshop UXP API lacks type definitions

Impact:

No IDE autocomplete
Runtime errors difficult to debug
No compile-time validation

Solution:

// uxp.d.ts – custom type definitions
declare module 'photoshop' {
  export const app: {
    activeDocument: Document
    batchPlay: (commands: BatchPlayCommand[]) => Promise<any[]>
  }
 
  export interface Document {
    layers: LayerCollection
    artboards: ArtboardCollection
  }
 
  // + 500+ lines of custom definitions
}

Result:

Full IntelliSense support
Compile-time error detection
Better developer experience

Skills Demonstrated

Frontend Development

✅ React + TypeScript (strict mode, custom hooks)
✅ Complex state management (Redux Toolkit)
✅ Component architecture (Atomic Design)
✅ CSS Modules, responsive design

API Integration

✅ Adobe UXP/Photoshop API
✅ Custom TypeScript definitions
✅ Async operations handling
✅ Error boundaries and fallbacks

Software Architecture

✅ Modular architecture (slices, separation of concerns)
✅ Scalable codebase design
✅ Pattern matching algorithms
✅ Performance optimisation

Problem Solving

✅ Performance bottlenecks (async processing)
✅ Type safety in untyped APIs
✅ Complex state management
✅ User experience (progress, feedback, error handling)

Build & Tooling

✅ Webpack configuration
✅ Babel transpilation
✅ ESLint + Prettier
✅ Development workflow optimisation

Results & Impact

Business Metrics

Before DesignAutomator:

Single campaign = 10+ hours of manual work
High risk of copy-paste errors
Difficulty maintaining consistency
Production bottleneck

After DesignAutomator:

Single campaign = 90 minutes + configuration
Elimination of manual errors (full automation)
100% consistency across variants
Scales to dozens of markets
10+ advanced features from a single interface:
- Smart alignment with per-artboard options
- Colour management with one-click palette switching
- Asset swapping (logos, graphics)
- Multi-format export (JPG, PNG, MP4)
- Live language preview without batch processing
- AI-powered background generation
- Translation database integration within Photoshop

Technical Achievement

✅ Production-ready – deployed and used daily
✅ Scalable – processes dozens of artboards simultaneously
✅ Maintainable – modular architecture, straightforward updates
✅ User-friendly – intuitive UI, minimal learning curve
✅ Interruptible – cancel operations at any time

Lessons & Insights

What Went Well

1. Modular architecture from the start
Choosing Redux + slices pattern from day one dramatically simplified later development. Adding new features = new slice, zero refactoring.

2. TypeScript strict mode
Custom type definitions for the Photoshop API initially felt like overhead, but saved countless hours debugging runtime errors.

3. Organic development based on real needs
Rather than planning all features upfront, I developed the plugin incrementally as needs arose. Each new feature (colour management, asset swapping, AI integration) addressed concrete problems encountered daily. This ensured every feature delivered real value.

4. User feedback early and often
Regular testing with designers revealed edge cases and naming conventions I'd never anticipated.

What I Learned

Performance optimisation in Adobe Plugins:
Standard web performance patterns don't always apply – you must tailor solutions to Photoshop's single-threaded environment.

Type safety with legacy APIs:
Writing custom type definitions is an investment that pays dividends – better DX, fewer bugs, easier onboarding.

The power of declarative configuration:
JSON configs for languages and formats became a game-changer. Zero code changes when adding new variants.

Build tools you actually use:
The best way to build a useful tool is solving your own problems. Using the plugin daily provides invaluable feedback. You immediately see what works, what doesn't, and what needs improvement.

What I'd Change

1. Write tests earlier
Testing came post-launch. Starting with TDD would have saved debugging time.

2. Documentation as a living document
Documentation was written at the end, not alongside code. Next time: docs-driven development.

3. Analytics from the beginning
Tracking feature usage would have helped prioritise development. Adding it later meant lost insights.

Summary

DesignAutomator is a real-world example of how modern web technologies (React, TypeScript, Redux) solve concrete business problems beyond typical web applications.

The project developed organically in response to genuine needs – rather than planning all features upfront, each new capability was added as real problems emerged during daily work.

Key takeaways:

Automation saves dozens of hours per project
Good architecture = scalability and effortless feature expansion
Type safety = fewer bugs, better DX
Build tools you actually use = the best feedback loop
Organic development > Big upfront planning

Tech stack: React, TypeScript, Redux, Adobe UXP API, Webpack
Features: 10+ advanced capabilities (alignment, colour management, asset swapping, multi-format export, AI integration)
Result: 85% time reduction (10h → 90min), production-ready tool used daily