Dzięki Landingi Figma Design System i wtyczce Landingi Figma Plugin możesz projektować landing page’e w Figmie i bezproblemowo importować je do platformy Landingi, zachowując spójność i płynność pracy.
Zarówno Design System, jak i wtyczka są dostępne za darmo.
Z tej instrukcji dowiesz się, jak krok po kroku stworzyć landing page w Figmie przy użyciu Landingi Design System – od konfiguracji po publikację. Poznasz zasady strukturyzowania projektu, eksportowania go za pomocą wtyczki Landingi i przesyłania do platformy, aby uzyskać w pełni funkcjonalną stronę.
WAŻNE: Ta metoda tworzenia landing page’y działa TYLKO z Design Systemem dostarczonym przez Landingi. Upewnij się, że korzystasz z niego podczas projektowania.
Krok 1. Pobierz Design System i stwórz landing page
1. Pobierz za darmo Landingi Design System.
2. Przejrzyj sekcję Start here w pliku Design System, aby zapoznać się z kluczowymi wytycznymi.
3. Czcionki, kolory i odstępy, które mają odpowiadać Twojej identyfikacji wizualnej, możesz zmieniać w zakładce All variables. Komponenty dostosują się do Twojego stylu, ale zawsze możesz je dodatkowo edytować na stronie Components.
4. Stwórz landing page, korzystając z gotowych sekcji dostępnych na stronie Sections. Alternatywnie możesz zbudować go od podstaw, używając komponentów ze strony Components, dbając jednocześnie o odpowiednią hierarchię ramek.
Hierarchia
Główna ramka zawiera wszystkie sekcje. Możesz zmieniać jej szerokość.
Section_wrapper ustawia tło, obramowanie i zaokrąglenia sekcji. Dzięki Auto Layout w układzie pionowym (wyrównanym do góry i środka) szerokość „hug” utrzymuje tło w granicach sekcji, a „fill” rozciąga je na 100% szerokości przeglądarki, zachowując treść w 960 px lub 1200 px.
Frame Content nie ma tła. Możesz dostosować padding, marginesy i Auto Layout. Szerokość powinna wynosić 960 px lub 1200 px.
Kolumna (Frame) służy do ustalania pozycji w widoku mobilnym, ale nie jest widoczna w edytorze. Powinna być ustawiona na Auto Layout, z szerokością i wysokością „fill”. Możesz stosować padding, marginesy i Auto Layout.
W kolumnie możesz umieszczać formularze, obrazy, teksty i boksy. Kolejne ramki to właśnie boksy.
Komponenty
Korzystaj z zakładki Components do dodawania przycisków, formularzy i innych interaktywnych elementów.
Obrazy
Wszystkie elementy graficzne muszą być zapisane jako obrazy w Figma – nie używaj plików SVG.
Obsługiwane widgety
Obecna wersja wtyczki obsługuje widgety: Tekst, Przyciski, Obraz, Sekcja i Formularz.
Krok 2. Eksportuj projekt za pomocą wtyczki
1. Zainstaluj wtyczkę Landingi Plugin. Otwórz ją w sekcji Plugins. Wtyczka jest darmowa.
2. Po otwarciu wtyczki wybierz ramkę projektu ze swoim landing page’em. Zostanie ona dodana do podglądu.
3. Kliknij przycisk Generate .landingpage file. Pojawi się pasek postępu – poczekaj, aż proces się zakończy. Plik pobierze się automatycznie.
Krok 3. Wgraj landing page do Landingi i opublikuj go
1. Zaloguj się na swoje konto w Landingi.
2. W platformie Landingi kliknij przycisk Wgraj plik .landingpage, aby zaimportować landing page, a następnie wybierz wcześniej wygenerowany plik.
3. W edytorze przejrzyj i dostosuj landing page według potrzeb – zaktualizuj ustawienia SEO, dodaj linki i skonfiguruj integracje.
4. Kliknij Publikuj, aby udostępnić swoją stronę. Wybierz jedną z opcji publikacji: własna domena, WordPress lub plik .PHP
5. Sprawdź, czy landing page wyświetla się poprawnie.
UWAGA: Landingi Design System jest obecnie w wersji Beta. Przetestuj go, podziel się opinią i pomóż nam go rozwijać. Wkrótce pojawią się nowe komponenty. Dowiedz się więcej.
