KAMIL NĘCEK

Smart Asset
Exporter

Eksport JPG, PNG i SVG z Figmy.

Przy większej liczbie elementów najwięcej pracy potrafi zająć nie sam eksport, ale dopilnowanie formatów, limitów i nazw plików. Smart Asset Exporter zbiera te ustawienia w jednym panelu i prowadzi przetwarzanie przez kontrolowaną kolejkę.

Autorskie narzędzie · wtyczka Figma

Zobacz demonstrację Porozmawiajmy o podobnym narzędziu
Panel Smart Asset Exporter w Figma z wyborem formatów JPG, PNG i SVG, limitem JPEG, listą assetów oraz kontrolkami Download i Export ZIP.

Zaznaczasz elementy. Resztę prowadzi kolejka.

Wtyczka pracuje na zaznaczeniu w Figmie. Format wybierasz dla całego zadania, a limity JPG możesz ustawić osobno dla elementów. Potem śledzisz postęp, pobierasz pojedynczy gotowy plik lub kompletną paczkę ZIP.

Format i limity
Jeden format zadania, limit JPG wspólny lub osobny dla elementu.
Stan każdego elementu
Analiza pokazuje rozmiar i status. Nieosiągalny limit jest oznaczany jako błąd.
Gotowy wynik
Pojedynczy plik lub ZIP po poprawnym przetworzeniu całego zadania.
Nagranie działania pluginu w Figma. Plik nie zawiera ścieżki audio. Otwórz plik wideo

Nazwy warstw trafiają do struktury plików.

Nazwa elementu może określać nie tylko nazwę wynikowego pliku, ale również jego miejsce w paczce ZIP. Dzięki temu rezultat zachowuje ustaloną strukturę bez ręcznego przekładania plików po eksporcie.

Warstwy w Figma
Layers
  • Marketing/Desktop/plik1
  • Marketing/Desktop/plik2
  • Marketing/Desktop/plik3
  • Marketing/Desktop/plik4
  • Marketing/Mobile/plik1
  • Marketing/Mobile/plik2
  • Marketing/Mobile/plik3
  • Marketing/Mobile/plik4
Struktura ZIP
  • Marketing
    • Desktop
      • plik1.jpg
      • plik2.jpg
      • plik3.jpg
      • plik4.jpg
    • Mobile
      • plik1.jpg
      • plik2.jpg
      • plik3.jpg
      • plik4.jpg

Co dzieje się podczas eksportu.

Przetwarzanie jest sekwencyjne. Kolejny element nie rozpoczyna eksportu przed potwierdzeniem poprzedniego. Format decyduje o dalszej ścieżce, a błąd nie jest poprawnie zakończonym zadaniem.

Wejście i sterowanie

  1. INPUT / FIGMA

    Zaznaczenie

    wybrane węzły strony

  2. CONTROLLER

    Snapshot i walidacja

    ID · ścieżki · kolizje · limity

  3. FIGMA API

    node.exportAsync()

    sekwencyjnie · bajty albo błąd

Przetwarzanie i decyzje

  1. PLUGIN UI

    Odbiór elementu

    bajty lub błąd · format · limit

  2. ROZGAŁĘZIENIE

    Format wyniku?

    JPG · PNG · SVG

JPG

  1. JPG / LIMIT

    Kompresować JPG?

    Limit przekroczony

    TAK → Canvas NIE → oryginał

  2. JPG / WYNIK

    Canvas albo oryginał

    Próbki jakości lub plik bez zmian.

PNG / SVG

PNG / SVG

Natywny wynik

bez algorytmu kompresji JPG

Wynik lub status błędu wraca do ACK.

Kolejka i wynik

  1. ACK / STATUS

    Potwierdź element

    Status przetwarzania

  2. QUEUE CONTROL

    Kolejny element?

    ACK → następny

    NIE ↓ TAK ↺ exportAsync

  3. FINALIZE

    Zakończ kolejkę

    Po ostatnim elemencie

  4. STATUS OPERACJI

    Komplet poprawny?

    Zero błędów

    TAK ↓ NIE → bez pobrania

1 plik

OUTPUT A / 1 ELEMENT

Pojedynczy plik

pobranie bezpośrednie

Wiele plików

OUTPUT B / WIELE

ZIP · ścieżki

Archiwum ze ścieżkami

  1. 01

    Zaznaczenie

    Wybierz elementy na stronie Figma.

  2. 02

    Format i limit

    Wybierz typ eksportu i limit JPG.

  3. 03

    Analiza

    Sprawdź listę, rozmiary i stany assetów.

  4. 04

    Eksport

    ACK wyniku zwalnia kolejny element kolejki.

  5. 05

    Wynik

    Pojedynczy plik albo ZIP.