Jak przekonwertować dowolną stronę internetową na projekt Figma

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 podstaw w Figma, możesz zainspirować się prawdziwymi stronami internetowymi i łatwo stworzyć projekt Figmy 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 użyć wersji przeglądarkowej Figma lub pobrać aplikację komputerową ; oba działają w ten sam sposób w tym projekcie.

Otwórz nowy plik projektu, aby rozpocząć projekt projektu HTML do Figma.

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. Figma oferuje niezliczoną ilość wtyczek pomagających w projektowaniu, w tym wtyczek 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 Figma (logo Figma) > Wtyczki > Znajdź więcej wtyczek . Alternatywnie możesz wybrać Zasoby > Wtyczki . Z dowolnej opcji wpisz w pasku wyszukiwania html.to.design .

Znajdź opcję dostarczoną przez divRIOTS i wybierz Uruchom . 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ś skorzystać z publicznej witryny internetowej, a nie strony internetowej, do której dostęp można uzyskać tylko po zalogowaniu. Będziemy korzystać z 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 dotyczące urządzeń lub rozmiarów, które nie są dostępne jako opcje domyślne. Wybieramy MacBooka Pro 14” z motywem Light .

Po określeniu urządzenia i ustawień widoku wybierz opcję Importuj , aby ożywić swój projekt HTML w programie 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 stworzyć prezentację z wykorzystaniem przejść w Figmie lub po prostu dowiedzieć 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.

Wybierz 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 przechwytywanie pojawi się w pobranych plikach jako plik. 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 dodać nowe elementy projektu do projektu strony internetowej, takie jak efekt matowego szkła Figma, lub możesz nawet powielić części projektu strony internetowej jako główny szablon prezentacji Figma. W 2022 roku firma Adobe przejęła firmę Figma, więc możemy spodziewać się więcej zabawnych sposobów korzystania z firmy 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 zapełnienia istniejących stron internetowych, aby zobaczyć, jak zostały zbudowane. Jeśli nie masz pewności, od czego zacząć od pustej karty, możesz również sprawić, by Twój projekt internetowy był repliką istniejącej witryny.

Innym ważnym 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.