Cómo crear una maqueta de interfaz de usuario simple en Figma

Figma se ha establecido como la herramienta de referencia para los diseñadores gráficos al ofrecer funciones potentes y al mismo tiempo ser fácil de usar. Esto lo hace perfecto tanto para profesionales de la industria como para recién llegados al mundo del diseño gráfico.

Si recién estás comenzando, uno de los primeros proyectos que quizás quieras probar es crear una maqueta de una aplicación móvil. Hacerlo le ayudará a familiarizarse con las herramientas de la plataforma y a comprender cómo diseñar aplicaciones que no sólo tengan un aspecto fantástico sino que también sean intuitivas de usar. Entonces, aquí hay una guía sobre cómo crear una maqueta de interfaz de usuario simple en Figma.

Paso 1: crea una estructura alámbrica para tu maqueta

En el mundo del diseño gráfico, una estructura alámbrica es un esquema básico de su aplicación que muestra dónde aparecerán diferentes elementos como texto y botones. Efectivamente, funciona como un modelo al representar la estructura de su aplicación y cómo los usuarios interactuarán con ella. Por lo general, se crea al comienzo de cualquier proyecto de diseño. Puede encontrar ideas de diseño para su estructura alámbrica en línea en varios sitios web. Una vez que haya elegido un diseño, es hora de comenzar a crear su estructura alámbrica.

1. Dirígete aly regístrate o inicia sesión si ya tienes una cuenta.
2. Una vez que haya iniciado sesión, haga clic en "Nuevo archivo de diseño" en la parte superior.

3. Ponle un nombre a tu proyecto escribiéndolo en el campo de texto en la parte superior izquierda.

4. El espacio gris que ves en tu pantalla es el lienzo. Servirá como fondo para su proyecto. Figma utiliza marcos que sirven como contenedores para todos los proyectos. Para crear un marco, presione el botónFo haga clic en el segundo icono en la barra de herramientas en la parte inferior.

5. Luego haga clic y arrastre sobre el lienzo para crear un marco. También puede seleccionar entre varios ajustes preestablecidos que aparecerán a la derecha cuando seleccione la herramienta Marco, como iPhone 16.

6. Cuando crea un marco, verá varios atributos para el marco a la derecha que puede cambiar.

7. Ahora, haga clic en el menú desplegable junto a la herramienta 'Formas', que aparece como un cuadrado en la barra de herramientas, y seleccione la opción de elipse.

8. Haz clic y arrastra en la parte superior izquierda del marco que creaste para crear una elipse.

9. Luego seleccione el rectángulo de la herramienta Formas y cree algunos rectángulos con diferentes dimensiones en el lienzo, dependiendo de cómo desee crear la maqueta de su aplicación.

Paso 2: instalar complementos

Figma admite varios complementos que puedes integrar con la herramienta de diseño y mejorar sus capacidades. Algunas integraciones que deberías revisar incluyen,,, y.

1. Para instalar un complemento, diríjase a la página del complemento y haga clic en el botón "Abrir en" a la izquierda.

2. Luego seleccione el proyecto Figma en el que desea utilizar ese complemento.

3. Luego haga clic en el botón 'Ejecutar'.

4. Ahora deberías ver el complemento en tu proyecto, listo para usar.

Paso 3: agregar contenido a su estructura alámbrica

Los wireframes básicos que contienen muy pocos detalles se conocen como wireframes de baja fidelidad, como el que has creado aquí. Luego están los wireframes de alta fidelidad, que son representaciones detalladas del sitio web o la aplicación que estás diseñando. Ahora, transformará su estructura alámbrica de baja fidelidad en una de alta fidelidad agregando contenido.

1. Haga clic derecho en 'Página 1' a la izquierda y haga clic en 'Duplicar página'.

2. Una vez que la página esté duplicada, cámbiele el nombre a algo como "Alta fidelidad" haciendo clic donde dice "Página 2" a la izquierda.

3. Ahora, haga clic en la elipse en la parte superior izquierda que creó anteriormente y use elCtrl+/acceso directo para abrir la opción Buscar.

4. Tipouser profileen el cuadro de búsqueda y haga clic en 'buscar en complementos y widgets'.

5. Luego haga clic en el complemento 'Perfil de usuario'.

6. Haga clic en el botón 'Ejecutar' para activar el complemento Perfil de usuario.

7. Tendrás que unirte a la lista de espera iniciando sesión con tu cuenta de Google. Una vez que lo hagas, puedes seleccionar varios aspectos del avatar que deseas agregar, como edad, color de cabello y género antes de hacer clic en el botón "Insertar foto aleatoria".

8. Sigue el mismo proceso para completar los demás cuadros de tu proyecto con imágenes adecuadas, dependiendo de de qué se tratará la maqueta. Por ejemplo, si tu aplicación trata sobre recetas, puedes agregar imágenes de varias recetas.

Nota:Puede agregar el complemento 'Unsplash' para insertar imágenes tal como agregó el complemento 'Perfil de usuario' y el complemento 'Iconify' para agregar íconos. Si desea agregar texto, puede escribirlo usando la herramienta de texto o usar el complemento 'Lorem Ipsum'.

9. Una vez que hayas finalizado tu maqueta, haz clic en el icono "Reproducir" en la parte superior derecha para obtener una vista previa de cómo aparecerá en el dispositivo para el que la diseñaste.

Paso 4: colaborar y obtener comentarios

Al colaborar con otros diseñadores y usuarios reales, puede mejorar su diseño a través de comentarios.

1. Para compartir su proyecto con otras personas, haga clic en el botón 'Compartir' en la parte superior derecha y luego podrá elegir cómo desea compartirlo. Puede copiar el enlace del proyecto, copiar su modo de desarrollo o enlace prototipo, o publicarlo en la comunidad.

Nota:Para compartir directamente su proyecto Figma con alguien, haga clic en el botón Compartir. Cuando aparezca la ventana emergente "Compartir este archivo", ingrese la dirección de correo electrónico de la persona con la que desea compartir el proyecto en el campo "Invitar a otras personas por nombre o correo electrónico". Luego haga clic en el botón 'Invitar' a la derecha.

2. Haga clic en la herramienta 'Comentario' en el panel Herramientas en la parte inferior y luego haga clic en cualquier lugar de su proyecto donde desee agregar un comentario. Aparecerá un cuadro de texto en el que podrá escribir su comentario para que los colaboradores lo vean y respondan.

3. Si desea compartir su diseño con la comunidad Figma, haga clic en el botón "Compartir" y luego seleccione la opción "Publicar en la comunidad" como se explicó anteriormente.
4. Aparecerá un nuevo cuadro de diálogo donde podrá ingresar detalles como el nombre del proyecto, descripción, categoría y etiquetas. Haga clic en el botón 'Siguiente' después de completar los detalles.

5. Ahora puede cargar una imagen para usarla como miniatura del diseño, así como imágenes adicionales para el carrusel. Haga clic en el botón 'Siguiente' cuando haya terminado.

6. Finalmente, puede agregar colaboradores adicionales escribiendo sus nombres, proporcionando una dirección de correo electrónico de soporte y eligiendo si desea permitir comentarios de los miembros de la comunidad. Luego haga clic en el botón 'Publicar' para finalizar.

Cosas que debes saber

• Al crear maquetas, asegúrese de ceñirse a un conjunto limitado de estilos de fuente, tamaños, alturas de línea y grosores. Esto asegurará que su diseño tenga una apariencia profesional y sofisticada.
• Tus maquetas deben diseñarse para diferentes tamaños de pantalla, especialmente al diseñar un sitio web. Considere los tamaños de pantalla de computadoras de escritorio, tabletas y dispositivos móviles al diseñar.
• Mantener sus diseños simples y limpios no solo los ayudará a verse atractivos, sino que también hará que su aplicación o sitio web sea más fácil de navegar. Usar demasiados elementos y agregar demasiada información puede confundir a los usuarios.
• Considere lo que experimentarán los usuarios en el mundo real al usar su aplicación o sitio web. Esto mejorará significativamente su enfoque para crear diseños atractivos e intuitivos.