Jak wyeksportować Adobe XD do HTML

Adobe XD to niesamowite narzędzie do projektowania, które pozwala łatwo tworzyć fantastyczne projekty stron internetowych bez wcześniejszego doświadczenia w tworzeniu stron internetowych. Możesz po prostu zaimportować pliki PSD swojego projektu z Photoshopa i stworzyć przyciągający wzrok interfejs użytkownika.

Projekty te pomagają programistom zrozumieć, w jaki sposób Twoja strona ma wyglądać i ułatwić proces rozwoju z ich strony. Istnieje jednak ograniczona liczba sposobów eksportowania projektów z oprogramowania.

Możesz zapisać je jako plik XD i mieć nadzieję, że programista już zainstalował oprogramowanie w swoim systemie lub eksportuje każdy obszar roboczy jako pojedynczy plik PNG, co może być nieco niewygodne w użyciu.

Również w Technice przewodniej

Najlepsze 3 narzędzia do tworzenia makiet i szkieletów

Na szczęście jest przydatna wtyczka innej firmy, która pozwala eksportować obszary robocze jako pliki HTML i o tym będę mówił. Ale zanim do tego dojdzie, jest coś, co musisz wiedzieć.

Uwaga: Plik HTML wygenerowany przy użyciu tej metody w żaden sposób nie powinien być traktowany jako podstawa dla kompletnej strony internetowej. Ta metoda jest tylko sposobem na łatwe udostępnianie projektów deweloperowi, a nie funkcjonalnemu procesowi tworzenia stron internetowych.

Eksportuj pliki Adobe XD do HTML za pomocą wtyczek

Teraz, gdy już to zrobiliśmy, po prostu wykonaj poniższe proste kroki, aby pobrać wymaganą wtyczkę, a następnie wyeksportować pliki Adobe XD do HTML:

Krok 1: Kliknij przycisk menu hamburgera w lewym górnym rogu oprogramowania.

Krok 2: Przewiń w dół, a następnie kliknij opcję Wtyczki. To otworzy nowy panel wtyczek po prawej stronie głównego menu.

Krok 3: Wybierz opcję Odkryj wtyczki z panelu Wtyczki.

Krok 4: Na następnej stronie wyszukaj kod HTML, a następnie kliknij przycisk Instaluj obok wtyczki Web Export.

Po zainstalowaniu wymaganej wtyczki otwórz projekt, który chcesz wyeksportować do HTML, a następnie wykonaj następujące kroki. W tym artykule użyję bezpłatnego arkusza Adobe XD, który znalazłem w Internecie.

Krok 5: Wybierz obszar roboczy, który chcesz wyeksportować, klikając go.

Krok 6: Teraz kliknij przycisk menu, przejdź do panelu Wtyczki, a następnie wybierz opcję Eksportuj obszar roboczy z nowych ustawień wtyczki Eksport do sieci.

Z tego samego okna możesz także wyeksportować wiele obszarów roboczych lub ostatni edytowany obszar roboczy.

Krok 7: W wyskakującym okienku Eksportuj obszar roboczy dodaj nazwę pliku, a następnie wybierz folder, w którym chcesz zapisać plik, klikając ikonę małego folderu obok opcji Eksportuj folder.

Krok 8: Jeśli chcesz dodać zewnętrzny skrypt, arkusz stylów lub alternatywne czcionki do eksportowanego pliku, możesz dodać je w tym samym oknie.

Krok 9: Następnie możesz wybrać wymiary wyjściowego pliku HTML, wpisując wartości w pustym miejscu obok opcji Rozmiar.

Krok 10: Aby zapewnić prawidłowe skalowanie projektu, możesz również wybrać różne ustawienia skalowania z tego samego okna, zaznaczając pole obok każdej opcji.

Krok 11: Ponadto możesz wybrać dowolne dodatkowe ustawienia, takie jak Nawigacja za pomocą klawiatury, Automatyczne odświeżanie itp., Zaznaczając pola obok opcji.

Krok 12: Po sfinalizowaniu wszystkich ustawień kliknij niebieski przycisk Eksportuj i gotowe. Obszar roboczy pojawi się jako plik HTML w wybranym folderze docelowym.

Z tego samego okna możesz także skopiować CSS i znaczniki obszaru roboczego, jeśli chcesz udostępnić te informacje swojemu programistowi.

Jeszcze raz zauważ, że wyeksportowany HTML nie może być w żaden sposób wykorzystany do stworzenia w pełni funkcjonalnej strony internetowej. Od teraz nie ma możliwości bezpośredniego opublikowania projektu Adobe XD w Internecie, a według kilku dyskusji na forach Adobe, w najbliższym czasie go nie będzie.

Adobe XD to tylko narzędzie do prototypowania, które pozwala na stworzenie wstępnego projektu bez kodu. Po przygotowaniu projektu możesz użyć platformy takiej jak Dreamweaver, aby przekonwertować swój projekt na stronę internetową. Ale do tego będziesz potrzebował wcześniejszego doświadczenia w tworzeniu stron internetowych lub będziesz musiał zatrudnić kogoś, kto to zrobi.

Również w Technice przewodniej

#projekt

Kliknij tutaj, aby zobaczyć naszą stronę z artykułami projektowymi

Eksportuj plik Adobe XD do HTML

Teraz, gdy wiesz, jak wyeksportować plik Adobe XD do HTML, jestem pewien, że będziesz mógł łatwo udostępniać swoje obszary robocze programistom lub klientom. I nie musisz się martwić o żadne problemy ze zgodnością. Zainstaluj wtyczkę od razu i zacznij z łatwością eksportować swoje obszary robocze.

Następny w górę: Sprawdź poniższy artykuł, aby zobaczyć kilka bezpłatnych interaktywnych stron internetowych, na których możesz dowiedzieć się, jak kodować i pisać własną stronę HTML.