Cómo usar los kits de UI en Adobe XD

Cómo usar los kits de UI en Adobe XD
5 (100%) 1 voto

Para aquellos interesados ‚Äč‚Äčen el dise√Īo web, los kits de IU en Adobe XD son una excelente manera de impulsar un nuevo proyecto de dise√Īo. Con estos kits, obtiene acceso a algunos recursos √ļtiles que puede modificar y usar para el dise√Īo de su sitio web o aplicaci√≥n.

Cómo usar los kits de Ui en Adobe Xd Destacados

Si eres nuevo en el software y no estás seguro de cómo usar los kits de UI en Adobe XD, has venido al lugar correcto. En este artículo, te mostraré cómo puedes instalar los kits de IU en el software y luego usar los recursos incluidos para tu proyecto.

Cómo descargar kits de interfaz de usuario en Adobe XD

Primero, veamos cómo puede descargar los kits de UI en Adobe XD, directamente desde el software. Simplemente siga estos pasos para comenzar:

Paso 1
:
Haga clic en el bot√≥n de men√ļ de hamburguesas en la esquina superior izquierda del software.

Utilice los kits de Ui Adobe Xd 1

Paso 2
:
En el men√ļ, despl√°cese hacia abajo hasta la opci√≥n Obtener kits de IU y luego haga clic en cualquiera de las tres opciones disponibles.

Utilice los kits de Ui Adobe Xd 2

Para este artículo, elegiré el kit de la IU de Google Material. Sin embargo, dependiendo de su proyecto puede seleccionar Apple
iOS o el Microsoft Windows
kits Esto abrir√° una p√°gina web oficial desde la que puede descargar los kits de IU de forma gratuita.

Paso 3
:
Localice el kit Adobe UD UI en la siguiente p√°gina web y desc√°rguelo en su sistema.

Utilice los kits de Ui Adobe Xd 3

Paso 4
:
Ahora abra el archivo descargado en Adobe XD y será recibido con un montón de mesas de trabajo que contienen recursos de UI para la plataforma correspondiente.

Recomendamos:
Apple podría usar módems 5G internos en algunos de sus productos a partir de 2021

Utilice los kits de Ui Adobe Xd 4

Puede mantener presionado el botón Ctrl y mover la rueda de desplazamiento para acercar / alejar y ver todas las mesas de trabajo individuales.

Utilice los kits de Ui Adobe Xd 5

Si desea descargar Wireframes en su lugar, puede hacer clic en la opci√≥n Wireframes en el men√ļ Obtener kits de UI.

Utilice los kits de Ui Adobe Xd 8

Tambi√©n puede buscar kits de UI adicionales en el sitio web de Adobe haciendo clic en la opci√≥n M√°s kits de UI en el men√ļ Obtener kits de UI.

Utilice los kits de Ui Adobe Xd 9

El sitio web tiene algunas excelentes opciones para elegir, incluido este genial kit de interfaz de usuario de Movie Magic que parece una pantalla de mano a mano.

Utilice los kits de Ui Adobe XD 11

Ahora que ya sabe cómo descargar los kits de UI, veamos cómo puede usarlos en sus proyectos.

Cómo usar los kits de UI en Adobe XD

Para usar kits de IU en su proyecto, simplemente siga estos sencillos pasos:

Paso 1
:
Amplíe el elemento de la interfaz de usuario que desea usar en su proyecto y haga clic en su título para seleccionarlo.

Utilice los kits de Ui Adobe XD 12

Paso 2
:
Ahora copie el elemento usando el atajo Ctrl + C.

Utilice los kits de Ui Adobe XD 13

Paso 3
:
Luego abre un nuevo proyecto de Adobe XD desde el men√ļ.

Utilice los kits de Ui Adobe XD 14

Paso 4
:
Aquí, pegue el elemento UI usando el atajo de teclado Ctrl + V.

Utilice los kits de Ui Adobe XD 15

Para este artículo, usaré el elemento Mobile Dark del kit de la IU de Google Material. El elemento incluye guías para ayudarlo a colocar más capas, pero si no quiere usarlas, puede eliminarlas fácilmente siguiendo el siguiente paso.

Paso 5
:
Para eliminar las guías, haga clic en el icono de candado en la esquina superior izquierda y luego presione eliminar. Puede omitir este paso si desea usar las guías para colocar más objetos en el elemento con precisión.

Recomendamos:
¬ŅCu√°ndo regresar√° la NASA a la luna? Planes revelados antes de Apollo 11 50 aniversario

Utilice los kits de Ui Adobe XD 16

Paso 6
:
Ahora vuelve al kit de IU para seleccionar otro elemento para agregar a esta página. Una vez más, haga clic en el título del elemento y cópielo utilizando el acceso directo Ctrl + C.

Utilice los kits de Ui Adobe XD 17

Crearé un brindis básico para este artículo para el que usaré uno de los cuadros de diálogo.

Paso 7
:
Pegue el nuevo elemento en el elemento anterior y luego alin√©elo seg√ļn las gu√≠as.

Utilice los kits de Ui Adobe XD 18

Paso 8
:
Ahora para editar cada elemento en la tostada, haga doble clic en el cuadro de texto y luego ingrese el texto que desea usar. Primero, cambiemos el título de la tostada.

Utilice los kits de Ui Adobe XD 19

A continuación, cambie el contenido del cuerpo haciendo doble clic en el cuadro de texto y escribiendo lo que desee agregar.

Utilice los kits de Ui Adobe XD 20

También puede cambiar el texto de los botones de la misma manera. Una vez que haya terminado de editar el texto, puede cambiar el color y la opacidad del texto. Para cambiar la opacidad, simplemente mueva el control deslizante debajo de la opción Opacidad en la barra de herramientas a la derecha.

Utilice los kits de Ui Adobe XD 21

Para cambiar el color del texto, haga clic en el rectángulo junto a la opción Relleno y luego seleccione un nuevo color en el selector de color.

Utilice los kits de Ui Adobe XD 23

Y no es solo el texto que puede editar de esta manera. Tambi√©n puede cambiar el color y la opacidad de casi todos los elementos en el cuadro de di√°logo, lo cual es excelente si se busca un esquema de color √ļnico.

Utilice los kits de Ui Adobe XD 24

Una vez que est√© satisfecho con el resultado, simplemente contin√ļe y guarde su archivo haciendo clic en la opci√≥n Guardar como en el men√ļ o utilizando el acceso directo May√ļs + Ctrl + S.

Recomendamos:
Cyberpunk 2077 ocupar√° al menos 80 GB de espacio en PS4