Na swoim koncie Figma kliknij opcję „Działania” na dolnym pasku narzędzi i wybierz zakładkę „Wtyczki i widżety”. W polu wyszukiwania wpisz nazwę Tilda „Figma to Tilda ” i kliknij ją lub dodaj wtyczkę, korzystając z linku.

Kliknij przycisk „Uruchom”, aby włączyć wtyczkę.

Gotowe! Teraz możesz importować warstwy i elementy do Tilda.

Po dodaniu wtyczki wybierz potrzebną warstwę w układzie. Wybrana warstwa zostanie wyświetlona w polu „Wybrane warstwy” w oknie wtyczki.

W oknie wtyczki kliknij przycisk „Przygotuj do kopiowania ”, aby przygotować warstwy do importu.

Gdy ramka będzie gotowa do zaimportowania, kliknij przycisk „Kopiuj do schowka ”.

Wejdź na stronę Tilda → otwórz plik Zero Block i użyj skrótu klawiaturowego: Ctrl+V w systemie Windows lub Command+V na komputerze Mac.

Ramkę można zaimportować jako oddzielną grupę lub z ustawieniami zastosowanymi do obszaru roboczego i zastąpieniem wszystkich obecnych elementów.

Jeśli obszar roboczy zawiera już elementy, można również wstawić ramkę jako grupę, ale ta opcja spowoduje usunięcie wszystkich elementów z obszaru roboczego.

Po wybraniu opcji „Zastosuj ustawienia do obszaru roboczego” w Zero Block zostaną zastosowane ustawienia warstwy nadrzędnej ramki: Tilda kolor tła lub obraz tła, automatyczny układ oraz inne ustawienia obsługiwane przez Tilda .

W przypadku wstawienia kilku ramek okienko z opcjami importu nie zostanie wyświetlone.

Przejdź do strony głównej Figma i kliknij Wyświetl profil → Ustawienia pod swoim zdjęciem profilowym.

Następnie przejdź do zakładki Bezpieczeństwo, przejdź do bloku Osobiste tokeny dostępu i kliknij Wygeneruj nowy token.

W nowym oknie podaj nazwę Tilda i wybierz okres jego ważności. Na przykład: 1 dzień, 7 dni, 30 dni lub 90 dni.

W obszarze „Zakresy” zaznacz pola wyboru: „Bieżący użytkownik”, „Zasoby programistyczne”, „Zawartość plików”, „Wersje plików”, „Zasoby biblioteki”, „Zawartość biblioteki” oraz „Projekty”. Następnie kliknij przycisk „Wygeneruj token”.

Po utworzeniu klucza skopiuj go, aby wprowadzić go w ustawieniach importu w Tilda. Nie ma możliwości ponownego wyświetlenia klucza – wystarczy utworzyć nowy.

Kliknij menu z trzema kropkami w Zero Block wybierz opcję „Importuj z Figma”.

Przejdź do serwisu Figma. Otwórz układ, wybierz potrzebną ramkę i skopiuj link do ramki z paska adresu przeglądarki.

W oknie, które się otworzy, dodaj link do ramki oraz token API uzyskany w ustawieniach Figma.

Poczekaj, aż układ zostanie zaimportowany.

Jeśli dodano prawidłowe łącze i nie ma błędów po stronie API Figma, układ zostanie zaimportowany do Zero Block.

Pamiętaj, że domyślnie obrazy są ładowane z serwerów Figma, więc jeśli chcesz je przesłać do Tilda, musisz przejść do ustawień elementów zawierających obrazy i kliknąć opcję „Prześlij do Tilda”.

Układy należy tworzyć na ramce o szerokości 1200 pikseli.

Zalecamy zaimportowanie układu do kilku bloków zamiast umieszczania całego układu w jednym bloku.

Każdą grupę można zaimportować jako obraz. W tym celu należy w jej nazwie wpisać „image”. Jeśli wpiszesz „svg”, zostanie ona zaimportowana jako plik SVG.

Można również importować grupy. Jeśli w środku znajdują się inne grupy, wszystkie elementy znajdą się w grupie najwyższego poziomu.

Aby zaimportować przycisk, należy połączyć kształt i tekst w grupę oraz dodać w jej nazwie słowo „przycisk”. Właściwość wyrównania tekstu również zostanie zaimportowana, dlatego zalecamy, aby szerokość elementu tekstowego była taka sama jak szerokość kształtu.

Jeśli kształt zawiera efekt, którego nie da się odtworzyć w Zero Block, zostanie on zaimportowany z obrazem efektu w tle.