() translation by (you can also view the original English article)
En este tutorial de Figma aprenderás a crear pantallas de acceso y de inicio de sesión para una plantilla de aplicación de citas. ¡Aquí hay una vista previa rápida de la plantilla en acción!
Lo que aprenderás en este tutorial de plantillas para aplicaciones de citas:
- Cómo configurar un marco y una cuadrícula simple en Figma
- Cómo guardar un estilo de color en Figma
- Cómo añadir diseños automáticos en Figma
- Cómo crear componentes en Figma
- Cómo hacer un prototipo en Figma
Para obtener más inspiración sobre cómo ajustar o mejorar la interfaz de usuario de tu aplicación de citas final, puedes encontrar un montón de kits de interfaz de usuario de Figma para iOS en GraphicRiver.
Lo que necesitarás:
Necesitarás los siguientes recursos para completar esta interfaz de usuario de la aplicación de citas (pero siéntete libre de utilizar tus propias alternativas):
- Concepto de ilustración Citas sociales
- Parejas en una cita - personajes con estilo de diseño plano
- Ilustración Nacido así
- La fuente Bomber Balloon
1. Cómo configurar un marco y una cuadrícula simple
Paso 1
Crea tu nuevo archivo y selecciona la Herramienta Marco (F) de tu barra de herramientas.
Concéntrate en la barra lateral derecha y selecciona la plantilla del iPhone 11 Pro / X para crear tu primer marco.
Paso 2
Antes de empezar a trabajar en el diseño, vamos a configurar una simple cuadrícula que facilitará la alineación de los elementos.
Concéntrate en el panel de Diseño en la barra lateral derecha y haz clic en la sección de Cuadrícula de Diseño para añadir una cuadrícula a tu diseño.
Haz clic en el icono azul para acceder a la configuración de la cuadrícula. Selecciona Columnas en el menú desplegable y luego introduce los ajustes que se muestran en la siguiente imagen.
2. Cómo crear botones para la pantalla de a bordo
Paso 1
Selecciona la Herramienta Rectángulo (R) de tu barra de herramientas y crea una forma de 70 x 30 px. Establece el radio de la esquina en 5 y luego haz clic en la rueda de color de relleno y cámbialo a #F5F5FF.
Cambia a la Herramienta Mover (V) y mueve tu rectángulo redondeado como se muestra en la segunda imagen. Alternativamente, puedes introducir 16 en la casilla X y 742 en la casilla Y para mover numéricamente tu forma a la ubicación deseada.
Paso 2
Escoge la Herramienta Texto (T) de tu barra de herramientas, haz clic dentro de tu marco y enfócate en la sección Texto del panel de Diseño.
Selecciona la fuente Lato, ajusta el estilo a SemiBold y el tamaño a 12. Aumenta el espacio entre letras al 10% y cambia el color del texto a #32323C, y luego escribe el texto "SKIP". Pulsa la tecla Esc para cambiar a la Herramienta Mover y coloca este texto como se muestra en la segunda imagen.
Paso 3
Utiliza la Herramienta Mover para seleccionar tu rectángulo redondeado junto con ese trozo de texto "SKIP". Mantén pulsada la tecla Alt y arrastra una copia de tus selecciones hacia la derecha, como se muestra en la siguiente imagen. Además, si mantienes pulsada la tecla Mayúsculas mientras arrastras, el movimiento de la copia se limitará a una sola dirección.
Céntrate en estas copias, selecciona el texto y cambia su color a blanco (#FFFFFF), y luego selecciona el rectángulo redondeado y cambia su color a #FF5F5F. Como vas a utilizar este color rosa muchas veces, vamos a guardarlo como un estilo de color para que puedas acceder fácilmente a él más tarde.
Sigue centrado en la sección Relleno y haz clic en el icono del punto cuádruple para abrir el panel desplegable Estilos de color. Haz clic en el botón Crear estilo (+), nombra tu nuevo estilo de color Rosa y luego haz clic en el botón Crear estilo.
Paso 4
Selecciona la Herramienta Rectángulo (R) y mantén presionada la tecla Mayúsculas mientras arrastras para crear fácilmente un cuadrado de 10 px. Rellena esta nueva forma con #F5F5FF y establece el Radio de la Esquina en 1.
Cambia a la Herramienta Mover (V) y coloca tu cuadrado redondeado como se muestra en la segunda imagen.
Paso 5
Arrastra dos copias de tu cuadrado redondeado como se muestra en las siguientes imágenes. Una a la derecha y la otra a la izquierda. Asegúrate de dejar un espacio de 20 px entre estas formas.
Selecciona el cuadrado redondeado de la izquierda y cambia su color a ese Rosa desde el panel desplegable Estilos de color.
3. Cómo añadir contenido para la pantalla de a bordo
Paso 1
Selecciona la Herramienta Texto (T) y haz clic dentro de tu marco. Cambia el estilo de la fuente a Negrita, aumenta el tamaño a 20 y baja el espaciado de las letras a 5%, y luego escribe "CONOCE NUEVAS PERSONAS".
Paso 2
Haz clic con el botón derecho del ratón en esta nueva pieza de texto y ve a Añadir diseño automático (Mayúsculas-A) para añadir un marco alrededor de tu texto. Enfócate en la sección Relleno y agrega un relleno Rosa para que los bordes del marco sean más obvios.
Ve a la sección de Diseño automático, aumenta el Relleno Horizontal a 15 y el Relleno Vertical a 13. Establece el Radio de Esquina a 5 y luego cambia el color del texto a blanco (#FFFFFF).
Paso 3
Selecciona la Herramienta Texto (T) y añade un nuevo elemento de texto. Cambia el estilo de la fuente a Regular, baja el tamaño a 10 y el interlineado a 0%, aumenta la altura de la línea a 14, y luego añade algunos párrafos, como se muestra en la siguiente imagen. No olvides cambiar el color del texto a #5A5A64.
Paso 4
Descarga este concepto de ilustración Citas Sociales, escálalo y colócalo como se muestra en la siguiente imagen.
4. Cómo duplicar cuadros
Paso 1
Haz clic en el nombre de tu primer marco para seleccionarlo y utiliza los clásicos atajos de teclado Control-C > Control-V para duplicarlo.
Enfócate en el nuevo marco, sustituye la ilustración por esta Ilustración de Nacido así, ajusta el texto e intercambia los colores utilizados para los cuadrados redondeados, como se muestra en la segunda imagen.
Paso 2
Selecciona tu segundo marco y duplícalo (Control-C > Control-V).
Enfócate en el nuevo marco, sustituye la ilustración por esta ilustración de Parejas en una cita, ajusta el texto e intercambia los colores utilizados para los cuadrados redondeados, como se muestra en la segunda imagen.
5. Cómo crear la pantalla de registro de la interfaz de usuario de la aplicación de citas
Paso 1
Haz clic en el nombre de tu tercer marco para seleccionarlo. Selecciona la Herramienta Marco (F) de tu barra de herramientas y haz clic en la plantilla del iPhone 11 Pro / X para añadir un cuarto marco, como se muestra en la siguiente imagen.
Paso 2
Asegúrate de que tu cuarto marco está seleccionado y simplemente cambia el color de relleno a Rosa.
Paso 3
Selecciona esa forma de corazón del concepto de ilustración citas sociales, cópiala (Control-C) y pégala (Control-V) dentro de tu archivo Figma. Cambia su color a blanco.
Con la Herramienta Texto (T), añade el texto "FLECHADO" y colócalo como se muestra en la segunda imagen. Utiliza la fuente Bomber Balloon, ajusta el tamaño a 50 y el espacio entre letras al 5%.
Paso 4
Selecciona la Herramienta Rectángulo (R), crea una forma de 130 x 30 px y colócala como se muestra en la primera imagen (X 48 Y 412). Establece el color de relleno en blanco (#FFFFFF) y baja la Opacidad al 10%, y luego aumenta el Radio de la Esquina a 5.
Utilizando la Herramienta Texto (T), añade el texto "LOGIN" y colócalo como se muestra en la segunda imagen. Utiliza la fuente Lato, ajusta el estilo a ExtraBold y el tamaño a 12, aumenta el espaciado de las letras al 10% y asegúrate de que el color es blanco.
Paso 5
Arrastra una copia de tu rectángulo redondeado a la derecha, como se muestra en la primera imagen. Selecciónalo y aumenta la Opacidad al 100%.
Cambia a la Herramienta Texto (T), añade el texto "REGISTRARME" y colócalo como se muestra en la segunda imagen. Mantén la configuración de la fuente como está, pero cambia el color del texto a Rosa.
Paso 6
Selecciona la Herramienta Texto (T) y añade un nuevo elemento de texto. Cambia el estilo de la fuente a Regular, aumenta el tamaño a 15 y el espaciado de las letras a 10%, y escribe "nombre de usuario". No olvides establecer el color del texto en #32323C.
Paso 7
Asegúrate de que tu texto sigue seleccionado y añade el diseño automático (Mayúsculas-A). Enfócate en la sección Relleno, añade un relleno usando ese botón + y establece el color en blanco.
Ve a la sección Disposición automática, establece que el apilamiento sea Vertical y marca el botón Ancho Fijo. Con una anchura fija el tamaño del marco no cambiará cuando edites el texto en su interior. Aumenta el Relleno Vertical a 16 y recuerda poner el Radio de Esquina a 5. Enfoca tu texto, aumenta el ancho del marco a 280 px y colócalo como se muestra en la segunda imagen.
Paso 8
Arrastra dos copias de ese rectángulo blanco redondeado y colócalas como se muestra en la siguiente imagen. Haz doble clic en el texto dentro de estos elementos y ajústalo fácilmente como se muestra a continuación.
Selecciona la Herramienta Texto (T) y añade un nuevo elemento de texto. Mantén el estilo de fuente en Regular, baja el tamaño a 10 y el espaciado de las letras a 0%, y escribe "¿Olvidaste la contraseña?". Establece el color de este nuevo texto en blanco y colócalo como se muestra a continuación.
Paso 9
Añade una copia más de ese rectángulo blanco redondeado y colócalo como se muestra en la primera imagen. Selecciona el texto, cambia su color a ROSADO, establece el estilo a ExtraBold, y luego aumenta el tamaño a 15 y el espacio entre letras a 10%.
Selecciona la Herramienta Texto (T), añade un nuevo elemento de texto y sigue los atributos de texto que se muestran en la segunda imagen.
Paso 10
Selecciona el texto "INICIO DE SESIÓN" junto con el rectángulo redondeado que se encuentra en la parte posterior y haz clic en el botón Crear componente de tu barra de herramientas.
Selecciona el texto " REGISTRARME " junto con el rectángulo redondeado que se encuentra en la parte posterior y haz lo mismo.
Concéntrate en la barra lateral izquierda y cambia al panel de Activos. Aquí puedes encontrar y reutilizar tus componentes guardados.
6. Cómo crear la pantalla de inicio de sesión de la IU de la aplicación de citas
Paso 1
Haz clic en el nombre de tu cuarto marco para seleccionarlo y luego duplícalo (Control-C > Control-V).
Paso 2
Centrémonos en el quinto cuadro. Haz clic con el botón derecho en el botón INICIO DE SESIÓN y ve a Intercambiar Instancia > Componente 2 para sustituir fácilmente tu botón INICIO DE SESIÓN por el botón REGISTRARME. Selecciona el texto dentro de este componente y reemplázalo con "INICIO DE SESIÓN".
Selecciona el botón REGISTRARME y cámbialo por el componente 1. Sustituye el texto dentro de este componente por "REGISTRARME".
Paso 3
Retira el elemento de texto "email". Selecciona el botón REGISTRARME junto con el texto blanco, mueve y ajusta estos elementos como se muestra en las dos últimas imágenes.
7. Cómo crear un prototipo de la plantilla de tu aplicación móvil de citas
Paso 1
Céntrate en la barra lateral derecha y haz clic en la pestaña Prototipo. Con el modo Prototipo activo puedes establecer conexiones entre los marcos y los elementos de tu diseño.
Empecemos con el botón "SALTAR" del primer marco. Seleccionémoslo, hagamos clic en el botón más y arrastremos el cable hasta el cuarto cuadro. Una vez creada la conexión se abrirá el panel volante de Interacción. Establece On Tap como disparador, selecciona una animación tipo Slide In de derecha a izquierda y establece el Easing a In y Out. Una vez que hayas terminado, puedes hacer clic en el botón de reproducción de la esquina superior derecha de la pantalla para visualizar tu animación.
Paso 2
Selecciona los otros dos botones "SALTAR" y conéctalos con el cuarto cuadro como hiciste con el primero. No te molestes en hacer ningún cambio en los ajustes de Interacción. Por defecto, Figma aplica los ajustes de Interacción utilizados para la última conexión.
Paso 3
Céntrate en los botones de paginación del primer marco. Conecta el segundo cuadrado redondeado con el segundo marco y el tercero con el tercer marco.
Pasa a los otros dos cuadros y conecta los cuadrados redondeados con sus correspondientes cuadros.
Paso 4
Céntrate en los botones "SIGUIENTE" y conéctalos con sus correspondientes marcos, como se muestra en la siguiente imagen.
Paso 5
Concéntrate en los dos últimos marcos. Selecciona el botón "INICIO DE SESIÓN" y conéctalo con el quinto marco. Esta vez, establece la animación en Smart Animate y mantén el resto de los ajustes como están.
Selecciona el botón "REGISTRARME" y conéctalo con el cuarto marco.
Paso 6
Selecciona el texto blanco inferior del cuarto marco y conéctalo con el quinto marco.
Selecciona el texto blanco inferior del quinto marco y conéctalo con el cuarto marco.
Por último, haz clic en el botón de reproducción para probar tus animaciones.
¡Enhorabuena! ¡Tu plantilla de aplicación móvil de citas está completa!
Así es como debería verse la interfaz de usuario de tu aplicación de citas. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar el diseño final y hacerlo tuyo. Puedes encontrar algunos kits de interfaz de usuario para iOS de Figma en GraphicRiver, con soluciones interesantes para mejorar la plantilla de tu aplicación móvil de citas.
¿Quieres saber más?
Tenemos un montón de tutoriales de Figma en Tuts+ (incluyendo nuestro curso gratuito para principiantes en Youtube), para todos los niveles, ¡échale un vistazo!
FigmaCómo cambiar varios colores al mismo tiempo en Figma
Figma4 formas de cambiar el tamaño de los elementos en Figma
FigmaCómo arreglar sombras recortadas o elementos desbordados en Figma
FigmaGuía rápida de los ajustes de relleno de imágenes de Figma
FigmaNuevo curso: Figma Grids en menos de 30 minutos
FigmaCómo crear un efecto de vidrio esmerilado en Figma
FigmaAtajos esenciales de Figma para trabajar con eficacia
FigmaMás de 21 mejores kits de interfaz de usuario para Adobe XD y Figma
Figma20 kits de interfaz de usuario de Figma para diseñadores
Adobe XDFigma vs. Adobe XD en 2020
