Jak korzystać z zestawów UI w Adobe XD
Różne / / November 29, 2021
Dla zainteresowanych projektowaniem stron internetowych, zestawy UI w Cegła suszona na słońcu 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.
![Jak korzystać z zestawów interfejsu użytkownika w programie Adobe Xd Featured](/f/f51170c6fd33f6c4baf00d0f31b7e986.jpg)
Jeśli jesteś nowy w oprogramowaniu i nie masz pewności, jak korzystać z zestawów interfejsu użytkownika w Cegła suszona na słońcu 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 programie Adobe XD
Najpierw przyjrzyjmy się, jak pobrać zestawy interfejsu użytkownika w 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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 1](/f/f1bffbb779ef4fd40491b1e0f84990b2.jpg)
Krok 2: W menu przewiń w dół do opcji Pobierz zestawy interfejsu użytkownika, a następnie kliknij jedną z trzech dostępnych opcji.
![Użyj zestawów interfejsu użytkownika Adobe Xd 2](/f/369cca942baeb1e49d27d7df725582d7.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 3](/f/d410a96c2f89ce63c75c0016b7149637.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 4](/f/0a022b90f7e063aa7f14b881f0e5948b.jpg)
Możesz przytrzymać przycisk Ctrl i przesunąć kółko przewijania, aby powiększyć/pomniejszyć, aby zobaczyć wszystkie poszczególne obszary robocze.
![Użyj zestawów interfejsu użytkownika Adobe Xd 5](/f/afb3a79877063680bc53801a776f2fb7.jpg)
Jeśli zamiast tego chcesz pobrać szkielety, możesz kliknąć opcję Szkielety w menu Pobierz zestawy UI.
![Użyj zestawów interfejsu użytkownika Adobe Xd 8](/f/fa1f5f65ea9837da53ac54f9fc8a283f.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 9](/f/5def953e1423a258a0fed27106875072.jpg)
Witryna oferuje kilka świetnych opcji do wyboru, w tym naprawdę fajny zestaw UI Movie Magic, który wygląda jak wyświetlacz heads-up.
![Użyj zestawów interfejsu użytkownika Adobe Xd 11](/f/1ae757b9ced7e4961b570bcc131cdb3c.jpg)
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ć.
![Użyj zestawów interfejsu użytkownika Adobe Xd 12](/f/1dbb8b41af84750bc4defa03ad2682df.jpg)
Krok 2: Teraz skopiuj element za pomocą skrótu Ctrl+C.
![Użyj zestawów interfejsu użytkownika Adobe Xd 13](/f/7e8ddf2f2bec27ba8a1365dfef37df3a.jpg)
Krok 3: Następnie otwórz nowy projekt Adobe XD z menu.
![Użyj zestawów interfejsu użytkownika Adobe Xd 14](/f/048450fc117d9b77769cff68666f9957.jpg)
Krok 4: Tutaj wklej element interfejsu użytkownika za pomocą skrótu Ctrl+V.
![Użyj zestawów interfejsu użytkownika Adobe Xd 15](/f/0cb6e0263ce854b648c14a6c3ca98b57.jpg)
W tym artykule użyję elementu Mobile Dark z zestawu Google Material UI. Element zawiera prowadnice, które pomogą Ci umieścić więcej warstwy, ale jeśli nie chcesz ich używać, możesz je łatwo usunąć, wykonując następny 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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 16](/f/31660de2ec71ef5dd678d1711002b66d.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 17](/f/e66fe262da12751c28cd236c2ccdc59a.jpg)
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 prowadnicami.
![Użyj zestawów interfejsu użytkownika Adobe Xd 18](/f/d49d63d1f3ee987e479de42f75972ff4.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 19](/f/76f303a45c5aea4a08046ca04e7b1463.jpg)
Następnie zmień zawartość treści, klikając dwukrotnie pole tekstowe i wpisując to, co chcesz dodać.
![Użyj zestawów interfejsu użytkownika Adobe Xd 20](/f/6ca789b52cb0b59b94795f9e6e58e3a5.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 21](/f/8fe2f9d2c6b5b88f2c34f9ceb0cde2bb.jpg)
Aby zmienić kolor tekstu, kliknij prostokąt obok opcji Wypełnij, a następnie wybierz nowy kolor z próbnika kolorów.
![Użyj zestawów interfejsu użytkownika Adobe Xd 23](/f/b502a75f404baa39d2d8892e2d4d8157.jpg)
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.
![Użyj zestawów interfejsu użytkownika Adobe Xd 24](/f/991134a4b93ef0ef5864ddad3a7fd40e.jpg)
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 w górę: 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.