Cómo usar kits de interfaz de usuario en Adobe XD 13

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

Para aquellos interesados ​​en el diseño web, los kits de interfaz de usuario 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.

Si es nuevo en el software y no está seguro de cómo usar los kits de interfaz de usuario en Adobe XD, ha venido al lugar correcto. En este artículo, le mostraré cómo puede instalar kits de interfaz de usuario en el software y luego usar los recursos incluidos para su proyecto.

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

Primero, echemos un vistazo a cómo puede descargar kits de interfaz de usuario en Adobe XD, directamente desde el software. Simplemente siga estos pasos para comenzar:

Paso 1: Haga clic en el botón del menú de hamburguesas en la esquina superior izquierda del software.

Usar kits de interfaz de usuario Adobe Xd 1

Paso 2: En el menú, desplácese hacia abajo hasta la opción Obtener kits de interfaz de usuario y luego haga clic en cualquiera de las tres opciones disponibles.

Usar kits de interfaz de usuario Adobe Xd 2

Para este artículo, elegiré el kit de interfaz de usuario de material de Google. Sin embargo, dependiendo de su proyecto, puede seleccionar los kits Apple iOS o Microsoft Windows. Eso abrirá una página web oficial desde la que puede descargar los kits de interfaz de usuario de forma gratuita.

Paso 3: Localice el kit de interfaz de usuario de Adobe XD en la siguiente página web y descárguelo en su sistema.

Usar kits de interfaz de usuario Adobe Xd 3

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

Usar kits de interfaz de usuario 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.

Usar kits de interfaz de usuario Adobe Xd 5

Si desea descargar Wireframes en su lugar, puede hacer clic en la opción Wireframes en el menú Obtener kits de interfaz de usuario.

Usar kits de interfaz de usuario Adobe Xd 8

También puede buscar kits de interfaz de usuario adicionales en el sitio web de Adobe haciendo clic en la opción Más kits de interfaz de usuario en el menú Obtener kits de interfaz de usuario.

En relación :  Cómo configurar iMessage en tu Mac
Usar kits de interfaz de usuario Adobe Xd 9

El sitio web tiene algunas opciones excelentes para elegir, incluido este kit de interfaz de usuario Movie Magic realmente genial que parece una pantalla de visualización frontal.

Usar kits de interfaz de usuario Adobe Xd 11

Ahora que sabe cómo descargar kits de interfaz de usuario, echemos un vistazo a cómo puede usarlos en sus proyectos.

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

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

Paso 1: Acérquese al elemento de la interfaz de usuario que desea usar en su proyecto y haga clic en su título para seleccionarlo.

Usar kits de interfaz de usuario Adobe Xd 12

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

Usar kits de interfaz de usuario Adobe Xd 13

Paso 3: Luego abra un nuevo proyecto de Adobe XD desde el menú.

Usar kits de interfaz de usuario Adobe Xd 14

Etapa 4: Aquí, pegue el elemento de la interfaz de usuario usando el atajo Ctrl+V.

Usar kits de interfaz de usuario Adobe Xd 15

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

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

Usar kits de interfaz de usuario Adobe Xd 16

Paso 6: Ahora regrese al kit de interfaz de usuario 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 usando el atajo Ctrl+C.

Usar kits de interfaz de usuario Adobe Xd 17

Crearé un brindis básico para este artículo para el cual 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.

Usar kits de interfaz de usuario Adobe Xd 18

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

Usar kits de interfaz de usuario 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.

Usar kits de interfaz de usuario 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.

Usar kits de interfaz de usuario 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 del selector de color.

En relación :  Uso del modo invitado y fijación de pantalla en Android Lollipop
Usar kits de interfaz de usuario Adobe Xd 23

Y no es solo el texto lo 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 busca un esquema de color único.

Usar kits de interfaz de usuario 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 usando el atajo Shift+Ctrl+S.

Perfeccione su diseño usando kits de interfaz de usuario

Ahora que sabe cómo descargar y usar kits de interfaz de usuario en Adobe XD, estoy seguro de que comenzará a producir diseños sorprendentes en muy poco tiempo. Estos kits de interfaz de usuario son definitivamente muy útiles y lo ayudan a llegar directamente a su proyecto sin preocuparse por diseñar cada elemento de la interfaz de usuario.

A continuación: ¿Completaste un proyecto en Adobe XD y no sabes cómo exportarlo a HTML? Consulte el siguiente artículo para obtener un sencillo tutorial paso a paso.