Crea un panel de control sensible con Figma

Sep 11, 2025

Cómo

Figma es una herramienta de gráficos para los diseñadores de UI. Tiene una interfaz simple y le permite colaborar en el trabajo con sus compañeros de equipo. Si desea trabajar fuera de línea, puede elegir usar la aplicación de escritorio. Alternativamente, FIGMA trabaja en cualquier sistema operativo (Hello, Windows), por lo que no tiene que instalar nada en absoluto. Y comenzar es fácil: puede importar sus diseños de diseño anteriores desde el boceto.

Elija un constructor de sitios web: 16 herramientas principales

En FIGMA, puede crear todo lo que necesita para su interfaz, desde iconos vectoriales ilustrados hasta diseños personalizados. La edición multijugador podría ahorrar mucho tiempo para los equipos de diseño, ya que significa que todos los miembros del equipo pueden trabajar en el mismo diseño al mismo tiempo. Y estos no son incluso todas sus grandes características.

En este tutorial, le mostraré cómo configurar con Figma, luego caminar por cómo crear una pantalla de aplicación móvil, paso a paso. En este caso, estaremos diseñando el tablero de instrumentos para una aplicación de estadísticas ficticias. Cuando haya terminado, podrá crear diferentes interfaces en Figma y trabajará con su equipo en tiempo real.

01. Registrarse

En primer lugar, necesitas inscribirse en www.figma.com . Decida si desea utilizar la herramienta en su navegador o descargue la aplicación de escritorio. Para descargar la versión de escritorio, vaya al menú de hamburguesa en la esquina superior izquierda y haga clic en 'Obtener la aplicación de escritorio'.

02. Crea un tablero de arte y cuadrícula.

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Agregue una cuadrícula de referencia para ayudarlo a colocar sus elementos armoniosamente (haga clic en la imagen para ampliar)

Pegar A Para crear un tablero de arte. Puede elegir uno de los ajustes preestablecidos o crear su propio tamaño personalizado. Para este proyecto, vamos a usar Telefono y GT; iPhone 7 (375x667px). Para crear una cuadrícula, primero seleccione el tablero de arte. Luego, en la barra lateral derecha, encuentre "Grid de diseño" y presione '+'. Configuración del recuento de columnas: 6, canaletas: 16, márgenes: 8 y tipo: estiramiento.

03. Dibuja un rectángulo para el fondo.

Vamos a empezar con el fondo. Prensa R Para abrir la herramienta Rectángulo y dibujar un rectángulo # 5F98FA sin bordes. Establezca las dimensiones a 375x363 utilizando el panel Propiedades en el lado derecho.

04. Añadir una barra de estado

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Establezca el gradiente para la barra de estado con el panel de propiedades a la derecha en la pantalla. Aquí puede ajustar las opciones de color para crear un gradiente lineal (haga clic en la imagen para ampliar)

A continuación, queremos colocar una barra de estado en la parte superior de la pantalla. Prensa R Para configurar el ancho: 375, altura: 64, posición (x: 0; y: 0). Para nuestra barra de navegación, coloquemos el relleno de gradiente con el panel del inspector de propiedades a la derecha. Encuentre la opción 'Rellenar', presione la vista previa del color y seleccione 'lineal' en el menú desplegable. El color en la parte superior debe ser # 77A6F7, y en la parte inferior # 5A93F5 (Opacidad 100 por ciento para ambos).

05. Importar una barra de estado de iOS

Desafortunadamente, FIGMA no incluye elementos IOS II de forma predeterminada. Sin embargo, hay un archivo llamado 'archivo de muestra', que es un diseño de aplicaciones de iOS, por lo que podemos pedir prestada la barra de estado de eso. Copie la opción Barra de estado de luz, péguela en el archivo actual y colóquelo en (x: 0; y: 0). Utilizando la herramienta de texto ( T ), haga clic en suboard para agregar un encabezado a la barra de navegación. Me he ido a avenir pesado, 15px, #fffffff. Alinee el encabezado por Centro Horizontal, Y: 33.

06. Crea un icono de atrás

A la izquierda de la barra de navegación debe ser un ícono 'atrás'. Voy a crear esto desde cero. Cree un rectángulo 14x14px, agregue una rotación de 45 grados, x: 14; Y: 43. Duplicar este rectángulo y colóquelo en x: 18; Y: 43. Seleccione ambos rectángulos y debajo del menú superior, vaya a GRUPOS BOOLEAN & GT; Restar la selección. Después de eso, vuelva a los grupos booleanos y GT; Aplanar la selección, o presione cmd + e .

07. Terminar el icono de la flecha

Nuestro icono de flecha está casi terminado. Ahora solo necesitamos establecer el ancho y la altura a los valores numéricos, en mi ancho de la caja: 12px; Altura: 20px. El paso final es establecer el color de llenado a #FFFFFF.

08. Crea un gráfico

Ahora vamos a crear un gráfico. Primero, pondremos en algunas pautas. Seleccione la herramienta Rectángulo ( R ) y set x: 24 y: 147; Ancho: 1; Altura: 166; Llene el color # B3DCFF y la opacidad del 20%.

Duplica este rectángulo cuatro veces con márgenes de 80px. En la parte inferior de cada guía, debemos agregar una etiqueta de fecha usando capas de texto ('2 de febrero', '9 de febrero', '16 de febrero', '23 de febrero', 'Mar 1'). He usado Avenir Medium, a 11px, # C1D8FF.

09. Hacer la línea de datos.

Usando la herramienta de la pluma ( PAG ) Necesitamos crear un vector para representar la línea de datos. Haga clic y arrastre para crear un punto Bézier. Esta forma debe tener un accidente cerebrovascular 4px y sin relleno, #FFFFFF.

Agreguemos una sombra de caída para ayudar a que se destaque la línea: haga clic en el '+' en la sección Efectos y elija 'Sombra Drop Shadow'. Use las siguientes configuraciones para hacer una sombra suave y elegante: desenfoque: 3px, y: 7px, # 2951FF, opacidad: 100%.

10. Añadir detalle a la gráfica.

Use the Text tool to add values to the places the guidelines intersect with the data line — Use la herramienta de texto para agregar valores a los lugares que las pautas se intersecan con la línea de datos

En los puntos donde las directrices se intersecan con la línea de datos, vamos a agregar círculos. Esta vez usaremos la herramienta Ellipse ( O ), que encontrará en el menú desplegable que acompañe la herramienta de rectángulo. Dibuje círculos de 8x8px en cada intersección y configure el color de relleno a # 5F98FA. Necesitamos agregar un derrame cerebral: haga clic en el botón '+' junto a la sección Stroke, ajuste el peso: 2px y alinee: Centro.

11. toques finales

Para finalizar la sección del gráfico, solo necesitamos agregar valores a nuestros puntos de intersección. Con la herramienta de texto ( T ) Seleccione Avenir Black, 11px, # 1F4991.

12. Tres cajas informativas.

Debajo del gráfico de línea, vamos a crear tres celdas que muestren más información. Utilizando la herramienta de texto ( T ) Vamos a crear nuestro primer encabezado: 'valor estimado de sus acciones': x: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. A la derecha de la celda, el valor '$ 1,115', estilo de texto: avenir pesado, 22px, # 5f98fa, alineación de texto: izquierda, x: 287; Y: 387.

13. Haciendo un separador.

Dibuje un rectángulo que sea 1px en altura y abarca el ancho completo de la pantalla (# F5F5F5; X: 0; Y: 435) - Esto actuará como el separador entre las células. Seleccione el encabezado, el valor y el separador y cree un grupo ( cmd + g ).

14. Añadiendo encabezados

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Debajo de la gráfica serán tres células que muestren piezas de datos de llaves (haga clic en la imagen para ampliar)

Duplique este grupo para que tenga tres grupos con una distancia vertical de 24px entre ellos. Cambie el segundo encabezado a 'Miembros Totales' y el tercer grupo que se dirige a 'Amigos firmados' y actualizar los valores relevantes.

15. Dibuja y alinee otro rectángulo.

Ahora vamos a agregar una llamada a la acción. Dibuja un rectángulo debajo de la última celda, ancho: 195; Altura: 44, distancia de eje Y del último separador 21px.

Usando las herramientas de alineación, alinee el rectángulo por centro horizontal. Luego, coloque el color de relleno a # 5F98FA y redondez a 22 (encontrará este campo después de 'rotación' en el panel Propiedades). Después de eso, agregue un efecto de sombra de caída (color: #ABDAFF; opacidad: 100%; y: 5; borroso: 11).

16. Poner un texto en el botón.

Agregar texto al botón usando la herramienta de texto ( T ): '¡Obtener más acciones!' Configure esto en Avenir Black, 15px, #FFFFFF. Alinee el texto por el centro del botón. Finalmente, agrupa todos los elementos y nombrarlos correctamente.

17. Haz que responda.

Ahora vamos a ajustar nuestro diseño, por lo que responde a diferentes iPhones (320x568, 375x667 y 414x736). Para hacer esto, tenemos que usar restricciones, que encontrará en el menú Propiedades a la derecha.

18. Conseguir el diseño correcto

Si selecciona 'Izquierda' o 'Derecha' en la desplegable horizontal, el grupo se conectará a su lado elegido de la pantalla y no se estirará. Si selecciona 'Centro', el grupo o la capa se extenderá para que llena el ancho de la pantalla. Tenemos que hacer que la barra de estado fluya en su lugar, por lo que queremos la opción 'derecha y amp; izquierda' (o mantenga presionado 'cmd' y haga clic en las barras izquierda y derecha en el diagrama).

19. probarlo

Probemos esto. Con la barra de estado seleccionada, presione la opción 'derecha y amp; izquierda'. Seleccione un tablero de arte y, en lugar de iPhone 7, elija iPhone 7 Plus. Funciona correctamente incluso si selecciona el tamaño del iPhone SE.

20. Revisa cada capa

Consideremos el resto de las capas. Para el fondo de la barra de navegación, queremos usar 'derecha + izquierda'. Para el título de la barra de navegación: 'Centro'. Para el icono de la flecha trasera, es mejor usar la opción 'izquierda', de esta manera, la flecha se fijará en el lado izquierdo de la pantalla.

21. Establecer el gráfico de línea

Ahora vamos a configurar el gráfico de línea. Para las directrices, las fechas y los círculos de intersección, queremos usar 'centro'. Para la línea de datos y el fondo, usaremos 'derecha y amplificador; izquierda'. En la sección de datos adicionales, queremos usar 'Izquierda' para cada título, 'Derecha' para cada valor, y 'Derecho y amplificador; Izquierda' para las líneas del separador. Para el grupo de botones CTA, vamos a establecer 'centro'.

22. Establecer las restricciones verticales.

El paso final es establecer las restricciones verticales. La barra de estado, la barra de navegación, las líneas de datos y los círculos de intersección y los títulos asociados deben establecerse en 'TOP'. El fondo del gráfico, las fechas y las directrices debe establecerse en 'Center'. Cada grupo de datos adicionales debe configurarse en 'Center' vertical, y el grupo de botones CTA debe configurarse en 'Inferior'.

23. Haz que funcione para cada tamaño de pantalla.

Vamos a duplicar el tablero de arte dos veces, y configuremos uno al tamaño de un iPhone 7 Plus y el otro al tamaño en un iPhone SE. En la versión más, deberá reducir la brecha entre la última celda de información adicional y el botón CTA seleccionando el grupo de celdas y aumentando su altura de 195 a 225. En la versión SE verá que las celdas de información se desbordan El botón CTA, por lo que tenemos que seleccionar el grupo de celdas y reducir su altura a 150.

24. ¡Todo hecho!

¡Oye, felicidades! Hemos terminado toda la pantalla de la aplicación en Figma. Por ahora, solo verifique que todo esté hecho, y puede sentarse y sentirse como un experto.

Este artículo fue originalmente destacado en revista neta emisión 288; Comprarlo aquí.

Artículos relacionados:

El nuevo concepto de Behance se parece a una aplicación asesina
Diseño para impacto social.
8 consejos para las entrevistas de ECE Tech