Jak zaimportować projekt Figma do witryny internetowej

Przejdź do panelu Figma i kliknij swoje zdjęcie profilowe → Ustawienia.

Na karcie Konto przewiń w dół do sekcji "Osobiste tokeny dostępu" i wprowadź nazwę tokena, np. "Tilda.".

Skopiuj wartość tokena, aby użyć jej do importu.

Kliknij menu z trzema kropkami w prawym górnym rogu strony Zero Block i wybierz opcję "Importuj z Figma" z menu rozwijanego.

W aplikacji Figma wybierz żądany układ w panelu Warstwy, ramkę, której potrzebujesz i skopiuj link do ramki z paska adresu przeglądarki.

Aby import był poprawny, musisz dodać jedną ramkę Figma do jednej Zero Block

Wklej ten link do pola Layout URL i dodaj token API uzyskany w ustawieniach Figma do pola API Token.

Poczekaj, aż układ zostanie zaimportowany.

Jeśli wprowadziłeś poprawny link i nie ma żadnych błędów po stronie Figma API, układ zostanie zaimportowany do Zero Block.

Uwaga: Domyślnie obrazy są ładowane z serwerów Figma. Jeśli więc chcesz przesłać je na stronę Tilda, musisz przejść do ustawień elementów zawierających obrazy i kliknąć przycisk Prześlij na stronę Tilda.

Układy muszą być tworzone w ramce o szerokości 1200 pikseli.

Zalecamy importowanie układu do kilku bloków zamiast dodawania całego układu tylko do jednego.

Każda grupa może zostać zaimportowana jako obraz. W tym celu należy określić "image" w nazwie grupy w Figma. Jeśli podasz "svg", zostanie ona zaimportowana jako plik SVG.

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

Aby zaimportować przycisk, należy połączyć kształt i tekst w grupę i nazwać ją "przycisk".

Zaimportowana zostanie również właściwość wyrównania tekstu, dlatego zalecamy, aby szerokość elementu tekstowego była taka sama jak kształtu.

Jeśli kształt ma efekt, którego nie można odtworzyć na stronie Zero Block, zostanie on zaimportowany z obrazem efektu w tle.