Jak používat sady ui v Adobe Adobe xd

Pro zájemce o webový design jsou sady uživatelského rozhraní v Adobe XD skvělým způsobem, jak začít nový designový projekt. S těmito soupravami získáte přístup k několika užitečným prostředkům, které můžete upravit a použít pro návrh svých webových stránek nebo aplikací.

Pokud jste novým softwarem a nejste si jisti, jak používat sady uživatelského rozhraní v aplikaci Adobe XD, pak jste na správném místě., Ukážu vám, jak můžete nainstalovat sady uživatelského rozhraní do softwaru a poté použít přiložené prostředky pro svůj projekt.

Také na

Jak dávkovat převádět fotografie pomocí aplikace Adobe Bridge

Jak stahovat sady uživatelského rozhraní v Adobe XD

Nejprve se podívejme na to, jak si můžete stáhnout sady UI v Adobe XD, přímo v softwaru. Začněte takto:

Krok 1: Klikněte na tlačítko nabídky hamburger v levém horním rohu softwaru.

Krok 2: V nabídce přejděte dolů na možnost Získat sady uživatelského rozhraní a potom klepněte na jednu ze tří dostupných možností.

Pro tento článek si vyberu sadu uživatelského rozhraní Google Material. V závislosti na projektu však můžete vybrat sady Apple iOS nebo Microsoft Windows. Tím se otevře oficiální webová stránka, ze které si můžete zdarma stáhnout soupravy uživatelského rozhraní.

Krok 3: Vyhledejte sadu uživatelského rozhraní Adobe XD na následující webové stránce a stáhněte si ji do svého systému.

Krok 4: Nyní otevřete stažený soubor v Adobe XD a budete uvítáni spoustou kreslicích desek obsahujících zdroje uživatelského rozhraní pro příslušnou platformu.

Podržením tlačítka Ctrl a posunutím kolečka pro přiblížení / oddálení zobrazíte všechny jednotlivé kreslicí plochy.

Pokud si přejete místo toho stáhnout drátové snímky, můžete kliknout na možnost Drátové snímky v nabídce Získat sady uživatelského rozhraní.

Další sady UI můžete také vyhledat na webových stránkách Adobe kliknutím na možnost Více sad UI v nabídce Získat sady UI.

Web nabízí několik skvělých možností, včetně této opravdu skvělé sady Movie Magic UI, která vypadá jako heads-up displej.

Nyní, když víte, jak stahovat sady uživatelského rozhraní, pojďme se podívat, jak je můžete použít ve svých projektech.

Jak používat sady UI v Adobe XD

Chcete-li v projektu použít sady uživatelského rozhraní, postupujte takto:

Krok 1: Přibližte prvek UI, který chcete použít v projektu, a kliknutím na jeho název jej vyberte.

Krok 2: Nyní zkopírujte prvek pomocí klávesové zkratky Ctrl + C.

Krok 3: Poté z nabídky otevřete nový projekt Adobe XD.

Krok 4: Zde vložte prvek uživatelského rozhraní pomocí klávesové zkratky Ctrl + V.

K tomuto článku budu používat prvek Mobile Dark ze sady uživatelského rozhraní Google Material. Prvek obsahuje vodítka, která vám pomohou umístit více vrstev, ale pokud je nechcete používat, můžete je snadno odstranit následujícím krokem.

Krok 5: Chcete-li odebrat vodítka, klikněte na ikonu zámku v levém horním rohu a poté stiskněte Odstranit. Tento krok můžete přeskočit, pokud chcete pomocí vodítek přesně umístit do prvku více objektů.

Krok 6: Nyní se vraťte zpět do sady uživatelského rozhraní a vyberte další prvek, který chcete přidat na tuto stránku. Znovu klikněte na název prvku a zkopírujte jej pomocí klávesové zkratky Ctrl + C.

Vytvořím základní přípitek pro tento článek, pro který použiji jeden z dialogů.

Krok 7: Vložte nový prvek na předchozí prvek a poté jej vyrovnejte podle vodítek.

Krok 8: Nyní upravte každý prvek v toastu, dvakrát klikněte na textové pole a potom zadejte text, který chcete použít. Nejprve změníme název toastu.

Dále změňte obsah těla dvojitým kliknutím na textové pole a zadáním, co chcete přidat.

Text tlačítek můžete také změnit stejným způsobem. Jakmile upravíte text, můžete změnit barvu a neprůhlednost textu. Chcete-li změnit neprůhlednost, jednoduše přesuňte posuvník pod možnost Průhlednost na panelu nástrojů vpravo.

Chcete-li změnit barvu textu, klikněte na obdélník vedle možnosti Výplň a poté vyberte novou barvu z nástroje pro výběr barvy.

A není to jen text, který můžete editovat tímto způsobem. Můžete také změnit barvu a neprůhlednost téměř všech položek v dialogovém okně, což je skvělé, pokud hledáte jedinečné barevné schéma.

Až budete s výsledkem spokojeni, jednoduše pokračujte a soubor uložte kliknutím na možnost Uložit jako v nabídce nebo pomocí klávesové zkratky Shift + Ctrl + S.

Také na

#grafický design

Kliknutím sem zobrazíte naši stránku s články o grafickém designu

Vylepšete svůj design pomocí souprav uživatelského rozhraní

Nyní, když víte, jak stahovat a používat sady UI v Adobe XD, jsem si jist, že začnete chrlit úžasné návrhy v žádném okamžiku. Tyto sady uživatelského rozhraní jsou určitě velmi užitečné a pomohou vám dostat se přímo do vašeho projektu, aniž byste se museli starat o navrhování jednotlivých prvků uživatelského rozhraní.

Další nahoru: Dokončili jste projekt na Adobe XD a nevíte, jak jej exportovat do HTML? Podívejte se na další článek, kde najdete jednoduchý návod krok za krokem.