Adobe XD: Przegląd interfejsu XD i Skróty

CC 2020+

0:00Cześć!

0:00Witaj w kolejnej lekcji, w której zapraszam Cię na szybką, krótką wycieczkę

0:03po interfejsie Adobe XD i skrótach klawiaturowych.

0:05Zanim przystąpimy do właściwego projektowania interfejsu warto żebyś

0:08zapoznał się i zaprzyjaźnił z tym interfejsem.

0:11W związku z tym chcę, żeby nie miał on na

0:13razie przed Tobą tajemnic w kontekście co gdzie jest a także, przede wszystkim, chcę

0:16żebyś nauczył się skrótów klawiaturowych, których będziemy używać w całym kursie co

0:19prawda, ale zebrałem je też w jedno miejsce.

0:22gdybyś chciał je sobie np. przypomnieć.

0:24OK! Zaczynamy od skrótów i najważniejsze

0:27skróty dotyczą nawigacji po dokumencie i widoku.

0:29Jeśli już korzystałeś z aplikacji do

0:31tworzenia UI, no to wiesz doskonale, że na przykład z pomocą gładzika lub też Control

0:36Scroll'a w myszce będziemy mogli powiększać i zmniejszać widok.

0:39Tutaj znajdują się w XD skale widoku, które możemy zmienić w ten sposób albo po

0:44prostu wpisać jakiś konkretny numer skali, który chcemy przezoomować.

0:48Rzadko się z tego korzysta częściej korzystamy z narzędzia lupki czyli

0:51narzędzia "Zoom tool". Można je wybrać stąd albo lepiej zapamiętać skrót Z.

0:56Narzędziem "Zoom tool" standardowo, jak w

0:58każdej aplikacji możemy domyślnie klikając po prostu przybliżać o małą skalę.

1:02Następnie z altem, czyli Option na macu możemy oddalać.

1:06Jeżeli dociśniemy alt to oddalamy bez wciśniętego altu przybliżamy.

1:10Możemy też zaznaczyć coś tak jak się zaznacza folder w Windowsie, przeciągnąć

1:15upuścić a następnie powiększyć się do tego wybranego fragmentu ekranu, nawet możemy

1:20przybliżyć je tutaj bardzo znacznie. Teraz jeśli chcemy się oddalić możemy, po

1:23pierwsze wcisnąć Control albo Command 0. Command 0 spowoduje pokazanie całego,

1:28wszystkich dostępnych artboardów w całej przestrzeni z którą pracujemy.

1:32Czyli, jeśli miałbym więcej niż jeden artboard, zduplikuję sobie to parę razy.

1:36Command 0 spowoduje, że pokaże mi to

1:38cały ten, całą tą przestrzeń roboczą i wszystkie artboardy.

1:42Natomiast jeżeli chciałbym się zzoomować do konkretnego zaznaczonego elementu, tak jak w

1:45tym przypadku, to ma miejsce w przypadku artboardu home 5 to możemy wcisnąć Command 3 i w tym

1:51momencie zoomujemy się do tego aktywnego elementu, czyli teraz jesteśmy w skali 25.

1:57Ale to tylko dlatego, żeby po prostu cały

1:59Artboard Home 5 zmieścił się w obrębie ekranu po wciśnięciu Command 3.

2:03Jeżeli zaznaczę sobie mniejszy element, wcisnę Command 3 to zobacz - jesteśmy w skali 156.

2:08Chodzi o to, że cały ten zaznaczony element

2:10teraz mieści się w obrębie w jak największym obrębie ekranu.

2:14Command 2 z kolei spowoduje wyzoomowanie do 200%, Command 1 do 100%.

2:18Czyli zapamiętaj sobie te skróty od

2:20Command 0 do Command 3. Najczęściej będziemy korzystali z tego w taki sposób

2:25że odzoomowujemy się, następnie wybieramy narzędzie lupki i np.

2:28zoomujemy się do tego określonego elementu. Albo Command 0, odzoomowujemy się,

2:33następnie V, narzędzie selekcji, zaznaczamy coś

2:35na Artboardzie i Command 3 zoomujemy się do tego elementu tak, aby nad nim pracować.

2:41Command- i Command+ na

2:43klawiaturze pozwalają zmieniać skalę w dół i w górę.

2:46Standardowo. No i jeśli chodzi o narzędzia widoku myślę że

2:50to są te najważniejsze funkcje, poza tym że jeśli jesteśmy zzoomowani warto zapamiętać

2:55sobie, że możemy jeszcze wcisnąć spację. Spację przetrzymując to jest takie narzędzie,

2:59które nazywa się Spring Loaded czyli jeśli puścimy to z tego narzędzia wychodzimy,

3:04a możemy przejść do niego z pomocą, jakby korzystając z każdego innego

3:07narzędzia, czyli jeśli jestem nawet w Pen Tool'u mogę wcisnąć i przytrzymać spację. Teraz

3:12trzymając tę spację wciśniętą mogę kliknąć myszką i po prostu poruszać się

3:16po to, żeby przesuwać widok. W związku z tym w ten sposób korzystamy z tego narzędzia.

3:21Command 0, odzoomuje się znów, cofnę może

3:23parę razy tę operację zostaniemy przy jednym ArtBoardzie.

3:26Command 3 zoomujemy się do tego artboarda i powinieneś sobie to oczywiście przećwiczyć

3:30ale myślę, że wszystko jest w miarę jasne jeśli chodzi o tę nawigację.

3:33Kolejne skróty klawiaturowe dotyczą panelu warstw, jego pokazywanie i ukrywanie

3:37jest możliwe z pomocą Command Y, czyli Command Y pokazuje panel warstw.

3:41Ten panel warstw działa dosyć specyficznie,

3:43ponieważ znajdują się na nim w głównym listingu wszystkie Artboardy tylko i

3:46wyłącznie, czyli jeśli skopiuję sobie artboard zobacz, że mamy po prostu tutaj wylistowane Artboardy.

3:51Jak można dostać się do środka danego artboardu? Na dwa sposoby. Albo klikając na to małą

3:56ikonkę ArtBoardu dwukrotnie i w tym momencie jestem w środku w tym artboardzie.

4:00Albo ewentualnie klikając na dowolny element który znajduje się na artboardzie.

4:03Wtedy zostajemy do niego przeniesieni i wchodzimy do środka, czyli wtedy mamy tylko

4:07listing warstw i grup które znajdują się wewnątrz danego artboardu, żeby zobaczyć

4:12listing wszystkich artboardów musimy kliknąć strzałkę wstecz, w ten sposób. Czy coś może

4:16być poza artboardem w Adobe xD? Oczywiście tak. Jeśli stworzymy cokolwiek poza artboardem

4:21wpada to do specyficznej sekcji, która nazywa się PasteBoard.

4:26To jest po prostu wszystko co znajduje się w xD poza Artboardami.

4:30Jeśli nic nie ma no to ten PasteBoard również znika.

4:34Kolejny skrót dotyczy włączania paneli,

4:36pozostałych paneli, które tutaj są. Zamiast panelu warstw możemy tutaj pokazać ważny

4:41panel Assets i to jest skrót Command Shift Y, czyli zamiast

4:46Command Y po prostu dociskamy jeszcze Shift, czyli panel warstw z dociśniętym shiftem,

4:50Command Shift Y przenosi nas do panelu Assets. W tym panelu Assets będą

4:55lądować wszystkie nasze kolory, komponenty, style tekstu.

5:00Rzeczy, które chcemy sobie zachować na później. Ewentualnie będziemy mogli też

5:04podlinkować assety z innych dokumentów, czyli po prostu to jest taka biblioteka

5:08komponentów z których będziemy mogli korzystać.

5:10Ten panel potrafi nas też połączyć z bibliotekami "Open CC Libraries".

5:14Możemy to zrobić z tego poziomu albo z poziomu skrótu klawiaturowego Command

5:19Shift L. Command Shift L też otwiera biblioteki i to jest też dosyć istotny

5:24skrót. Ja sobie może usunę te dwa pozostałe ArtBoardy i przejdę do kolejnych skrótów.

5:30Jeśli chodzi o panel warstw to możemy zablokować daną warstwę, zaznaczę ją, przejdę do

5:35panelu warstw - Command Y - albo kliknięcie na tę ikonkę i zobacz, że mam zaznaczoną

5:40warstwę, która ma dwie ważna opcje. Mogę ją zablokować albo mogę ją ukryć.

5:45Blokowanie z pomocą Command L. Jeśli wcisnę Command L

5:49jest ona automatycznie zablokowana.

5:51Mała ikonka kłódki, mogę na nią kliknąć, aby odblokować. Albo kliknąć sobie

5:55na ikonkę kłódki, która znajduje się tutaj. Ewentualnie skrót Command L.

5:58Command przecinek pozwoli nam ukryć i odkryć warstwę. Ważna sprawa.

6:04Warstwy, które są ukryte w Adobe xD nie

6:07dają się zaznaczyć. Zobacz, czyli jestem na tym ArtBoardzie.

6:09I warstwy ukrytej nie mogę zaznaczyć.

6:11Jeśli zaś chodzi o warstwy, które są

6:15zamknięte kłódeczką mogę je zaznaczyć w ten sposób.

6:19Czyli, jeżeli chcesz żeby coś nie przeszkadzało ci w zaznaczenia różnych

6:23elementów po prostu na chwilę ukryj tę warstwę.

6:25Możesz ją też zablokować ale jeśli ją

6:27ukryjesz to skutecznie uchronisz się przed przypadkowym zaznaczeniem takiej warstwy.

6:31Dodatkowo skrót Control Command pozwoli na zaznaczenie takiej warstwy do eksportu.

6:36Domyślnie wszystkie grafiki, które importujemy są zaznaczone do eksportu. Chodzi

6:39tutaj o po prostu później wypuszczenie tego do plików PNG i JPG czy SVG.

6:44Nie uważam, że to jest ważny skrót. Będziemy mówić w jednej osobnej lekcji o

6:46tym jak przygotować zasoby dla Developmentu

6:48I wtedy ci o tym też poopowiadam.

6:50Ostatni z paneli, który tutaj jest to panel pluginów, które możemy wykorzystać i

6:55instalować do xD i o tym też będzie osobna lekcja.

6:58Ma on swój skrót, Command Shift P,

7:00ale myślę, że nie jest na tyle istotny żeby trzeba było tutaj o nim pamiętać.

7:05Kolejne skróty, ważne, to te które wspominałem już w poprzedniej lekcji, czyli

7:08Command cudzysłów dla włączenia kwadratowego Grida i Command Shift

7:12cudzysłów dla włączenia i wyłączenia layout grida.

7:15No i ostatnie skróty, które tu wylistowałem dotyczą narzędzi.

7:19Bezwzględnie trzeba zapamiętać skrót V to

7:22jest podstawowe narzędzie, czyli narzędzie selekcji.

7:24Z pomocą tego narzędzia zaznaczamy rozmaite

7:27elementy i jeśli korzystamy z innego narzędzia np.

7:29wciśniemy P, żeby przejść do PenTool'a i teraz chcemy zamiast PenTool'a coś zaznaczyć będziemy

7:34musieli wcisnąć V na klawiaturze i wtedy możemy sobie zaznaczać.

7:38Jeśli chodzi o pozostałe narzędzia zapamiętaj koniecznie L - skrót do narzędzia

7:43linii, skrót do elipsy, czyli E jak elipsa. R to rectangle. narzędzie polygon,

7:48nie mam tutaj do niego skrótu, to jest Y.

7:50Trochę rzadziej się z niego korzysta, dlatego nie napisałem. P oczywiście PenTool.

7:54T narzędzie tekstu - bardzo ważny skrót. No i A, które już znamy to Artboardy

7:58oraz Z - Zoom Tool.

8:00Jak widzisz tych narzędzi wcale nie ma tutaj

8:01dużo, więc wszystkie skróty bez problemu można sobie zapamiętać.

8:05Kolejno mamy też te zakładki, które znajdują

8:07się na górze. Gdybyś z jakiegoś powodu chciał wrócić do Home Screena możesz

8:11kliknąć w ikonkę domku i stąd przykładowo stworzyć jakiś nowy plik albo otworzyć

8:15ostatnio, plik, z którego ostatnio korzystałeś.

8:18Jeśli chodzi o zarządzanie ekranami Adobe XD - nie ma tutaj zakładek. Po prostu te

8:22pliki będą otwierać się wszystkie w nowych oknach, jako nowe instancje XD i myślę, że to

8:26jest też nawet całkiem spoko. Jeśli chodzi o te trzy zakładki, możemy

8:30przełączać się pomiędzy nimi klikając, albo używając skrótu Control Tab.

8:34Z pomocą Control Tab możemy przejść pomiędzy Design, w którym projektujemy.

8:38Prototype, w którym tworzymy interaktywne prototypy.

8:40Będziemy to robić w dalszych częściach

8:42kursu. Będziemy łączyć różne ekrany i dzięki trybowi prezentacji będziemy

8:47mogli podglądać to jak wyglądają interakcje między nimi np.

8:50animowane przejście z jednego ekranu do drugiego. Żeby przejść w tryb podglądu

8:54wystarczy wcisnąć Command Enter (command Return na Macu)

8:58wystarczy wcisnąć kombinację tych dwóch przycisków i przechodzimy do tego trybu

9:02podglądu, który Ci pokazywałem, który jest naprawdę fajny.

9:05Będziemy często z niego korzystać.

9:06Następna zakładka to share i w tej zakładce będziemy mogli wygenerować linki

9:10do naszego stworzonego dokumentu, po to żeby ktoś mógł go albo skomentować albo,

9:14żeby mógł wyciągnąć z niego zasoby jeśli jest np.

9:17front-end developerem. Będę ci pokazywał jeszcze dokładnie jak to działa trochę później.

9:21Następna rzecz to jest mała gwiazdka przy nazwie naszego pliku i strzałka. Gwiazdka

9:25jak się pewnie łatwo domyślić oznacza, że w tym pliku znajdują się zmiany, które nie

9:29były jeszcze zapisane. Żeby zapisać taki plik wystarczy wcisnąć Command S.

9:33Tak przy okazji szybki tip.

9:35Jeżeli chcesz zmienić nazwę dokumentu

9:36wystarczy dwa razy kliknąć i możesz w tym momencie tę nazwę edytować.

9:40Strzałka natomiast jest wyszarzona, na razie jest niedostępna. Strzałka jest aktywna dla

9:45tych dokumentów, które są zapisane w chmurze. W Adobe XD możesz zapisywać z

9:49pomocą file, a następnie SaveAs dokumenty na dwa sposoby.

9:53Możesz zapisywać je na swój komputer lokalnie,

9:56I tak w tym momencie mam zapisany ten dokument ale możesz też

10:00zapisać te dokumenty do chmury.

10:01Będę o tym mówił dużo więcej i wtedy

10:03odkryjemy też funkcjonalność strzałki, która pozwoli po prostu na przywrócenie

10:07wcześniejszych wersji tego dokumentu z chmury.

10:10Następnie mamy ikonkę udostępniania tego dokumentu.

10:13Możemy zaprosić inną osobę do takiego

10:15trybu multiplayer, czyli do wspólnej edycji do wspólnej pracy nad tym dokumentem. I

10:19robimy to właśnie z pomocą invite'a, a o tym jeszcze opowiem później.

10:23Następnie Device Preview, czyli możliwość

10:25podglądu bezpośrednio na urządzeniu podłączonym do komputera czy to po kabelku USB.

10:30Musimy tutaj korzystać ze specjalnej aplikacji Adobe XD zainstalowanej na telefonie i też Ci

10:35pokaże jak to później zrobić. Desktop Preview,

10:38już go omawiałem oraz skalowanie. Po prawej stronie znajduje się szpalta, która

10:42dopasowuje się do właściwości aktualnie zaznaczonego elementu.

10:46Jeśli zaznaczę ArtBoard mam tu opcję ArtBoardu,

10:48czyli przykładowo scrollowanie, czy mogę włączyć czy wyłączyć GRID.

10:52Jeśli zaznaczę jakiś obrazek to mam opcję dla obrazka czyli przykładowo np.

10:56zmiana jego przez przezroczystości. Jeśli bym zaznaczył tekst miałbym opcję tekstu.

11:00Standardowo ta sekcja dopasowuje się tutaj do tego co mamy zaznaczone na canvasie.

11:06Dwa ostatnie skróty, których teraz nie

11:08przywołuje ale będziemy z nich bardzo często korzystać to Command K, czyli

11:11tworzenie komponentu z elementu, który sobie zaznaczymy. A także tworzenie tzw.

11:16repeat grida, czyli Command R.

11:17Ale to już omówię w kolejnych lekcjach i

11:20będziemy poznawać te wszystkie kolejne skróty.

11:22Natomiast ich w gruncie rzeczy nie ma, aż

11:24tak wiele. Warto się nauczyć tych, które omówiliśmy teraz, znać je na pamięć i

11:28przećwiczyć to między lekcjami, do tego Cię zachęcam a my słyszymy się już za chwilę.