Hur man använder ui-kit i Adobe xd

För de som är intresserade av webbdesign är UI-kit i Adobe XD ett utmärkt sätt att starta 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 webbplats eller app-design.

Om du är ny inom programvaran och inte är säker på hur du använder UI-kit i Adobe XD, har du kommit till rätt plats., Jag ska visa dig hur du kan installera UI-kit i programvaran och sedan använda de medföljande resurserna för ditt projekt.

Också på

Så här konverterar du bilder med Adobe Bridge

Hur man laddar ner UI-kit i Adobe XD

Låt oss först titta 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 ner till alternativet Get UI Kits och klickar sedan på antingen tre av de tillgängliga alternativen.

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

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

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

Du kan hålla Ctrl-knappen och flytta rullehjulet för att zooma in / ut för att se alla enskilda tavlor.

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

Du kan också leta efter ytterligare UI-kit på Adobes webbplats genom att klicka på alternativet Fler UI-kit i menyn Hämta UI-kit.

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 du 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ölj dessa enkla steg för att använda UI-satser i ditt projekt:

Steg 1: Zooma in på UI-elementet 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 med genvägen Ctrl + V.

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 lager, 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å radera. Du kan hoppa över det här steget om du vill använda guiderna för att placera fler objekt i elementet exakt.

Steg 6: Gå tillbaka till UI-paketet för att välja ett annat element som du vill lägga till på den här sidan. Klicka ännu en gång på elementets titel och kopiera det med genvägen Ctrl + C.

Jag ska skapa en grundläggande rostat bröd för den här artikeln för vilken jag använder en av dialogrutorna.

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 ange sedan texten du vill använda. Låt oss först ändra toastens titel.

Därefter ändrar du innehållet i kroppen 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 skjutreglaget under alternativet Opacity i verktygsfältet till höger.

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

Och det är inte bara texten du kan redigera på detta sätt. 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 går du bara att spara filen genom att klicka på alternativet Spara som i menyn eller med hjälp av genvägen Shift + Ctrl + S.

Också på

#grafisk design

Klicka här för att se vår artikel om grafisk design

Perfekt din design med användargränssnitt

Nu när du vet hur du laddar ner och använder UI-satser i Adobe XD är jag säker på att du börjar kasta ut fantastiska mönster på nolltid. Dessa UI-kit är definitivt ganska praktiska och hjälper dig att komma direkt till ditt projekt utan att oroa dig för att utforma varje UI-element.

Nästa upp: Färdigade 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.