Figma para principiantes: diseñe una página de inicio de sesión y una página de bienvenida conmigo

Construido con Canva

Buenos días amigos,

Entonces, para mi proyecto senior, mi equipo está creando una aplicación de chat llamada MataChat. Recientemente, terminamos nuestra etapa de preparación, que consistió principalmente en la planificación de sprints y la creación de historias de usuarios. Ahora es el momento de codificar el front-end y el back-end de la aplicación.

Pero antes de hacer algo de eso, debemos crear wireframes y/o prototipos. (Preferiblemente ambos). En otras palabras, debemos establecer qué componentes visuales deben estar presentes en la página (como cuadros de entrada y botones de envío) y cómo deben verse. Y después de establecer ese diseño, nuestros desarrolladores front-end simplemente traducirán el diseño a HTML y CSS. ¿Tiene sentido?

Para este artículo, pensé que sería divertido compartir el proceso de diseño de prototipos o maquetas para diferentes páginas de la aplicación. Es posible que estos diseños no necesariamente se incluyan en el proyecto real, pero será divertido crearlos. Además, la práctica hace la perfección.

A lo largo del proceso de diseño, te contaré todo lo que necesitas saber para replicar los diseños tú mismo. A través de este enfoque práctico, espero que puedas aprender un par de cosas y comenzar a crear tus propios diseños para tus propios proyectos.

Empecemos.

Para este proyecto, utilizamos la herramienta de diseño Figma. Si no te gusta Figma, existen otras herramientas de diseño alternativas como Adobe XD y Sketch. Pero nuevamente, para este tutorial, usaremos Figma.

Empezando

Para comenzar, inicie sesión en la plataforma y cree un nuevo archivo de diseño.

Crear un nuevo archivo de diseño

Cuando crea un nuevo archivo de diseño, la herramienta de diseño se abrirá como se muestra a continuación:

Herramienta de diseño en Figma; Haga doble clic para cambiar el nombre del archivo

Haga doble clic en “Sin título” en la parte superior para cambiar el nombre de su archivo. Llamaré a mi archivo MatachatV2

Primer diseño: página de presentación para escritorio

Archivo de la comunidad Figma

Para empezar, vamos a empezar fácil. Vamos a crear una página de presentación.

Según Wikipedia, una página de presentación es:

un elemento de control gráfico que consta de una ventana que contiene una imagen, un logotipo, y la versión actual del software. Una pantalla de bienvenida puede Aparece mientras se inicia un juego o programa.. Una página de presentación es una página de introducción en un sitio web.

fuente: wikipedia

Empecemos.

Crear un rectángulo en Figma

En la parte superior izquierda, seleccione la opción cuadrada (como se muestra arriba) y seleccione Rectángulo. Dibuja un rectángulo grande como se muestra a continuación:

Este rectángulo representa cómo debería verse la pantalla. En este caso, representará cómo debería verse la pantalla de presentación.

Antes de diseñar la pantalla de presentación, vamos a hacer algunas cosas.

Primero, en la barra lateral de la izquierda, haga doble clic en “Rectángulo 1” y cámbiele el nombre a “Escritorio – Página de presentación”. Está marcado para usted en la captura de pantalla anterior. Estamos haciendo esto para que sus capas sean legibles. Si tiene 100 capas en su diseño, los nombres legibles son mejores que 100 capas llamadas “Rectángulo 1”, “Rectángulo 2”, etc.

A continuación, mira la barra superior. ¿Ves la opción que está representada por una T?

Crea un cuadro de texto en Figma

Seleccione esto para que pueda introducir un cuadro de texto en su diseño. Introduzca texto encima de su rectángulo para etiquetar visualmente lo que representará la pantalla. En nuestro caso, este rectángulo representará nuestra página de presentación. Puede parecer redundante, pero esto te permitirá identificar visualmente para qué sirve cada pantalla.

Ahora estamos listos para partir.

Para nuestra página de presentación, solo quiero un fondo de color sólido con un logotipo. Voy a utilizar el logotipo de MataChat que diseñó mi equipo. El archivo se puede encontrar aquí. Siéntete libre de utilizar el logotipo que quieras; solo asegúrate de que el fondo sea transparente.

Aquí hay algunas herramientas en línea gratuitas para comenzar

> crear un logotipo de práctica con Canva

>hacer que las imágenes tengan un fondo transparente con Adobe Express o removebg

Para presentar el logo, solo copiado y pegado el logotipo en el archivo de diseño. Es importante tener en cuenta que antes de copiar y pegar en Figma, debes asegurarte de que ninguna de las capas esté seleccionada actualmente. Esta idea se muestra en la captura de pantalla anterior. ¿Ves que en la barra lateral izquierda no está resaltada ninguna de las capas? Eso es lo que quieres.

¿Qué sucede si se selecciona una capa?

Si seleccionó nuestra capa rectangular Escritorio – Página de presentación, por ejemplo, y pegamos una imagen, la imagen ocupará el tamaño del rectángulo. Es muy útil, pero en esta situación, no es lo que queremos.

Después de pegar nuestro logotipo correctamente, aparecerá una nueva imagen de capa1 en nuestro panel Capas.

Panel de capas

Asegúrate de cambiarle el nombre a algo significativo. Lo llamaré tologo. A partir de este momento, no se mencionará el cambio de nombre de las capas recién introducidas (como imágenes, cuadros de texto y formas). Hazlo.

Este es su estado actual. Si desea agrandar el logotipo, haga clic en la imagen y aparecerán algunos componentes de la interfaz de usuario que se pueden arrastrar.

Para hacerlo más grande, arrastre las esquinas más exteriores hacia afuera. O también puedes estirarlo vertical u horizontalmente arrastrando los bordes hacia afuera.

¿Pero ves esos círculos que marqué en la captura de pantalla de arriba? Arrastrar esos círculos hacia adentro redondeará las esquinas. Pruébelo usted mismo. Pero para este escenario (con nuestro logo), no necesitamos redondear las esquinas.

Ahora cambiemos el color de fondo. Si necesitas inspiración en colores, realmente me encantan los colores fríos. Proporciona magníficas paletas de colores y sus códigos HEX. Lo uso para cada proyecto front-end que creo. Échale un vistazo.

Para cambiar el color, seleccionará la capa de rectángulo Escritorio – Página de bienvenida. Asegúrate de que esté resaltado en el Panel de Capas (en el lado izquierdo).

Configuraciones para la capa de página Rectángulo Deskto-Splash

Si lo hace con éxito, las configuraciones quedarán expuestas en el panel derecho. Este es nuestro panel de diseño. Cada capa de su archivo de diseño tendrá configuraciones únicas y siempre aparecerá en esta barra lateral derecha al hacer clic en la capa.

Opción de relleno en la barra lateral derecha

¿Ves la opción Rellenar? En este momento, es gris con un código HEX de C4C4C4. Podemos cambiar eso. Puede hacer clic en C4C4C4 para reemplazar el código HEX. Puedes hacer clic en 100% para cambiar la opacidad. O puede hacer clic en el cuadrado a la izquierda del código HEX para abrir una rueda de colores o, en este caso, un cuadrado de colores.

Puedes hacer que el fondo sea azul, como se muestra arriba.

gradientes lineales

Puedes crear degradados lineales.

gradientes radiales

… o gradientes radiales. Haz lo que quieras. Juega con eso.

Reanudemos.

Este es nuestro producto final para nuestra página de inicio.

Ahora que hemos pasado por todo ese proceso, debería ser más fácil y rápido diseñar nuevas pantallas. Ahora ya sabes cómo introducir un cuadro de texto, introducir formas e imágenes, cambiar el nombre de las capas y configurar cada capa en el panel Diseño.

Gran trabajo, equipo.

Creemos una página de presentación nuevamente, pero para pantallas móviles.

Segundo diseño: página de presentación para dispositivos móviles

Antes de trabajar en la página de presentación móvil, necesitamos algo de organización. Con el tiempo, nuestro archivo de diseño podría tener 10, 20 o más diseños de pantalla, cada uno con sus propios componentes. Nuestro panel de capas será enorme.

Entonces, empaquetemos todos nuestros componentes que pertenecen a la página Splash para escritorio.

En tu panel de capas, mantén presionado CONTROL en su teclado y haga clic en todas las capas que pertenecen a la pantalla de bienvenida para escritorio. En este caso, son las tres capas. Resalte las tres capas, haga clic derecho y seleccione Selección de grupo.

Agrupará las capas seleccionadas como se muestra a continuación:

Haga doble clic en 'Grupo 1' y cámbiele el nombre a Escritorio – Página de presentación

Perfecto.

Pasemos a crear el Página de presentación para dispositivos móviles.

Dado que es sólo un fondo de color y un logotipo, la página de inicio para dispositivos móviles no es tan complicada. Podemos simplemente duplicarlo y cambiar el ancho de la pantalla. Para duplicarlo vamos a copiar y pegar el grupo Desktop-Splash Page. Si seleccionamos el grupo, automáticamente selecciona todas las capas de ese grupo.

Así que seleccione el grupo, cópielo y péguelo. Al pegarlo, el duplicado se pegará encima de la página Desktop-Splash del grupo original. Simplemente arrastre el nuevo grupo hacia la derecha.

cambiar nombres y ancho de elementos

Después de cambiar los anchos, los nombres de las capas y los nombres de las etiquetas, debería llegar a algo como esto.

Ahora tenemos nuestro diseño de página de presentación para computadoras de escritorio y dispositivos móviles.

Tercer diseño: página de inicio de sesión para escritorio

A estas alturas ya deberías conocer el procedimiento.

Primero, vamos a copiar y pegar la página de presentación del escritorio. ¿Por qué no crearlo desde cero? Quiero que todas las pantallas del escritorio (rectángulos) tengan el mismo tamaño. Y cada pantalla necesitará etiquetas. No quiero seguir haciendo la misma tarea una y otra vez. Pero siéntete libre de hacerlo de esa manera. Haz lo que te resulte cómodo e intuitivo.

Arriba hay un duplicado de la página de presentación para escritorio. Cambié el nombre de los componentes para reconocerlos en la página de inicio de sesión y eliminé el logotipo.

Entonces, para la página de inicio de sesión, quiero lo básico. Quiero dos cuadros de entrada y un botón de enviar. Quiero el logo en algún lugar ahí. Quiero un mensaje de bienvenida y un mensaje para que el usuario inicie sesión. Además, tal vez “¿Olvidó su contraseña?” y enlaces de anclaje “Registrarse”, ya que todos los sitios web los tienen. Y si esto no te resulta intuitivo, me gusta visitar los sitios web que me encantan. ¿Cuáles son los elementos y características que tienen la mayoría de las páginas de inicio de sesión? Mira alrededor.

Para el diseño real, creo que quiero que todo el formulario de inicio de sesión esté contenido dentro de un contenedor centrado en el medio. Y lo quiero con bordes redondeados. En este momento, estoy imaginando un contenedor negro transparente, pero también puedo verlo siendo blanco o negro sólido. Lo probaré todo, y ese es el objetivo de Figma.

Con herramientas de diseño como Figma, podemos diseñarlo aquí. No tenemos que crearlo con HTML y CSS. Podemos diseñarlo aquí, probar varios diseños, elegir uno que nos guste y luego crearlo.

Entonces empecemos.

Aquí, creé un nuevo rectángulo que albergará mi formulario de inicio de sesión. Usando esas líneas rojas, que ofrece Figma como herramienta de posicionamiento, centro el rectángulo en la página.

Redondea los bordes usando esta herramienta en el Panel de Diseño

Después, cambié el color de relleno a negro. (Recuerde, debe seleccionar la capa del rectángulo para poder acceder al panel de diseño del rectángulo)

Ahora quiero redondear los bordes. A diferencia de las imágenes, las formas de Figma deben redondearse usando el panel Diseño (en el lado derecho). Lo resalté para ti en la captura de pantalla de arriba.

Todo lo que vamos a hacer es hacer clic en el 0. En lugar de escribir un número, lo cual definitivamente puedes hacer, simplemente usaremos las teclas de flecha. Vamos a mantener presionada la flecha hacia arriba. Esto incrementará el número hasta que sueltes la tecla de flecha hacia arriba. Prefiero hacerlo de esta manera, en lugar de usar números, así puedo detenerme cuando creo que se ve bien.

Me detuve en un radio de esquina de 47, como se muestra arriba. Si desea optar por un número mayor o menor, hágalo.

A continuación, quiero agregar una sombra paralela al rectángulo para que haya profundidad y dimensión.

Haga clic en + para agregar un nuevo efecto (en la categoría Efectos). De forma predeterminada, el efecto será una sombra paralela. Haga clic en el icono del sol para cambiar las personalizaciones, como se muestra a continuación.

El valor x lo mueve a lo largo del eje x, lo que significa de izquierda a derecha. El valor y lo mueve hacia arriba y hacia abajo. Y para ello, siéntete libre de utilizar las flechas hacia arriba y hacia abajo para subir y bajar los valores. Juega con los números y mira qué pasa.

Este es nuestro producto actual. Creo que me gusta el negro así que vamos a seguir adelante. Ahora, voy a presentar todos los elementos de texto..

Para comenzar, vamos a crear el mensaje “Iniciar sesión”. Tras seleccionar el texto, accederemos al diseño…