Documentación
Las piezas con las que armas una pantalla: qué hace cada una y qué se le puede cambiar.
Un texto, de un rótulo pequeño a un titular.
Puedes cambiar: El texto, el tamaño, el color, la alineación, la tipografía, el peso, la cursiva, el subrayado y el tachado. También puede ir en dos tonos: los decimales, la primera palabra o la última con otro color.
Un botón que hace algo al tocarlo: ir a otra página, volver atrás, abrir una hoja inferior o abrir un enlace web.
Puedes cambiar: El texto, el color de fondo, las esquinas, el ícono (al inicio, al final o separado) y lo que hace.
Un ícono suelto, de una biblioteca de más de 6.600 íconos de Material, o un logo a color (pagos, cripto, banderas y redes).
Puedes cambiar: El ícono, el tamaño y el color.
Una foto o imagen. Subes la tuya desde tu computadora (hasta 8 MB).
Puedes cambiar: La foto y cómo se ajusta al espacio (cubrir, contener o estirar).
Un botón redondo con solo un ícono: volver, buscar, compartir.
Puedes cambiar: El ícono, el color de fondo y el color del ícono.
Una línea que separa partes de la pantalla, con un texto opcional en el medio («o», «o continúa con»).
Puedes cambiar: El color, el grosor y el texto.
Una etiqueta pequeña para un estado, un contador o una novedad.
Puedes cambiar: El texto, los colores y las esquinas.
El botón de acción flotante de Material, la acción principal de una pantalla.
Puedes cambiar: El ícono y los colores.
Un ícono que alterna entre dos estados al tocarlo: favorito, guardado, me gusta.
Puedes cambiar: Si empieza activado, el ícono de cada estado y los colores.
Un campo para escribir. En la Vista previa se escribe de verdad.
Puedes cambiar: El texto de ayuda y el estilo del campo.
Un menú desplegable para elegir una opción de una lista.
Puedes cambiar: Las opciones, la opción elegida, el color de fondo, el borde y las esquinas.
Una casilla para marcar, con su texto.
Puedes cambiar: El texto y si está marcada.
Un botón de opción: uno entre varios.
Puedes cambiar: El texto, si está elegido y el color.
Un interruptor de encendido y apagado, con su texto. En la Vista previa se prende y se apaga.
Puedes cambiar: El texto y si está encendido.
Un deslizador para elegir un valor entre un mínimo y un máximo.
Puedes cambiar: El valor, el mínimo, el máximo, el color y si se muestra el número.
Un contador con botones de menos y más, como el de la cantidad de un producto.
Puedes cambiar: El valor, el mínimo, el máximo, el paso y el color.
Un campo de código o PIN, con una casilla por dígito.
Puedes cambiar: La cantidad de dígitos, si se ocultan y el color.
Un calendario. Cuatro estilos: mes, semana, selector de fecha y mes con puntos.
Puedes cambiar: El estilo, el color, si la semana empieza en lunes, la navegación, el botón «hoy» y los días marcados.
Una hilera de colores para elegir uno, en círculos o cuadrados.
Puedes cambiar: Los colores, cuál está elegido, la forma, el tamaño, la separación y el anillo.
Un teclado numérico, para montos o códigos. En la Vista previa escribe en un campo.
Puedes cambiar: El estilo de las teclas, la tecla de abajo a la izquierda, las letras, el largo máximo y los colores.
Un teclado en pantalla, de iOS o de Android, claro u oscuro, para diseñar el momento en que se escribe. Escribe en el campo que elijas.
Puedes cambiar: La plataforma, si es oscuro, la distribución, los textos de la barra espaciadora y de entrar, y si va pegado abajo.
Una fila de lista: título, descripción, ícono al inicio y algo al final.
Puedes cambiar: El título, la descripción, el ícono del inicio, lo que va al final y los colores.
Una tarjeta que agrupa otros widgets sobre un fondo con esquinas y sombra.
Puedes cambiar: El color, las esquinas, la sombra y el borde.
Una persona o una marca en un círculo o cuadrado: foto, iniciales o ícono.
Puedes cambiar: El tipo, las iniciales, el ícono, la forma, el tamaño y los colores.
Una etiqueta para elegir, filtrar o marcar. En la Vista previa se selecciona.
Puedes cambiar: El texto, si está elegido, el tipo, el ícono, el botón de cerrar y los colores de cada estado.
Un número destacado con su nombre y su variación, para un panel.
Puedes cambiar: El ícono, el valor, el nombre, la variación y los colores.
Una tarjeta de crédito o débito que se da vuelta al tocarla y muestra el CVV por detrás.
Puedes cambiar: El estilo, el color o degradado, la marca, el banco, el número (con o sin máscara), el titular, el vencimiento, el CVV, el chip, el pago sin contacto y si se da vuelta.
La barra superior de una pantalla, con título, ícono al inicio y acciones. Se queda fija arriba del marco.
Puedes cambiar: El título, la variante, cómo se comporta al desplazar, los íconos, si el título va centrado, los colores, el borde y la sombra.
La barra de navegación de abajo, con pestañas. En tablet puede volverse un riel lateral y en escritorio un menú, con el modo adaptativo.
Puedes cambiar: Las pestañas, la elegida, el modo adaptativo, los colores, las etiquetas, la sombra y el borde.
Pestañas que cambian el contenido de lo que tienen debajo. Cada pestaña tiene su propio contenido.
Puedes cambiar: Las pestañas, la elegida, la variante, los colores, si se desplazan y dónde va la barra.
Un menú lateral de navegación, abierto o plegado, con buscador, un aviso y un pie con el nombre y el correo de la persona.
Puedes cambiar: Los elementos, el elegido, si está abierto, si es oscuro, el título, el buscador, el aviso, el pie y los colores.
Una hoja inferior que sube sobre la página. Una página tiene como máximo una. Se abre desde un botón.
Puedes cambiar: El color, las esquinas, el asa, el fondo atenuado, la sombra y el tamaño.
Un gráfico: barras, barras horizontales, líneas, área, torta, dona o radar, con hasta tres series.
Puedes cambiar: El tipo, las etiquetas, los valores, los nombres de las series, los colores, la cuadrícula, la leyenda, las curvas y el texto del centro.
Una barra de progreso, también en segmentos o indeterminada.
Puedes cambiar: El valor, el estilo, la etiqueta, los colores, el alto, las esquinas y los segmentos.
Un indicador de progreso circular, con un número en el medio si quieres.
Puedes cambiar: El valor, el estilo, si es indeterminado, el color, el grosor y la etiqueta.
Un indicador de carga animado, para las esperas.
Puedes cambiar: El estilo, el color y el contenedor.
Una calificación con estrellas, con la cantidad de reseñas al lado.
Puedes cambiar: El valor, la cantidad de estrellas, el color, el número de reseñas y el tamaño.
Un temporizador que cuenta el tiempo, por ejemplo para un código que vence.
Puedes cambiar: El modo, la duración, si arranca solo, la etiqueta y el color.
Pone sus widgets uno debajo del otro. Es la base de casi toda pantalla.
Puedes cambiar: El espacio entre widgets, la alineación, el relleno, el tamaño y el fondo.
Pone sus widgets uno encima del otro, cada uno en la posición que tú le des.
Puedes cambiar: El tamaño, el relleno y el fondo; la posición de cada widget se cambia arrastrándolo.
Una fila que salta de línea cuando no cabe más: etiquetas, filtros, fotos.
Puedes cambiar: El espacio entre widgets, el espacio entre líneas, la alineación y el tamaño.
Páginas que se deslizan una a una, como una presentación o una introducción.
Puedes cambiar: La página que se ve, el indicador de puntos y sus colores.
Un carrusel de tarjetas que se desliza, con la siguiente asomando.
Puedes cambiar: La página, qué parte de la siguiente se ve, el indicador, la reproducción automática y su intervalo, el eje, el bucle y el efecto de tamaño.
Una tarjeta con dos caras que se da vuelta al tocarla.
Puedes cambiar: El eje del giro, la velocidad y si se da vuelta al tocarla.
Una pila de tarjetas que se pasan deslizando, como una baraja.
Puedes cambiar: Cuál tarjeta está arriba; el contenido de cada una se arma dentro.
Una notificación que se abre al tocarla y muestra su detalle, con un mini gráfico.
Puedes cambiar: Si está abierta, si se abre al tocar, la velocidad, el ícono, el título, el subtítulo, el monto, el rango de fechas, el total, la tendencia, los valores del gráfico y el botón.
Hace que lo que lleva dentro reaccione al pasar el mouse: cambia el fondo, el borde o el tamaño. Para escritorio y web.
Puedes cambiar: El fondo, el fondo al pasar, el borde, el color del borde al pasar y cuánto crece.