Do konwersji na TGS wyeksportuj z Figmy statyczny SVG zawierający potrzebne kształty. Nie eksportuj całego ekranu aplikacji, jeśli potrzebujesz jednej ikony. Dobra kopia eksportowa ma jasno określony kadr, przewidywalne tło i możliwie prostą strukturę. Poniższy proces pomaga znaleźć problemy jeszcze przed wyborem animacji.
Przygotuj osobną ramkę eksportową
Skopiuj wybraną ikonę do osobnej ramki przeznaczonej tylko do eksportu. W nazwie zaznacz jej rolę, na przykład naklejka-dzwonek. Nie przenoś opisów dla programisty, strzałek z komentarzami ani przykładowego tekstu interfejsu. Ramka robocza powinna zawierać dokładnie to, co ma znaleźć się w wyniku.
Taka kopia pozwala uprościć ilustrację bez uszkadzania komponentu używanego w projekcie aplikacji. Jeśli dzwonek ma mieć ruchomy uchwyt, zadbaj o czytelny podział części. Nie łącz automatycznie wszystkich elementów w jedną bryłę, zanim ustalisz, co chcesz animować. Z drugiej strony usuń niewidoczne duplikaty, które nie pełnią żadnej funkcji.
Zaznacz właściwy obiekt i wybierz SVG
Figma pozwala eksportować między innymi ramki, warstwy i grupy. Zaznacz przygotowaną ramkę i użyj sekcji Export, dodając konfigurację SVG. Jej położenie zależy od trybu pracy i uprawnień; opisuje to instrukcja eksportowania z Figmy. Jeśli właściciel ograniczył eksport, sama zmiana formatu nie usunie tego ograniczenia.
Przed pobraniem sprawdź, czy zaznaczenie nie obejmuje sąsiedniej ikony. Eksport nazwanego obiektu bywa łatwiejszy do powtórzenia niż przypadkowo zaznaczonego fragmentu planszy. Zapisz pierwszy plik jako osobny wariant i otwórz go poza Figmą. To właśnie ten wynik, a nie dokument projektowy, będzie wejściem do konwertera.
- Utwórz kopię grafiki w osobnej ramce.
- Zaznacz tę ramkę i dodaj konfigurację eksportu.
- Wybierz SVG oraz potrzebne ustawienia tekstu.
- Pobierz plik i porównaj go z projektem.
Utrwal kształt liter przed dalszym eksportem
Jeśli znak zawiera napis, pozostaw w kopii eksportowej opcję Outline text. Według ustawień SVG w Figmie utrwala ona kształty liter, ale odbiera możliwość edycji tekstu w tym eksporcie. Dlatego zachowaj dokument roboczy z oryginalną warstwą tekstową.
Przy napisie „Cześć!” sprawdź znak ś, odstęp przed wykrzyknikiem i wszystkie małe wewnętrzne otwory. Poprawny wygląd w dużym podglądzie nie gwarantuje czytelności w naklejce. Jeżeli litery zlewają się po zmniejszeniu, skróć tekst lub zwiększ jego udział w kompozycji. Nie rozwiązuj problemu czytelności przez dodawanie kolejnych cieni i ozdobników.
Sprawdź obrazy i efekty osobno
SVG może zawierać osadzony obraz. Jeśli ikona została wklejona jako PNG, wybranie SVG przy eksporcie nie zmieni jej automatycznie w ścieżki. Sprawdź źródło elementu i w razie potrzeby przygotuj prawdziwą wersję wektorową w osobnym procesie. Konwerter nie zastępuje narzędzia do wektoryzacji.
Na kopii eksportowej wyłącz po kolei efekty, które nie są niezbędne do rozpoznania znaku. Porównuj wynik po każdej zmianie. W przypadku obrysu obejrzyj narożniki i końce linii, a w przypadku półprzezroczystych fragmentów miejsca ich nakładania. Celem nie jest skasowanie całego stylu, tylko uzyskanie przewidywalnego źródła dla dalszego etapu.
Sprawdź tło i rzeczywisty kadr
Przezroczysta ikona może zostać wyeksportowana razem z wypełnieniem ramki. Figma udostępnia opcję Show in exports dla takiego wypełnienia. Odróżnij ją od rzeczywistego prostokąta narysowanego w środku projektu. Ukrycie jednego nie musi usunąć drugiego.
Otwórz SVG i sprawdź ilość pustej przestrzeni. Jeżeli dzwonek jest mały i przesunięty, upewnij się, że poza widoczną ikoną nie został zbędny obiekt. Zwróć też uwagę na viewBox, który opisuje obszar współrzędnych SVG. Nie poprawiaj kadru przypadkowym rozciąganiem znaku: wróć do ramki eksportowej i zachowaj proporcje.
Porównaj import przed animacją
Po zalogowaniu przez Telegram otwórz SVG to TGS i wybierz przygotowany SVG. Wybrany plik jest wysyłany również do diagnostyki usługi. Najpierw porównaj nieruchomy podgląd z kopią otwartą poza Figmą. Animację dodaj dopiero wtedy, gdy zgadzają się wszystkie istotne części znaku.
Jeżeli import różni się od źródła, zanotuj konkretny element: brak napisu, inny narożnik lub przesunięte koło. Przygotuj w Figmie uproszczoną kopię tylko tego fragmentu. Taka próba pomoże ustalić, czy problem jest związany z geometrią czy z efektem. Zachowaj działający SVG obok dokumentu projektowego i pobranego TGS.