Adobe XD: Layout i Square Grid

CC 2020+

0:00Cześć! Witaj w kolejnej lekcji

0:01a w niej zaznaczymy sobie artboard i omówimy kilka praktycznych zastosowań siatki,

0:05która znajduje się w sekcji "Grid" i dla każdego artboardu można ustawić sobie inny taki grid.

0:10Czyli jeśli ja zduplikuję teraz artboard, mogę np.

0:14tutaj przełączyć się na layout i zrobić layout 10-kolumnowy.

0:17Tymczasem, gdy wrócę do pierwszego artboard'u będę miał, jak widzisz,

0:23layout 12-kolumnowy. Mogę sobie to pozmieniać i ten layout jest edytowany osobno.

0:28To, co nie jest edytowane osobno, to to, co nam się aktualnie wyświetla,

0:32czy wyświetla nam się layout czy square, czyli te małe kwadraciki, których rozmiar możemy też dostosować.

0:38Skróty klawiaturowe, które są tu niezwykle ważne to: Command + ".

0:42Command cudzysłów ukrywa nam i pokazuje square, na zmianę, a jeśli dociśniemy sobie Shift,

0:49czyli Command + Shift + ", będziemy mogli ukryć lub odkryć grid.

0:56Będziemy mogli ukryć lub odkryć layout grid.

0:59No i teraz tak, wykasuje sobie ten artboard,

1:02zzoomujmy się może tutaj. Zobaczmy jak wyglądają ustawienia poszczególnych opcji.

1:07Zacznijmy od square, bo jest to bardzo proste,

1:09możemy tutaj ustawić wyłącznie rozmiar tych kwadracików.

1:13Czyli square size możemy np.

1:15zmienić, nie wiem, na 400, co nie jest pewnie najlepszym pomysłem

1:19ale zawsze możemy wrócić do domyślnych wartości wybierając polecenie "Use default" albo

1:25możemy zmienić domyślne wartości wybierając polecenie "Make default".

1:29I teraz zawsze będziemy mieli 8-punktowy grid,

1:33który zresztą jest domyślny w Adobe XD i jest grid'em,

1:36który ja zdecydowanie preferuję, jeśli chodzi o projektowanie interfejsów.

1:41Natomiast jeśli projektuję interfejsy w Adobe XD, jednak zmieniam sobie ten grid

1:45na 10-punktowy i wybieram opcję "Make default" dla 10-punktowego.

1:49Dlaczego tak robię?

1:51Podrzucam w źródłach jeszcze informację o tym, czemu 8-punktowy grid akurat jest całkiem niezły,

1:56ale w przypadku Adobe XD, przynajmniej na ten moment,

1:59nie ma możliwości zmiany tak zwanego nudge'owania. Nudge'owanie to jest coś,

2:02co każdy designer uwielbia. Już pokazuje na czym ono polega.

2:06Jeśli narysujemy sobie coś, i przy okazji zobacz, że w tym momencie, co prawda,

2:11możemy oczywiście narysować coś poza grid'em,

2:14ale w momencie gdy coś rysujemy, to to automatycznie przylega nam do tego grid'a.

2:17Czyli snap'uje nam do tego grid'a, przykleja się,

2:21i co niezwykle ciekawe,

2:22na ten moment w Adobe XD nie ma możliwości tego wyłączyć.

2:25To powinno być w menu "View" i powinno się nazywać "Snaping" i powinno dać się to wyłączyć.

2:28Być może w Twojej wersji już to jest, w mojej tego nie ma, ale od czego masz kurs.

2:32Oczywiście kurs masz od tego, żeby pomógł Ci właśnie takie niuanse rozwikłać

2:37i rozwiązaniem tego problemu snap'owania, że nie mogę np.

2:40puścić gdzieś blisko tego piksela,

2:42bo automatycznie mi przylega co 10, jest wciśnięcie i przytrzymanie na klawiaturze Command'a.

2:47Jeśli przytrzymam Command, no to wtedy na PC już wiesz dobrze, co.

2:52No to wtedy pozbędę się na chwilę tego przyciągania i mogę bez problemu sobie o dowolną ilość pikseli przesunąć coś.

3:00Zwłaszcza gdy tworzę jakieś ikony.

3:02Korzystam z narzędzi wektorowych.

3:03Jest to niezwykle przydatne.

3:05A szczerze mówiąc już widziałem ludzi, którzy sobie właśnie z tego powodu,

3:09że się nie da tego gdzieś wyłączyć, ustawiali ten grid na 1-pikselowy.

3:14Aczkolwiek nie polecam, warto zrobić sobie 10.

3:17I właśnie z pomocą Command'a rozwiązywać ten problem.

3:19Teraz czym jest to nudge'owanie, no bo przecież obiecałem, że je wytłumaczę.

3:23Jeśli wciśniemy na klawiaturze teraz strzałka w lewo, w prawo, w górę czy w dół,

3:26to będziemy poruszać taki zaznaczony obiekt o jeden piksel w dowolną stronę.

3:31Natomiast jeśli przytrzymam Shift na klawiaturze,

3:34będę poruszał tym kształtem o 10 pikseli.

3:36I właśnie dlatego, dla tego gridu, wybraliśmy ustawienie 10 do artboardu,

3:41ponieważ gdybyśmy mieli 8, to zawsze byśmy wypadli z tego mikrogrid'u.

3:46O ile nie używam raczej makrogrid'u, czyli tego layout'u, który zaraz Ci pokażę

3:51o tyle mikrogrid w przypadku 8- czy 10-punktowej siatki jest dla mnie świętością.

3:56Uwielbiam go i bardzo często na nim pracuję.

3:58Dlatego wydaje mi się że warto o tym pamiętać

4:01i zmienić sobie to nudge'owanie.

4:03Jeśli da się zmienić nudge'owanie w Adobe XD na 8,

4:05przejdę od razu na siatkę 8-punktową.

4:08Na razie zostawiam sobie 10 i teraz chciałbym pokazać Ci jeszcze to drugie ustawienie,

4:13czyli ustawienie layout.

4:15Jeśli zaznaczymy jeszcze raz artboard, mogę przenieść się ze square do layout.

4:19Tutaj jest trochę więcej opcji.

4:21Generalnie dotyczy to ilości kolumn które możemy tutaj ustawić np.10 kolumn.

4:26"Gutter" to będzie odstęp pomiędzy tymi kolumnami.

4:29Czyli zmieniając gutter automatycznie dostosujemy sobie rozmiar takiej kolumny.

4:33De facto, gdybyśmy chcieli np.

4:35ustawić rozmiar ręcznie na 70 gutter oczywiście wskoczy nam automatycznie sam.

4:39I ostatnie ustawienie, jakie tutaj jest dotyczy marginesów,

4:43czyli tego, gdzie się w ogóle zaczyna ten, 10-kolumnowy w tym momencie, nasz layout.

4:48Możemy to ustawić tak że marginesy po lewej i po prawej stronie są połączone, czyli np.

4:54chcemy je mieć, powiedzmy, 64 piksele od lewej i prawej strony.

4:59Aczkolwiek, zobacz, że jak wpisałem sobie 64, to okazało się,

4:59że z moich poprzednich ustawień kolumny wyszło, że jak chcę mieć taki odstęp i taką szerokość,

5:06no to nie mogę mieć 64 z każdej strony, bo po lewej musi być 73.

5:11No i tu właśnie przełączyło się to w drugą opcję.

5:14My się przełączamy znowu w tę pierwszą, to znowu się zmieniają wszystkie rozmiary.

5:17Znowu chcę mieć, nie wiem, np. 80,

5:19znowu się nie udało.

5:20No i może okazać się, że naprawdę sporo się napracujesz nad dostosowaniem tego układu kolumn

5:24a nie do końca wszystko będzie grało z każdej strony.

5:28W związku z tym moja rekomendacja jest taka, żeby tak naprawdę, jakoś szczególnie

5:33tym układem się nie przejmować.

5:36Ja zostawię sobie go na 12 kolumn,

5:38dla desktopu zwykle robię 12,

5:38dla tabletu około 10 albo 8 i dla mobile'a 4.

5:44Natomiast jeśli chodzi o pozostałe ustawienia zostawię je tak jak są.

5:49I przełączę się (Command + ") na square grid.

5:51Tak jak powiedziałem, ja jestem raczej fanem tego mikro gridu aniżeli makro gridu.

5:56Jeśli będziesz korzystał natomiast z takich framework'ów jak np.

6:00Bootstrap czy innych, które mają jakąś określoną ilość

6:02czy szerokość kolumn zdefiniowaną w CSS'ie.

6:06Warto pamiętać, że ten layout grid tutaj też się znajduje,

6:08bo wtedy będzie on mocno przydatny.

6:11Jeśli zaś chodzi o jedną dodatkową rzecz którą chciałbym Ci pokazać to:

6:15Adobe XD ma coś takiego również, poza grid'em, jak, w sekcji "View" możemy to sprawdzić,

6:21"Guides", czyli linie podziałki.

6:22Problem w tym, że tych linii podziałki zupełnie tutaj nie widać

6:25i skąd byśmy mieli je wziąć.

6:27Myślę, że to poprawią, bo to jest taki bug w użyteczności tego.

6:31Ale generalnie jest to ta opcja dostępna dopiero wtedy,

6:35jak wciśniesz Command + ;

6:37i jak wciśniesz Command + ; to zobacz, że zaczyna nam się tutaj pojawiać po lewej stronie

6:41gdy najedziemy od lewej od artboard'u albo od góry

6:43specyficzny kursor, który pozwala wyciągnąć guides'y.

6:47Ale gdybyśmy wcisnęli teraz Command + ;

6:49to nie widać żadnej zmiany, więc upewniam się, że ta opcja jest włączona,

6:55przeciągam sobie jakiś guide i, jak widzisz,

6:57mogę zarówno wyciągnąć je z lewej jak i z prawej strony

7:00i teraz sobie ustawić te linie podziałki.

7:03Moim zdaniem są całkiem przydatne,

7:04w związku z tym warto będzie z tej opcji akurat korzystać.

7:08Być może zamiast tego layout grid'a.

7:10A jeśli przejdziemy do "View",

7:11zauważ, że teraz możemy nawet te guides'y sobie skopiować

7:15i wkleić je na osobnym artboardzie,

7:17co jest bardzo spoko.

7:19Możemy też je wyczyścić albo oczywiście używać tego samego skrótu.

7:23Może teraz wyłączę na chwilę grida.

7:25I jeśli teraz jeśli korzystamy z Command + ;

7:27to je ukrywamy i odkrywamy, jednocześnie włączając i wyłączając tę funkcję.

7:32Co jeszcze ciekawsze w bieżącej wersji XD,

7:34stworzony w ten sposób guide

7:35nie da się edytować, czyli nie mogę już dla niego złapać.

7:37Myślę, że to zostanie jeszcze szybciej poprawione,

7:39ale na chwilę obecną to, co mogę zrobić to po prostu sobie je wyczyścić.

7:44Czyli "Clear guides".

7:44Natomiast przy tworzeniu mam rzeczywiście możliwość

7:46ustawienia tego na jakimś w miarę konkretnym pikselu.

7:51Natomiast, no jak już to zrobię,

7:52niestety takiej opcji nie mam.

7:54Gdybym chciał zrezygnować jednak z tworzenia takiego guida,

7:57mogę po prostu przejść na samą górę i wtedy pokazuje się taka ikonka z koszem.

8:00Myślę, że to zaraz będzie działać też na tych, które są już dodane,

8:03żeby można było wyciągnąć je, po prostu, do lewej strony albo do góry i w ten sposób zniszczyć.

8:08Tymczasem w tej lekcji to wszystko,

8:11wszystko o ustawieniach widoku i ustawieniach artboardu na razie.

8:13Mamy to dopasowane.

8:15A ja zapraszam Cię do lekcji kolejnej.