Figma to świetne narzędzie, które szybko staje się ulubieńcem projektantów UX/UI i stron internetowych. Możesz szybko i łatwo tworzyć responsywne projekty stron internetowych za pomocą tego bezpłatnego narzędzia opartego na przeglądarce.
Podczas gdy większość ludzi tworzy swoje projekty od zera w Figma, możesz zainspirować się prawdziwymi stronami internetowymi i łatwo stworzyć projekt Figma bezpośrednio z istniejącej strony HTML. Oto jak to zrobić.
Dlaczego warto tworzyć projekty Figma z HTML
Istnieje wiele powodów, dla których warto powielić istniejący projekt strony internetowej jako projekt firmy Figma. Robienie tego za pomocą wtyczki Figma oszczędza czas, pozwalając skupić się na dopracowaniu projektu.
Ćwiczenie projektowania stron internetowych poprzez odtwarzanie istniejących stron internetowych to świetny sposób uczenia się od mistrzów. Możesz także użyć narzędzia do projektowania HTML to Figma, jeśli wcześniej zaprojektowałeś i opublikowałeś stronę internetową, do której utraciłeś dostęp. Zamiast przeprojektowywać go od zera, możesz zaoszczędzić czas, konwertując go z powrotem do Figma, aby ponownie nad nim pracować.
Teraz, gdy wiesz, dlaczego to narzędzie może być przydatne, nadszedł czas, aby dowiedzieć się, jak to działa.
Jak przekonwertować dowolną stronę internetową na projekt Figma
Aby rozpocząć jakąkolwiek pracę projektową opartą na Figma, musisz otworzyć Figmę i zalogować się lub zarejestrować. Możesz skorzystać z wersji przeglądarkowej, Figma, Lub pobierz aplikację komputerową; oba działają w ten sam sposób w tym projekcie.
Otwórz Nowy plik projektowy aby rozpocząć projekt HTML do Figmy.
Krok 1: Pobierz wtyczkę html.to.design
Aby móc bezpośrednio przekonwertować działającą stronę internetową na projekt Figma, będziesz potrzebować wtyczki. Na Figma jest niezliczona ilość wtyczek, które pomagają w twoich projektach, w tym wtyczki do tworzenia makiet telefonów i urządzeń. Jeśli chcesz, możesz później dodać przekonwertowany projekt witryny do makiety.
Aby pobrać wtyczkę, wybierz Menu Figmy (logo Figmy) > Wtyczki > Znajdź więcej wtyczek. Alternatywnie możesz wybrać Zasoby > Wtyczki. Z dowolnej opcji wpisz w pasku wyszukiwania html.do.projektu.
Znajdź opcję dostarczoną przez divRIOTS i wybierz Uruchomić. Spowoduje to otwarcie wtyczki jako okna dialogowego na płótnie Figma.
Krok 2: Wklej adres URL witryny
Wtyczka html.to.design jest bezpłatna, ale oferuje wersję pro. Możesz całkowicie ukończyć proces projektowania za pomocą bezpłatnej wersji.
Znajdź stronę internetową, dla której chcesz wykonać projekt Figma. Powinieneś korzystać z publicznej witryny internetowej, a nie strony internetowej, do której można uzyskać dostęp tylko po zalogowaniu. Użyjemy naszej strony głównej, MakeUseOf.com.
Skopiuj pełny adres URL i wklej go w polu importu na Figma, zastępując symbol zastępczy witryny Apple.
Krok 3: Załaduj swój projekt
Po wklejeniu adresu URL witryny otwórz Ustawienia pod polem importu, aby wybrać rozmiar projektu. Możesz zaimportować projekt dla różnych urządzeń, ale lepszy będzie wybór urządzenia stacjonarnego, jeśli użyjesz adresu URL komputera, a większy sukces, jeśli użyjesz mobilnego adresu URL dla urządzeń mobilnych.
Istnieją również niestandardowe opcje dla urządzeń lub rozmiarów, które nie są dostępne jako opcje domyślne. wybieramy MacBook Pro 14” z Światło temat.
Po określeniu urządzenia i ustawień widoku wybierz Import aby ożywić Twój projekt HTML w Figma. Poczekaj, aż pasek ładowania się zakończy, aby projekt Figma się wypełnił.
W zależności od używanej witryny internetowej możesz zauważyć wyskakujące okienko z informacją o konieczności wymiany niektórych krojów pisma. Będzie to spowodowane prawami autorskimi do licencjonowanych krojów pisma. Figma zastąpi je krojami pisma, do których masz dostęp.
Zamknij wszystkie wyskakujące okienka, a następnie zamknij okno dialogowe wtyczki, aby zobaczyć swój nowy projekt w pełnej formie.
Krok 4: Edytuj swój projekt Figmy
Od tego momentu możesz rozpocząć edycję swojej strony internetowej Figma w dowolny sposób. Jak wspomniano, ta funkcja HTML do Figmy pozwala dowiedzieć się, w jaki sposób zaprojektowano istniejące strony internetowe, aby zainspirować Cię do stworzenia własnych od podstaw. Możesz użyć podstawowego projektu ze strony internetowej i utwórz prezentację za pomocą przejść w programie Figmalub po prostu dowiedz się, jak strony internetowe są konfigurowane przez innych projektantów.
W lewym menu znajdziesz warstwy. Ponieważ zostało to przekonwertowane bezpośrednio z HTML, warstwy mogą być bardziej szczegółowe — a nawet mylące — niż te, do których jesteś przyzwyczajony podczas samodzielnego projektowania. Wybierz sekcję w projekcie, aby znaleźć podświetlone warstwy w menu po lewej stronie.
Możesz zastępować obrazy, ponownie wpisywać tytuły i treść lub przenosić elementy w układzie, klikając dwukrotnie aspekt projektu. Wtyczka html.to.figma nie powiela ustawień animacji ani przejść podczas klikania łączy lub zmieniania stron. Możesz dodać je samodzielnie.
Jak przekonwertować prywatną stronę internetową
Większość procesu tworzenia prywatnej witryny — takiej, do której dostęp wymaga konta — w porównaniu z publiczną stroną internetową jest taka sama. Jednak zamiast wklejać adres URL, musisz zamiast tego użyć rozszerzenia Chrome, które generuje plik.
Aby rozpocząć, otwórz Figmę i wtyczkę html.to.figma w taki sam sposób jak poprzednio.
Krok 1: Pobierz i uruchom rozszerzenie Chrome
Możesz używać tego rozszerzenia tylko z Google Chrome, więc otwórz Chrome, aby rozpocząć. W oknie dialogowym wtyczki Figma wybierz rozszerzenie Chrome-Lub otwórz rozszerzenie tutaj w przeglądarce Chrome.
Wybierać Dodaj do Chrome > Dodaj rozszerzenie aby dodać rozszerzenie do przeglądarki.
Po dodaniu rozszerzenia przejdź do prywatnej witryny lub strony, której projekt chcesz powielić — używamy strony na Instagramie — i wybierz rozszerzenie. Zwinięte rozszerzenia znajdują się pod ikoną puzzli w Twojej przeglądarce.
Zapyta, czy chcesz przechwycić całą stronę, czy tylko to, co jest widoczne. Dokonaj wyboru, a następnie przechwytywanie pojawi się w pobranych plikach jako plik .h2d.
Krok 2: Przeciągnij wygenerowany plik do wtyczki Figma
Przejdź do aplikacji Figma lub strony Figma w przeglądarce i przeciągnij pobrany plik .h2d do pudełka. Plik zostanie załadowany i wygenerowany w taki sam sposób, jak opcja publicznej strony internetowej.
Podobnie jak w przypadku publicznej wersji strony internetowej, możesz kliknąć dwukrotnie elementy projektu, aby je edytować, lub kliknąć menu po lewej stronie, aby zobaczyć, gdzie pojawiają się w układzie.
Możesz chcieć dodać nowe elementy projektu do projektu strony internetowej, np efekt matowego szkła Figma, a nawet możesz powielić części projektu strony internetowej jako plik wzorcowy szablon prezentacji Figma. w 2022 r. Adobe przejął Figmę, więc możemy spodziewać się więcej zabawnych sposobów korzystania z Figma w przyszłości.
Wykorzystaj dowolną stronę internetową do inspiracji w swoich projektach Figma
Podczas gdy Figma służy przede wszystkim do projektowania stron internetowych lub stron UX/UI od podstaw, jest to świetna okazja do wypełnienia istniejących stron internetowych, aby zobaczyć, jak zostały zbudowane. Możesz także uczynić swój projekt internetowy repliką istniejącej witryny, jeśli nie masz pewności, od czego zacząć od pustej karty.
Kolejnym świetnym powodem, dla którego powinieneś używać wtyczki html.to.figma, jest to, że zaprojektowałeś już stronę internetową, do której utraciłeś dostęp. Możesz zapełnić stronę w Figma i zacząć od nowa bez konieczności zaczynania od nowa.