Cómo crear y agregar maquetas a sus diseños de Figma usando complementos

Si eres un diseñador al que le gusta exhibir sus diseños usando maquetas, puede ser fácil crearlos en Figma.

En lugar de guardar sus diseños de Figma y pasar a otro programa para crear una maqueta, puede descargar fácilmente complementos de maqueta en Figma. Hay muchas opciones de complementos en varios estilos, pero todos son fáciles de usar y se integran en diseños más grandes.

Cómo encontrar y descargar complementos de Figma

Descargar e instalar un complemento en Figma es lo mismo ya sea que esté usando la aplicación o la versión del navegador. De Página de inicio del navegador de Figma, haga clic Comunidad > Complementos y widgetsy busque en la lista o utilice la barra de búsqueda.

De La aplicación de Figma, la página de inicio ofrecerá la misma opción que el navegador para acceder a la página de la comunidad. Pero si está en una página de diseño, puede hacer clic en el logotipo de Figma y luego Complementos. Si ya tiene complementos instalados, los verá enumerados aquí.

Para encontrar más, elija

Explorar complementos en la comunidad. Esto lo llevará a la página de la comunidad dentro de la aplicación, donde puede buscar otros complementos.

En la página de la comunidad, encontrará una pequeña reseña para cada complemento, la fecha de la última actualización y la frecuencia con la que se ha descargado cada complemento. Para obtener más información sobre cada complemento, como los comentarios de los usuarios y las guías de uso, hacer clic en su nombre lo llevará a la página de información de ese complemento.

Una vez que haya encontrado un complemento que le gustaría descargar, haga clic en el azul Instalar botón.

Si no está seguro de qué buscar, estos son nuestros cinco complementos de maquetas favoritos. Hay muchos más, pero es bueno empezar por algún lado.

• Maquetas de Arcilla 3D
• maquetas de ángulo
• MockRocket - Maquetas 3D
• Bosquejo
• Elementos vectoriales 3D

Cómo usar complementos de maquetas en Figma

El proceso de instalación de complementos es el mismo independientemente del tipo de complemento que esté utilizando, pero puede haber algunas diferencias en la forma en que se usan. Es por eso que siempre es mejor leer la página de la comunidad del complemento individual para obtener detalles adicionales.

En Figma, puede elegir tamaños de marco listos para usar para pantallas específicas, como el iPhone 13 o un Android grande o pequeño. Debe crear su diseño para el tamaño de dispositivo deseado en lugar de intentar cambiar el tamaño de los diseños. más tarde para adaptarse a su maqueta, pero algunas maquetas permitirán tamaños ligeramente diferentes sin distorsión.

Incluso podría usar una captura de pantalla de su dispositivo, que tendrá el tamaño perfecto para una maqueta del mismo dispositivo.

Las maquetas suelen ser para diseños de pantallas estáticas, aunque puede hacer una maqueta de video en Photoshop. Nos vamos a centrar en las maquetas de Figma para dispositivos portátiles, pero puede crear una maqueta desde cero en Photoshop para otros dispositivos. Con el diseño de su pantalla finalizado, puede continuar con la creación de la maqueta del producto.

Le mostraremos cómo usar tres de nuestros complementos sugeridos: Clay Mockups 3D, Angle Mockups y Vectory 3D Elements. Saltemos directamente.

Maquetas de Arcilla 3D

Con su diseño abierto, seleccione el marco y luego vaya a Complementos y elige Maquetas de Arcilla 3D. Esto abre una ventana donde puede elegir el dispositivo para la maqueta. Su diseño debería mostrarse en la pantalla de la maqueta en esta ventana.

Puede cambiar el ángulo de la maqueta así como el color en esta ventana. Una vez que esté satisfecho con su apariencia, haga clic en Guardar como imagen.

Puede volver atrás y cambiar el color u otros aspectos en cualquier momento haciendo clic en Editar maqueta por debajo Enchufar en el menú de la derecha. Ahora puede agregar su complemento a diseños más grandes como presentaciones o su cartera.

maquetas de ángulo

Para usar Angle Mockups, debe crear una cuenta de Angle para descargar la biblioteca de maquetas de su sitio web. En sitio web de ángulo, haga clic Registrarse, que abrirá una ventana emergente donde puede hacer clic Inscribirse y agregue sus datos para crear una cuenta gratuita.

Una vez que haya iniciado sesión, para descargar las maquetas, haga clic en Mockups > Descargar muestra. Para obtener un conjunto más completo de maquetas, puede pagar el acceso premium, pero la muestra que se ofrece con la cuenta gratuita es lo suficientemente buena.

Una vez descargado, descomprime el archivo. Contiene muestras que puede usar en Figma, Sketch y Adobe XD, así como algunos fondos de pantalla gratuitos. Abierto Ángulofigma. Encontrará dos videos para ayudarlo a usar las maquetas, así como cuatro conjuntos de archivos Figma con varias maquetas.

Para importar los archivos a su cuenta de Figma, vaya al navegador de Figma y haga clic en su perfil. Puede acceder a esto desde la aplicación yendo a Archivo > Abrir explorador de archivos. Arrastre y suelte cada archivo de ángulo en Figma. Luego abra el archivo Angle haciendo doble clic en él desde la página del navegador Figma.

Encuentre el ángulo del dispositivo que desea usar para su maqueta y cópielo (CMaryland + C para Mac o Ctrl + C para ventanas). Pégalo (CMD + V para Mac o Cverdadero + V para Windows) en la misma mesa de trabajo que su diseño principal.

En la paleta de capas, expanda las capas de la pantalla de maqueta hasta que vea la capa con un ícono de imagen titulado Coloque la mesa de trabajo aquí. Seleccione esa capa. Luego ve a Complementos > Maquetas de ángulo y seleccione su diseño original en la ventana emergente.

Esto debería mostrarse en la ventana de vista previa en el ángulo de su maqueta, pero no mostrará el dispositivo de la maqueta. Hacer clic Aplicar y su pantalla ahora debería estar en la maqueta del dispositivo en el ángulo correcto.

Elementos vectoriales 3D

Vectary 3D funciona de manera similar a Clay Mockups 3D, aunque tiene menos opciones para maquetas de dispositivos, ya que también ofrece una variedad de recursos 3D. Abre tu diseño, selecciona el marco y ve a Complementos > Elementos 3D vectoriales.

Encuentre la maqueta que le gustaría usar en la biblioteca emergente, luego haga clic en Marco de carga. Una vez que su diseño haya aparecido en la pantalla del dispositivo, haga clic en Exportar imagen.

Ahora tienes una maqueta 3D de tu diseño en el dispositivo que elijas. Puede agregarlo a otro diseño fácilmente.

Una vez que su maqueta esté completa, puede guardarla como un archivo PNG para usarla fácilmente en otro diseño. Hacer clic Archivo > Exportar. Seleccione su imagen elegida para exportar, luego haga clic en Exportar para su PNG final.

Agregue realismo a sus diseños con maquetas de Figma

Existen innumerables usos para crear maquetas para sus diseños. Con varios complementos de Figma, puede encontrar una gran variedad de estilos para trabajar que puede agregar a sus presentaciones, cartera o crear solo por diversión para mostrar su trabajo de diseño.

Con algunas diferencias en la aplicación, los complementos de maquetas de Figma son fáciles de acceder y usar, entonces, ¿por qué no probarlo?

Cómo crear plantillas maestras para presentaciones en Figma

Leer siguiente