Hur man använder UI-kit i Adobe XD

För dem som är intresserade av webbdesign, UI-kit Adobe XD är ett bra sätt att kickstarta ett nytt designprojekt. Med dessa kit får du tillgång till några praktiska resurser som du kan ändra och använda för din webb- eller appdesign.

Om du är ny på programvaran och inte är säker på hur du använder UI-kit i Adobe XD, då har du kommit rätt. I den här artikeln kommer jag att visa dig hur du kan installera UI-kit i programvaran och sedan använda de medföljande resurserna för ditt projekt.

Hur man laddar ner UI-kit i Adobe XD

Låt oss först ta en titt på hur du kan ladda ner UI-kit i Adobe XD, direkt från programvaran. Följ bara dessa steg för att komma igång:

Steg 1: Klicka på hamburgermenyknappen i det övre vänstra hörnet av programvaran.

Steg 2: I menyn bläddrar du ned till alternativet Get UI Kits och klickar sedan på tre av de tillgängliga alternativen.

För den här artikeln kommer jag att välja Google Material UI-kit. Men beroende på ditt projekt kan du välja antingen Apple iOS eller Microsoft Windows kit. Det öppnar en officiell webbsida från vilken du kan ladda ner UI-kiten gratis.

Steg 3: Leta reda på Adobe XD UI kit på följande webbsida och ladda ner det till ditt system.

Steg 4: Öppna nu den nedladdade filen i Adobe XD och du kommer att hälsas med ett gäng ritytor som innehåller UI-resurser för respektive plattform.

Du kan hålla ned Ctrl-knappen och flytta rullningshjulet för att zooma in/ut för att se alla individuella ritytor.

Om du istället vill ladda ner Wireframes kan du klicka på alternativet Wireframes i menyn Get UI Kits.

Du kan också leta efter ytterligare UI-kit på Adobes webbplats genom att klicka på alternativet More UI Kits i menyn Get UI Kits.

Webbplatsen har några fantastiska alternativ att välja mellan, inklusive detta riktigt coola Movie Magic UI-kit som ser ut som en heads-up-skärm.

Nu när du vet hur man laddar ner UI-kit, låt oss ta en titt på hur du kan använda dem i dina projekt.

Hur man använder UI-kit i Adobe XD

För att använda UI-kit i ditt projekt följer du 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 elementet med Ctrl+C-genvägen.

Steg 3: Öppna sedan ett nytt Adobe XD-projekt från menyn.

Steg 4: Klistra in UI-elementet här med Ctrl+V-genvägen.

För den här artikeln kommer jag att använda Mobile Dark-elementet från Google Material UI-kit. Elementet innehåller guider som hjälper dig att placera fler skikten, men om du inte vill använda dem kan du enkelt ta bort dem genom att följa nästa steg.

Steg 5: För att ta bort guider, klicka på låsikonen i det övre vänstra hörnet och tryck sedan på ta bort. Du kan hoppa över det här steget om du vill använda guiderna för att placera fler objekt i elementet korrekt.

Steg 6: Gå nu tillbaka till UI-kitet för att välja ett annat element att lägga till på den här sidan. Återigen, klicka på rubriken på elementet och kopiera det med Ctrl+C-genvägen.

Jag kommer att skapa en grundläggande skål för den här artikeln som jag kommer att använda en av dialogrutorna för.

Steg 7: Klistra in det nya elementet på det föregående elementet och justera det sedan enligt guiderna.

Steg 8: Nu för att redigera varje element i toasten, dubbelklicka på textrutan och skriv sedan in texten du vill använda. Låt oss först ändra titeln på rostat bröd.

Ändra sedan innehållet i brödtexten genom att dubbelklicka på textrutan och skriva in vad du vill lägga till.

Du kan också ändra texten på knapparna på samma sätt. När du är klar med att redigera texten kan du ändra textens färg och opacitet. För att ändra opaciteten, flytta bara reglaget under Opacitetsalternativet i verktygsfältet till höger.

För att ändra färgen på texten, klicka på rektangeln bredvid alternativet Fyll och välj sedan en ny färg från färgväljaren.

Och det är inte bara texten som du kan redigera på det här sättet. Du kan också ändra färg och opacitet för nästan alla objekt i dialogrutan, vilket är bra om du vill ha ett unikt färgschema.

När du är nöjd med resultatet, fortsätt bara och spara din fil genom att klicka på alternativet Spara som i menyn eller genom att använda kortkommandot Skift+Ctrl+S.

Perfekta din design med UI-kit

Nu när du vet hur du laddar ner och använder UI-kit i Adobe XD är jag säker på att du kommer att börja ta fram fantastiska design på nolltid. Dessa UI-kit är definitivt ganska praktiska och hjälper dig att komma direkt till ditt projekt utan att behöva oroa dig för att designa varje UI-element.

Nästa upp: Har du slutfört ett projekt på Adobe XD och vet inte hur man exporterar det till HTML? Kolla in nästa artikel för en enkel steg-för-steg handledning.