För de som vill design Webbplatser och UI-kit i Adobe XD är ett bra sätt att starta ett projekt. design Nytt. Med dessa kit får du tillgång till användbara resurser som du kan modifiera och använda för din webbplats- eller appdesign.
Om du är nybörjare på programmet och inte är säker på hur du använder UI-kiten i Adobe XD, du har kommit till rätt ställe. I den här artikeln visar jag dig hur du installerar UI-kit i programmet och sedan använder de medföljande resurserna för ditt projekt.
Hur man laddar UI-kit i Adobe XD
Låt oss först titta på hur man laddar ner UI-kit i Adobe XD , direkt inifrån programmet. Följ bara dessa steg för att komma igång:
Steg 1: Klicka på hamburgermenyknappen i programmets övre vänstra hörn.
Steg 2: I menyn, skrolla ner till alternativet "Hämta UI-kit" och tryck sedan på ett av de tre tillgängliga alternativen.
För den här artikeln kommer jag att välja Googles Material UI-verktygslåda.
Beroende på ditt projekt kan du dock välja Apple iOS- eller Microsoft Windows-kit. Detta öppnar en officiell webbsida där du kan ladda ner UI-kiten gratis.
Steg 3: Lokalisera Adobe XD UI-kit finns tillgängligt på följande webbsida och kan laddas ner till ditt system.
Steg 4: Öppna nu den nedladdade filen i Adobe XD, så möts du av en uppsättning ritytor som innehåller UI-resurser för respektive plattform.
Du kan hålla ned Ctrl-tangenten och flytta rullhjulet för att zooma in/ut för att se alla enskilda ritytor.
Om du vill ladda ner Wireframes istället kan du klicka på alternativet Wireframes i menyn Hämta UI-kit.
Du kan också söka efter fler UI-kit på Adobes webbplats genom att klicka på alternativet Fler UI-kit i menyn Hämta UI-kit.
Webbplatsen har några bra alternativ att välja mellan, inklusive ett riktigt coolt Movie Magic UI-set som ser ut som en heads-up-display.
Nu när du vet hur man laddar ner UI-kit, låt oss titta på hur du använder dem i dina projekt.
Hur man använder UI-kit i Adobe XD
För att använda UI-kit i ditt projekt, följ bara dessa enkla steg:
Steg 1: Zooma in på det UI-element du vill använda i ditt projekt och klicka på dess titel för att välja det.
Steg 2: Kopiera nu objektet med kortkommandot Ctrl+C.
Steg 3: Öppna sedan ett nytt Adobe XD-projekt från menyn.
Steg 4: Klistra in UI-elementet här med kortkommandot Ctrl+V.
I den här artikeln kommer jag att använda Mobile Dark-elementet från Googles Material UI-verktygslåda. Elementet innehåller guider som hjälper dig att lägga till fler lager, men om du inte vill använda det kan du enkelt ta bort det genom att följa nästa steg.
Steg 5: För att ta bort stödlinjer, klicka på låsikonen i det övre vänstra hörnet och tryck sedan på Delete. Du kan hoppa över det här steget om du vill använda stödlinjer för att placera fler objekt mer exakt på elementet.
Steg 6: Gå nu tillbaka till gruppen Användargränssnitt för att välja ett annat element att lägga till på den här sidan. Klicka återigen på elementets titel och kopiera det med kortkommandot Ctrl+C.
Jag ska skapa en grundläggande karaktär för den här artikeln som jag kommer att använda en av dialogrutorna med.
Steg 7: Klistra in det nya elementet i det föregående elementet och justera det enligt stödlinjerna.
Steg 8: För att redigera varje element i toasten dubbelklickar du på textrutan och skriver sedan in den text du vill använda. Först ändrar vi toastens titel.
Ändra sedan textinnehållet genom att dubbelklicka på textrutan och skriva det du vill lägga till.
Du kan också ändra texten på knapparna på samma sätt.
När du är klar med redigeringen av din text kan du ändra dess färg och transparens. För att ändra dess opacitet, flytta helt enkelt reglaget under alternativet Opacitet i verktygsfältet till höger.
För att ändra textfärgen klickar du på rektangeln bredvid alternativet Fyllning och väljer sedan en ny färg från färgväljaren.
Och det är inte bara text du kan ändra på det här sättet. Du kan också ändra färg och transparens för nästan alla element i dialogrutan, vilket är bra om du använder ett unikt färgschema.
När du är nöjd med resultatet sparar du bara filen genom att klicka på alternativet "Spara som" i menyn eller använda genvägen Shift + Ctrl + S.
Gör din design framgångsrik med UI-kit.
Nu när du vet hur man laddar ner och använder UI-kit i Adobe XD är jag säker på att du kommer att börja skapa fantastiska designer på nolltid. Dessa UI-kit är definitivt användbara och hjälper dig att komma direkt till ditt projekt utan att behöva oroa dig för att designa varje enskilt UI-element.
