Jak przekonwertować Figmę na WordPress? [Darmowe i płatne sposoby]

Figma jest najbardziej znana jako narzędzie do projektowania i kreatywności, podczas gdy WordPress słynie z elastyczności, dostosowywania i łatwości użytkowania. A co by było, gdybyś mógł połączyć najlepsze z tych platform, aby stworzyć oszałamiającą stronę internetową?

Tak to mozliwe. Możesz zaprojektować swoją stronę internetową za pomocą Figmy, a następnie przekonwertować ją na WordPress. Chociaż kiedyś było to trudne zadanie wymagające przetwarzania HTML i preinstalowanych motywów, teraz wszystko stało się znacznie łatwiejsze.

Jeśli szukasz tego samego, jesteś we właściwym miejscu.

W tym poście poprowadzimy Cię, jak przekonwertować Figmę na WordPress w bardzo łatwy, przyjazny dla początkujących sposób, bez konieczności posiadania wiedzy technicznej.

Opcja 1: Użyj bezpłatnej wtyczki, aby przekonwertować Figmę na WordPress

Chociaż istnieje wiele sposobów konwersji Figmy na WordPress, możesz wybrać metodę bezpłatną, skorzystać z wtyczki konwersji premium lub skorzystać z metody ręcznej. (Mają swoje wady i zalety)

Krok 1: Przede wszystkim powinieneś stworzyć projekt Figma, który chcesz później przekonwertować na WordPress. Nigdy jednak nie należy zapominać o przestrzeganiu wszystkich najlepszych praktyk branżowych i zasad projektowania.

Krok 2: Po pomyślnym utworzeniu i zaprojektowaniu strony Figma nadszedł czas na wygenerowanie jej klucza API. Ten klucz API pomoże pobrać stronę Figma poprzez wtyczkę i osadzić ją w WordPress.

W tym celu kliknij ikonę Figma znajdującą się w lewym górnym rogu ekranu. Otworzy się opcje Menu, w których musisz wybrać Pomoc i Konto> Ustawienia konta.

Otworzy się nowy monit, w którym należy przewinąć w dół do sekcji „Tokeny dostępu osobistego” i kliknąć link Wygeneruj nowy token .

Następnie otworzy się nowy monit, w którym zostaniesz poproszony o podanie podstawowych szczegółów tworzonego tokena, takich jak nazwa i data ważności.

Uwaga : W sekcji Wygaśnięcie zawsze zaznacz opcję „ Bez wygaśnięcia ”, aby Twoja strona Figma nie zniknęła z Twojej witryny po upływie określonego czasu.

Poniżej ustaw wszystkie zakresy na „Zapisz” i kliknij przycisk „Generuj token”. Zostaniesz przekierowany do sekcji „Osobisty token dostępu”, skąd możesz łatwo skopiować wygenerowany token i zapisać go w Notatniku lub w dowolnym edytorze.

Krok 3: Teraz, gdy pomyślnie wygenerowałeś i zapisałeś token, czas przekonwertować swoją stronę Figma na WordPress.

Aby rozpocząć proces, musisz zainstalować i aktywować prostą, ale potężną wtyczkę WordPress o nazwie „Konwerter animacji i projektowania dla bloku Gutenberga – zaawansowane dodatki” na swojej stronie WordPress.

Po udanej instalacji i aktywacji otwórz stronę lub post swojej witryny WordPress, w którym chcesz osadzić zaprojektowaną stronę Figma.

Na tej stronie lub w poście kliknij przycisk „ Importuj z Figmy ” w lewym górnym rogu ekranu.

Otworzy się monit z prośbą o podanie „Tokenu dostępu Figma”, który wygenerowałeś i zapisałeś wcześniej. Wprowadź adres URL pliku Figma.

Aby uzyskać adres URL pliku Figma, wróć do pliku Figma, skopiuj adres URL w karcie przeglądarki poniżej i wklej go w polu Adres URL pliku Figma.

Co do reszty, wtyczka wykona swoją pracę i przekonwertuje plik Figma na bloki WordPress. Następnie możesz wykonać dowolną liczbę dostosowań z panelu bloków.

Po zakończeniu kliknij przycisk „Opublikuj” lub „Aktualizuj”, aby zapisać ustawienia.

Opcja 2: Użyj płatnej wtyczki, aby przekonwertować Figmę na WordPress (bardziej wydajnie i bezproblemowo)

W przypadku tej metody użyjemy bardziej popularnej i wydajnej wtyczki do konwersji „Uichemy”. Ta wtyczka oferuje bardzo bezproblemowy i prosty przepływ pracy, dzięki czemu proces konwersji jest bezproblemowy. Najlepiej nadaje się dla początkujących, którzy nie mają doświadczenia w kodowaniu, a także dla programistów, którzy chcą przyspieszyć swój proces.

Obecnie ta wtyczka może konwertować tylko projekty Figmy do edytorów stron internetowych Elementor i Bricks, ale firma obiecała zapewnić w przyszłości obsługę bloków Gutenberga.

Krok 1: Otwórz projekt Figma i zainstaluj wtyczkę Uichemy na pulpicie nawigacyjnym Figma, aby rozpocząć proces konwersji.

• Aby to zrobić, wyszukaj „ UiChemy ” w pasku wyszukiwania i znajdź wtyczkę UiChemy.

Kliknij przycisk „Zacznijmy” i postępuj zgodnie z instrukcjami instalacji i aktywacji.

• Wprowadź klucz seryjny, aby zakończyć aktywację. (Aby uzyskać klucz seryjny, utwórz bezpłatne konto, klikając przycisk „Uruchom za darmo”. Po utworzeniu konta klucz licencyjny znajdziesz na pulpicie nawigacyjnym konta w sklepie Posimyth.)

Krok 2: Po udanej aktywacji wybierz projekt Figma lub ramkę, którą chcesz przekonwertować na WordPress i kliknij przycisk „ Konwertuj na Elementor ” w wyskakującym oknie.

(Upewnij się, że przed konwersją zainstalowałeś i aktywowałeś wtyczkę Elementor na swojej stronie WordPress, a także przeczytaj wszystkie warunki przed konwersją projektu Figma).

Krok 3: Możesz teraz wyświetlić podgląd swojego projektu, wprowadzając adres URL swojej witryny i klucz tokena. Jeśli nie chcesz, po prostu kliknij bezpośrednio przycisk „Konwertuj na Elemetor”. (Zapoznaj się z samouczkiem UiChemy na temat „Co to jest podgląd na żywo”, aby uzyskać wskazówki dotyczące generowania klucza tokena i adresu URL witryny.)

Krok 3: Twój projekt zostanie przekonwertowany i pobrany plik JSON.

Teraz otwórz pulpit administracyjny WordPress > Przejdź do Szablony > Zapisane szablony.

Teraz kliknij przycisk „ Importuj szablony ” u góry strony i prześlij plik JSON.

Krok 4: Gratulacje! Twój projekt Figma pojawi się teraz w sekcji „Zapisane szablony”, gdzie możesz go otworzyć i dokonać dalszej edycji lub dostosowywania.

Krok 5: Po zakończeniu dostosowywania lub edycji wyświetl swój projekt w interfejsie użytkownika. Upewnij się, że wszystkie obrazy i przyciski są prawidłowo wyrównane i działają prawidłowo. Sprawdź także, czy projekt jest responsywny na wszystkich rozmiarach ekranów.

Opcja 3: Ręczna konwersja Figmy na WordPress (dla programistów)

Ta metoda jest dość techniczna, dlatego wymaga dobrej znajomości CMS WordPress i trochę cierpliwości, dlatego najlepiej nadaje się dla tych, którzy lubią kodować.

Krok 1: Pierwszym krokiem jest wyeksportowanie wszystkich elementów projektu, takich jak ikony i obrazy, z Figmy. W tym celu otwórz swój projekt Figma i wybierz, co chcesz wyeksportować. Teraz kliknij przycisk „Eksportuj” i wybierz odpowiedni format i rozdzielczość.

Uwaga: zdecydowanie zaleca się, aby podczas eksportowania obrazów wybrać PNG lub JPG, a w przypadku ikon i wektorów wybrać SVG, aby zachować jakość. Zachowaj także ostrożność podczas eksportowania plików i upewnij się, że mają one właściwy format, w przeciwnym razie będzie to miało poważny wpływ na wygląd Twojej witryny.

Krok 2: Teraz musimy stworzyć niestandardowy motyw WordPress, aby przekonwertować wszystkie projekty Figma na witrynę WordPress. Dzieje się tak dlatego, że motyw WordPress kontroluje wygląd i działanie Twojej witryny.

Typowy plik motywu WordPress składa się z kodu PHP, plików JavaScript i plików arkuszy stylów CSS.

• Utwórz w WordPressie nowy folder dla swojego motywu w katalogu wp-content/themes i nazwij go według własnego uznania. (Możesz uzyskać dostęp do tych plików za pośrednictwem Cpanel, edytora WordPress lub klientów FTP) Lub sprawdź nasz dedykowany blog na temat „Jak zainstalować motyw WordPress?”

Jeśli jesteś użytkownikiem WPOven, możesz uzyskać dostęp do pliku WordPress, postępując zgodnie z tym samouczkiem. „Nowy menedżer plików do łatwego zarządzania plikami i folderami w Twojej witrynie.”

Teraz dodaj do niego pliki takie jak indeks.php, nagłówek.php, stopka.php i funkcje.php. (Na razie pozostaw te pliki puste). Dodaj także plik style.css, aby skonfigurować arkusz stylów CSS motywu w tym samym folderze.

(Ten konkretny plik style.css jest odpowiedzialny za wyświetlanie wszystkich kolorów, czcionek, obramowań, marginesów i innych elementów wizualnych witryny.)

Teraz dodaj następujący komentarz nagłówka do pliku style.css, jak podano poniżej:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Tutaj musisz podać nazwę motywu niestandardowego motywu WordPress i autora. Pomoże to WordPressowi zidentyfikować Twój niestandardowy motyw.

Nie zapomnij także dodać obrazu do motywu WordPress, aby był łatwo rozpoznawalny w katalogu WordPress, podobnie jak miniatura YouTube.

Preferowany rozmiar powinien wynosić 800×600 pikseli i powinien być w formacie PNG. Nadaj dowolną nazwę i dodaj ją do folderu motywu.

Krok 3: Teraz musimy dodać wszystkie wyeksportowane zasoby Figma do dostosowanego folderu motywu.

Wskazówka: Jeśli Twoja witryna jest złożona, lepiej zarządzać wszystkimi zasobami w określonym podfolderze, tak jak pokazano na poniższym obrazku:

Krok 4: Aby motyw WordPress był w pełni funkcjonalny, musisz dodać HTML, CSS i JavaScript do plików motywu.

Zobaczmy, jak możesz to zrobić,

Najpierw musisz przekonwertować swoje makiety Figma na kod, a do tego będziesz potrzebować narzędzia do edytowania kodu.

Zacznij od skonfigurowania struktury HTML z elementami takimi jak nagłówki, stopki, paski nawigacyjne i sekcje. Dodaj swoje kody do plików PHP (index.php, header.php i footer.php).

Teraz użyj CSS, aby nadać styl swoim elementom HTML. Dodaj swoje style w pliku „style.css”, ustawiając kolory, czcionki, rozmiary i inne aspekty projektu.

• Dla lepszej stylizacji możesz użyć:
  • Preprocesory CSS, takie jak SASS lub LESS
  • Frameworki takie jak Bootstrap lub Tailwind
  • Motyw startowy WordPress
• W przypadku złożonych projektów nie musisz umieszczać całego kodu CSS w jednym pliku, ale w bardziej zorganizowany sposób. Możesz dodać osobne pliki CSS dla różnych części w folderze zasobów, aby w przyszłości łatwiej było zarządzać i rozwiązywać problemy.

Wreszcie, w przypadku JavaScript, znajdź elementy, które muszą być interaktywne, takie jak menu rozwijane, suwaki itp.)

Rozważ użycie jQuery, aby ułatwić wykonywanie zadań, takich jak wywołania AJAX i manipulacja DOM, oraz prawidłowo załaduj pliki CSS (arkusze stylów) i JavaScript (skrypty) do motywu WordPress za pomocą pliku functions.php .

Krok 5: Teraz nadchodzi część testowa. Po pomyślnym przejściu wszystkich powyższych kroków zapisz swoje pliki i sprawdź, czy wszystko działa dobrze. Ale wcześniej musimy aktywować wtyczkę.

Aby aktywować wtyczkę, przejdź do panelu WordPress> Wygląd> motywy . Twój niestandardowy motyw zacznie się pojawiać wraz z obrazem przesłanym wcześniej do folderu motywów. Kliknij na niego, aby aktywować, a Twoja witryna WordPress jest gotowa do testów.

Oto kilka sugestii dotyczących testów, które możesz zastosować:

• Sprawdź, jak Twoja witryna wygląda i działa w różnych przeglądarkach i rozmiarach ekranów.
• Użyj narzędzi do optymalizacji obrazów w celu szybszego ładowania.
• Zastosuj buforowanie, aby przyspieszyć swoją witrynę.
• Zrób kopię zapasową swojej witryny przed jej publikacją.

Streszczenie

Konwersja z Figmy na WordPress nie jest tak prosta, jak się wydaje, w zależności od złożoności strony internetowej. Im bardziej złożony projekt, tym bardziej złożony jest proces, który należy wykonać. Staraliśmy się uwzględnić wszystkie opcje dla wszystkich typów użytkowników.

Ręczne wykonanie tej czynności może zapewnić większą kontrolę, ale pochłonie dużo czasu i wysiłku. Możesz jednak użyć wtyczek, aby przyspieszyć proces konwersji, ale nadal może być konieczne wprowadzenie pewnych zmian, aby uzyskać lepsze wyniki.

To, którą metodę wybierzesz, zależy całkowicie od Twoich preferencji i łatwości zrozumienia.

Rahul

Rahul Kumar jest entuzjastą sieci i specjalistą ds. strategii treści, specjalizującym się w WordPressie i hostingu. Dzięki wieloletniemu doświadczeniu i zaangażowaniu w bycie na bieżąco z trendami branżowymi tworzy skuteczne strategie online, które generują ruch, zwiększają zaangażowanie i zwiększają konwersję. Dbałość Rahula o szczegóły i umiejętność tworzenia atrakcyjnych treści czyni go cennym nabytkiem dla każdej marki chcącej poprawić swoją obecność w Internecie.