Jak korzystać z zestawów UI w Adobe XD

Dla osób zainteresowanych projektowaniem stron internetowych zestawy interfejsu użytkownika w programie Adobe XD to świetny sposób na rozpoczęcie nowego projektu. Dzięki tym zestawom uzyskujesz dostęp do przydatnych zasobów, które możesz modyfikować i wykorzystywać do projektowania witryny lub aplikacji.

Jeśli dopiero zaczynasz korzystać z oprogramowania i nie masz pewności, jak korzystać z zestawów interfejsu użytkownika w programie Adobe XD, to trafiłeś we właściwe miejsce. W tym artykule pokażę, jak zainstalować zestawy UI w oprogramowaniu, a następnie wykorzystać dołączone zasoby do swojego projektu.

Jak pobrać zestawy interfejsu użytkownika w Adobe XD

Najpierw przyjrzyjmy się, jak pobrać zestawy interfejsu użytkownika w programie Adobe XD bezpośrednio z oprogramowania. Aby rozpocząć, wykonaj następujące kroki:

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

Krok 2: W menu przewiń w dół do opcji Get UI Kits, a następnie kliknij jedną z trzech dostępnych opcji.

W tym artykule wybiorę zestaw interfejsu użytkownika Google Material. Jednak w zależności od projektu możesz wybrać zestaw Apple iOS lub Microsoft Windows. Spowoduje to otwarcie oficjalnej strony internetowej, z której można bezpłatnie pobrać zestawy interfejsu użytkownika.

Krok 3: Znajdź zestaw Adobe XD UI na poniższej stronie internetowej i pobierz go do swojego systemu.

Krok 4: Teraz otwórz pobrany plik w Adobe XD, a zostaniesz powitany kilkoma obszarami roboczymi zawierającymi zasoby interfejsu użytkownika dla odpowiedniej platformy.

Możesz przytrzymać przycisk Ctrl i przesunąć kółko przewijania, aby powiększyć/pomniejszyć, aby zobaczyć wszystkie poszczególne obszary robocze.

Jeśli zamiast tego chcesz pobrać szkielety, możesz kliknąć opcję Szkielety w menu Pobierz zestawy UI.

Możesz także poszukać dodatkowych zestawów UI w witrynie Adobe, klikając opcję Więcej zestawów UI w menu Pobierz zestawy UI.

Witryna ma kilka świetnych opcji do wyboru, w tym naprawdę fajny zestaw UI Movie Magic, który wygląda jak wyświetlacz heads-up.

Teraz, gdy już wiesz, jak pobierać zestawy UI, przyjrzyjmy się, jak możesz ich używać w swoich projektach.

Jak korzystać z zestawów UI w Adobe XD

Aby użyć zestawów UI w swoim projekcie, wykonaj następujące proste kroki:

Krok 1: Powiększ element interfejsu użytkownika, którego chcesz użyć w swoim projekcie, i kliknij jego tytuł, aby go wybrać.

Krok 2: Teraz skopiuj element za pomocą skrótu Ctrl+C.

Krok 3: Następnie otwórz nowy projekt Adobe XD z menu.

Krok 4: Tutaj wklej element interfejsu użytkownika za pomocą skrótu Ctrl + V.

W tym artykule użyję elementu Mobile Dark z zestawu Google Material UI. Element zawiera prowadnice ułatwiające umieszczanie większej liczby warstw , ale jeśli nie chcesz ich używać, możesz je łatwo usunąć, wykonując kolejny krok.

Krok 5: Aby usunąć prowadnice, kliknij ikonę kłódki w lewym górnym rogu, a następnie naciśnij Usuń. Możesz pominąć ten krok, jeśli chcesz użyć prowadnic do dokładnego umieszczenia większej liczby obiektów w elemencie.

Krok 6: Teraz wróć do zestawu interfejsu użytkownika, aby wybrać inny element do dodania do tej strony. Ponownie kliknij tytuł elementu i skopiuj go za pomocą skrótu Ctrl+C.

Będę tworzyć podstawowy toast za ten artykuł, dla którego użyję jednego z okien dialogowych.

Krok 7: Wklej nowy element na poprzednim elemencie, a następnie wyrównaj go zgodnie z instrukcjami.

Krok 8: Teraz, aby edytować każdy element tosty, kliknij dwukrotnie pole tekstowe, a następnie wprowadź tekst, którego chcesz użyć. Najpierw zmieńmy tytuł toastu.

Następnie zmień zawartość treści, klikając dwukrotnie pole tekstowe i wpisując to, co chcesz dodać.

Możesz również zmienić tekst przycisków w ten sam sposób. Po zakończeniu edycji tekstu możesz zmienić kolor i krycie tekstu. Aby zmienić krycie, po prostu przesuń suwak pod opcją Krycie na pasku narzędzi po prawej stronie.

Aby zmienić kolor tekstu, kliknij prostokąt obok opcji Wypełnij, a następnie wybierz nowy kolor z próbnika kolorów.

I to nie tylko tekst, który możesz edytować w ten sposób. Możesz także zmienić kolor i krycie prawie wszystkich elementów w oknie dialogowym, co jest świetne, jeśli chcesz uzyskać unikalny schemat kolorów.

Gdy będziesz zadowolony z wyniku, po prostu zapisz plik, klikając opcję Zapisz jako w menu lub używając skrótu Shift+Ctrl+S.

Udoskonal swój projekt za pomocą zestawów UI

Teraz, gdy już wiesz, jak pobierać i używać zestawów interfejsu użytkownika w programie Adobe XD, jestem pewien, że w mgnieniu oka zaczniesz tworzyć niesamowite projekty. Te zestawy interfejsu użytkownika są zdecydowanie bardzo przydatne i pomagają od razu przejść do projektu, nie martwiąc się o projektowanie poszczególnych elementów interfejsu użytkownika.

Dalej: Ukończyłeś projekt w Adobe XD i nie wiesz, jak wyeksportować go do HTML? Sprawdź następny artykuł, aby zapoznać się z prostym samouczkiem krok po kroku.