Introductie

Componenten in XD

Introductie

• CSS heeft als design-taal alle mogelijke opties bepaald wat je op het web kan behalen van design.
• Adobe XD werd gebouwd op de huidige mogelijkheden van CSS.

Ergens logisch: Je wilt niet iets designen, die niet te bouwen valt.

Introductie

• Veel principes uit HTML en CSS kan je terugvinden in Adobe XD
• Wanneer je de principes van HTML en CSS verstaat, kan je veel sneller designen in Adobe XD

Groeperen

Componenten in XD

Hoe zou de HTML er uitzien van het volgende component?

Groeperen

Wat is nu eigenlijk het voordeel van het parent-element?

Groeperen

De voordelen van groeperen (nesten in HTML)

• Box-model: padding, margin, border, achtergrond
• Flexbox: order, spacing, alignering

Dezelfde opties heb je ook in Adobe XD!

Groeperen

Groeperen

Tip: Groepeer 2 lagen

Selecteer 2 lagen

CTRL + G

CMD + G

Tip: Ongroeperen

Selecteer de groep

Shift + CTRL + G

Shift + CMD + G

Tip: Layer binnenin een group selecteren

Dubbel klikken op een group

Nu kan je wel je layer selecteren

Control + klik

Command + klik

Tip: Layer binnenin groups selecteren

Group padding & background

Componenten in XD

Group padding & background

XD gebruikt een combinatie van background en padding om elementen van witruimte te voorzien.

Group padding & background

Als de group padding gebruikt

+

Als de onderste layer binnen die group een shape is die groot genoeg is

= Zal die shape als achtergrond gebruikt worden van die group

Group padding & background

Tip: Pas de padding visueel aan

Selecteer de group of een layer in die group

Hou de letter "S" (van spacing) ingedrukt terwijl je met je muis de padding visueel versleept.

Group padding & background

Wanneer je de background wilt aanpassen van een group, moet je dit doen op de shape die als achtergrond gebruikt wordt binnen die group

Gebruik niet de fill op de group-layer

Group padding & background

Group border

Wanneer je een border wilt toevoegen aan een group, moet je dit doen op de shape die als achtergrond gebruikt wordt binnen die group.

Gebruik niet de border op de group-layer, want dan geef je ieder element binnen die group een border.

Group border

Kleuren in Adobe XD

Componenten in XD

Kleuren in XD

XD weet dat je kleuren gaat hergebruiken, als je dat ten minste eerst laat weten aan XD.

Later ga je hier heel veel tijd mee uitsparen.

Kleuren in XD

Kleuren in XD

Typografie in Adobe XD

Componenten in XD

Typografie in Adobe XD

XD weet dat je bepaalde typografiesche stijlen gaat hergebruiken in XD, als je dat ten minste eerst laat weten aan XD.

Later ga je hier heel veel tijd mee uitsparen.

Typografie in Adobe XD

Typografie in Adobe XD

Stacken in een group

Componenten in XD

Stacken in een group

Stacken in een group

In CSS plaats je "display: flex;" op de parent van de elementen dat je naast elkaar wilt plaatsen.

In Adobe XD gebeurt dit ook op de parent (lees: group) en noemt dit "stacking".

Stacken in een group

Stacken in een group

Een eerste voordeel van het gebruik van stacking is dat de layers binnen je group meteen uitgelijnd zijn.

Stacken in een group

Een 2de voordeel is dat je veel sneller elementen van volgorde kan veranderen.

Stacken in een group

Er staat ook geen limiet op hoeveel elementen je wilt stacken (stapelen).

Stacken in een group

Een laatste voordeel is ook dat layers kunnen groeien in hoogte of breedte.

Tip: Pas een margin of padding aan

S + slepen over de witruimte

Componenten

Componenten in XD

Componenten

Componenten in Adobe XD zijn eigenlijk groups dat je opnieuw wilt gebruiken

Componenten

Component kan je copy / pasten, en ze zullen nadien nog altijd aan elkaar gelinkt zijn!

Componenten

Hoe gaat dit nu in zijn werk?

De eerst component zal de main component worden. 

Alle componenten die gekopieerd zijn, zullen instances worden die luisteren naar de veranderingen op de main component

Componenten

Alle aanpassingen dat je maakt op de main component, zal ook doorgevoerd worden op alle instances indien niet overschreven.

Bij instances kan je bepaalde aspecten overschrijven zonder dat deze een invloed hebben op de master component

Componenten

Componenten

Het is een good practice om main componenten niet op een artboard bij te houden maar ernaast.

Zo behoud je een overzicht waar je main componenten staan.

Componenten

Omdat componenten een essentieel onderdeel zijn van hoe je XD kan gebruiken hebben ze dit ook voorzien in de interface.

Componenten

Tip: Maak een component

Selecteer een group

Control + K

CMD + K

Componenten

Wanneer je externe UI kits download zal je vaak een hele reeks componenten aantreffen die je simpelweg kan slepen op je artboards hieruit.

Componenten

XD helpt je visueel te kunnen onderscheiden welk component de main is, en welke instance reeds overschreven is.

Interacties

Componenten in XD

Interacties

Eerst heb je dus een group van layers gemaakt die bijvoorbeeld heel goed in elkaar zit.

Daarna heb je gezegd dat dit herbruikbare componenten mogen zijn binnen Adobe XD.

En nu gaan we daar nog een stapje verder mee!

Interacties

In CSS kunnen bepaalde elementen interactie ondersteunen door bijvoorbeeld aanklikbaar te zijn.

In XD gebeurt dit aan de hand van states!

Interacties

Enkel componenten hebben states, dus zorg er best voor dat je de states toevoegt aan de main component!

States worden gedefinieerd in 3 stappen

Interacties

1. Voeg mogelijke states toe aan een component

Interacties

2. Voorzie een ander uitzicht voor iedere state.

Interacties

3. Bepaal de verschillende interacties

Interacties

Laat je inspireren door de component States kit:

https://www.adobe.com/products/xd/features/ui-kits.html

Bibliotheken

Componenten in XD

Bibliotheken

Hoe werken bibliotheken nu eigenlijk in Adobe XD?

Favoriete-website design systeem.xd

Libraries

• Kleuren
• Typografie
• Componenten

Bibliotheken

Hoe werken bibliotheken nu eigenlijk in Adobe XD?

Favoriete-website design systeem.xd

Libraries

• Kleuren
• Typografie
• Componenten

Bibliotheken