Stworzyć zautomatyzowany skrypt lub wtyczkę w Figma

Budżet: omówimy.

Specyfikacja techniczna (ST) dla projektanta lub programisty Figma, który ma stworzyć automatyczny skrypt lub wtyczkę w Figma, umożliwiającą:

* Wziąć 1 Twój print (PNG)

* Automatycznie wkleić go do 10 (i więcej) mockupów (szablonów) dziewczyn w T-shirtach/hoodie

* I wyeksportować te obrazy w potrzebnym rozmiarze (np. 1200×1200 px, 72 DPI)

* Z możliwością dodawania nowych szablonów w przyszłości

---

## 🧠 Cel

Zautomatyzować proces wstawiania printów (projektów) do mockupów w Figma — dla szybkiego tworzenia wizualizacji odzieży z projektem.

---

## 🛠️ Specyfikacja techniczna dla Figma-projektanta/programisty

### 1. Materiały wejściowe

* 10 plików PNG — obrazy dziewczyn w białym/różowym hoodie/T-shirt (mockupy)

* 1 obraz printu (PNG z przezroczystością, do 1200x1200 px)

* Zalecany rozmiar do eksportu: 1200x1200 px, 72 DPI

---

### 2. Główne funkcje skryptu lub działań w Figma

Opracować zautomatyzowany proces w Figma (za pomocą skryptu/wtyczki), który:

1. Importuje print do Figma

2. Automatycznie wstawia ten print do uprzednio zdefiniowanego obszaru każdego z mockupów

   * Na przykład: obszar na klatce piersiowej hoodie lub T-shirt

3. Dopasowuje obrazek pod rozmiar i proporcje, aby wyglądał estetycznie

4. Eksportuje wszystkie 10 obrazów w PNG 1200x1200 px

5. Dodaje watermark/logo lub nazwę projektu

---

### 3. Struktura pliku Figma (Szablon)

Aby ten skrypt działał, projektant musi:

* Utworzyć 10 oddzielnych ramek (frames) w Figma — po jednym na każdy mockup

* Każda ramka powinna zawierać:

  * Obraz dziewczyny z T-shirtem (PNG)

  * Stały obszar do wstawienia printu — na przykład shape „Print Zone”, znajdujący się na klatce piersiowej

* Nazwy ramek: mockup-01, mockup-02, … mockup-10

* Nazwa warstwy do wstawienia printu: PRINT_ZONE — jest to ważne dla skryptu

---

### 4. Optymalnie — stworzyć skrypt jako Figma Plugin

Programista może napisać niewielką wtyczkę Figma (w JavaScript), która:

* Zapytuje użytkownika o wybór pliku PNG (printu)

* Wstawia ten print do wszystkich obszarów PRINT_ZONE

* Centruje, skaluje, dopasowuje do proporcji

* Eksportuje każdą ramkę do PNG (1200x1200)

---

### 5. Instrukcja dla Ciebie: jak dodawać nowe mockupy w przyszłości

Po utworzeniu systemu, projektant powinien przekazać Ci instrukcję:

* Jak dodać nową ramkę (nowy mockup)

* Jak wskazać nowy obszar „PRINT_ZONE” dla nowego mockupu

* Jak zaktualizować skrypt, aby uwzględnić nowe ramki (np. po nazwie lub tagu)

---

## ✅ Oczekiwany format wyniku

* Plik Figma z 10 ramkami

* Działająca wtyczka lub instrukcja z działaniami (actions) w Figma

* README.txt z instrukcją:

  * Jak wstawić nowy print

  * Jak dodać nowy mockup

  * Jak od razu wyeksportować wszystkie mockupy

---

## 💡 Alternatywne rozwiązanie (bez kodu)

Jeśli projektant nie może stworzyć wtyczki, można to zrobić za pomocą komponentów Figma + wariantów:

* Każdy mockup — osobny wariant

* Wstawianie printu — jako instancja

* Print automatycznie pojawi się na wszystkich wariantach