Adobe XD

Question 1

Do czego służy ArtBoard?

Answer 1

Ma nazwę. Łączy grafiki w całość.

Question 2

Jak złapać cały ArtBoard?

Answer 2

Można kliknąć na jego nazwę

Question 3

Jak używać podstawowych kształtów?

Answer 3

Prostokąt i elipsa

Question 4

Jak używać Pen tool?

Answer 4

Praca z piórem, używanie skrótów klawiszowych + ALT

Question 5

Jakie mamy opcje do pracy z tekstem?

Answer 5

Point text lub Text area

Question 6

Jak zaznaczać obiekty?

Answer 6

Jak zaznaczyć prostokąt vs okrąg. Dodatkowe możliwośc zaokrąglania obiektów. Z ALT’em można zakrąglić jeden bok.

Question 7

Jak grupować i zogrupowywać obiekty?

Answer 7

Z pomocą menu kontekstowego - Group/Ungroup

Question 8

Jak użyć operacji bool’owskich?

Answer 8

Zaznacz kilka elementów - union/subtract etc.

Question 9

To co znaczy, że operacje boolowskei są żywe?

Answer 9

Live

Question 10

Jak wkleić zdjęcie do Artboard’y?

Answer 10

Ctrl+V - wyszarzone elementy nie będą widoczne

Question 11

Jak skopiować kształt w czasie przeciągnia?

Answer 11

Alt + Left-mouse drag

Question 12

Jak użyć maskowania?

Answer 12

Prawy przycisk - mask with shape

Question 13

Jak korzystać z Asset’ów?

Answer 13

Dodawania kolorów, Apply as Fill/Background, zmiana koloru od razu zmienia wszystkie jego wykorzystania

Question 14

Jak powtarzać content na stronie?

Answer 14

Można skorzystać z Repeating Grid. Warto w tym celu pogrupować elementy na stronie. Ponadto możemy zmienić content elementów - możemy przeciągnać tekst i obrazki z plików. Adobe XD samo podmieni resztę. Tekst w plikach może być w wielu linijkach. Każda kolejna linia - Adobe XD będzie zakładać, że powinna być w kolejnym elemencie.

Question 15

Jak stworzyć powtarzający się content, który można scrollować?

Answer 15

Musimy określić nasz artboard jako scrollable. Zaznaczamy cały Artboard i określamy Scrolling - Vertical

Question 16

Jak można zablokować element podczas scrollowania?

Answer 16

Zaznaczenie checkbox’a Fix position when scrolling

Question 17

Jak ustawić ArtBoard jako pierwszy w danym prototype?

Answer 17

Klikamy na prototyp/artboard i klikamy szary prostokąt

Question 18

Jak dodać animację/przejście między ekranami w aplikacji?

Answer 18

Możemy połączyć ArtBoard’y i ustawić aplikację.

Question 19

Jak dodać przejście między Artboard’ami?

Answer 19

Dodanie niebieskiej linii między art-boardami. Następnie wybieramy rodzaj akcji i rodzaj animacji.

Question 20

Jak uruchomić aplikację w trybie podglądu i obejrzeć swoje artboard’y?

Answer 20

Kliknięcie odpowiedniej ikony w górnym prawym rogu ekranu pozwala na wyświetlenie prototypu na ekranie komputera lub urządzenia mobilnego.

Question 21

Do czego służy tryb Overlay w czasie linkowania ekranów?

Answer 21

Pozwala na stworzenie okienko dialogowego, które znajduje się nad innym artboard’em, który pozostaje wyszarzony.

Question 22

Jak wykonać przycisk powroty/back?

Answer 22

W czasie definiowania akcji możemy wybrać “Transition to previous artboard”.

Question 23

Jak wykonać prototyp ze scrollowaniem horyzontalnym?

Answer 23

1. Najpierw przygotowujemy artboard z repeating grid
2. Następnie kopiujemy arboard
3. Linkujemy repeating grid do kopii artboarda. Zmieniamy trigger na drag.
4. Na drugim artboarddzie przesuwamy repeating grid.
5. Wykorzystujemy morphing, który potrafi łatwo modyfikować różnego rodzaju właściwości.

Question 24

Jak dodać do prototypu klikalny checkbox?

Answer 24

1. Trzeba skopiować cały artboard
2. Połączyć akcję kliknięcia na checkbox ze skopiowanym artboardem.
3. Pozostawiamy akcję na auto-animate.

Question 25

W jaki sposób można share’ować prototyp?

Answer 25

1. Można share’owac prywatnie

2. Można share’owac publicznie

Question 26

Co to oznacza “Publish design spec”?

Answer 26

Opcja jest przydatna kiedy chcemy share’ować plik z developerami.
W ten sposób wyeksportowany prototyp zawiera dodatkowe informacje na temat ekranów. Czcionki i kolory.
Możemy również łatwo pobierać asset’y jako pliki SVG.

Question 27

Co musimy zrobić, aby dany element dało się łatwo wyeksprotować w widoku Design Spec?

Answer 27

Trzeba go kliknąć i zaznaczyć “Mark for Batch export”.