Este encabezado se creó utilizando la tabla Uber

Una forma hacky, pero útil, de construir tablas de datos complejas en Sketch

Si trabaja como diseñador de cualquier tipo, es probable que tenga que presentar tablas de datos en algún momento de su carrera. Las tablas de datos son el epítome del trabajo repetitivo. Estados en blanco Hover estados. Formato condicional. Celdas con un borde inferior rojo. Entonces. Muchos. Estados

Además, es probable que esté utilizando Sketch para su trabajo de diseño. El sistema de símbolos de Sketch y el panel de anulación permiten a los diseñadores crear sistemas de diseño escalables. En general funciona muy bien. Pero todavía faltan algunas cosas cruciales. En particular, no puede anular ninguna configuración, como anchos de borde y colores, unidos a una forma básica contenida dentro de un símbolo.

El diseño de Über Table intenta solucionar este problema. Así es cómo.

He desglosado una mesa en una estructura atómica.

Canalicemos a Brad Frost por un momento y pensemos en las partes de una mesa.

  1. Organismo. La tabla de datos en sí. El de arriba es bastante simple.
  2. Moléculas. Una sola celda. En el sistema Über Table, esto se llama la "Célula maestra". Este símbolo se puede usar tantas veces como sea necesario y ha configurado cuidadosamente la configuración de cambio de tamaño para garantizar que sea infinitamente escalable.
  3. Átomos Las partes de una celda de la tabla: los bordes superior, derecho, inferior, izquierdo y el color de fondo de la celda. Estos están destinados a representar los diferentes componentes del modelo de cuadro de borde. Hay símbolos para cada uno de estos átomos.

4. Símbolos atómicos. Todos los símbolos se han colocado cuidadosamente dentro de la celda maestra. Aprovechan la configuración de posición de Sketch para garantizar que los bordes permanezcan fijos en la posición más externa de la forma.

Cambiar el tamaño de la celda maestra: ir a la ciudad, no se romperá. Espero.

Cada símbolo atómico se ha diseñado para su ajuste a través del panel Anulaciones.

Cada átomo de la molécula celular está representado por un símbolo. Color superior, derecho, inferior, izquierdo y BG.

¿Quieres cambiar un color o un ancho de píxel? Use el panel Anulaciones. ¿No ves lo que quieres en el panel? Cree otra versión del píxel o color de fondo dentro de la biblioteca para su propio proyecto.

Arriba: elija grosores y colores de píxeles de borde para la celda maestra en el panel de anulaciones.

Detalle

5. El archivo de la biblioteca compartida de Uber Table contiene todos los recursos que necesita para personalizar su símbolo.

Cada componente de la celda tiene una configuración ajustable que se asigna a un símbolo dentro de la biblioteca.

Paso a paso: cómo construir una tabla usando la biblioteca

¿Desea crear su propia tabla con la biblioteca de tablas Über?

Paso 1: configura tu celular

Esto implica ajustar los bordes a la configuración que desee.

Paso 2. Crea tu fila

Tome su celda única y duplíquela varias veces horizontalmente para crear su fila.

Paso 3. Repita su fila verticalmente

Tome toda la fila que acaba de hacer y duplíquela también.

Paso 4: personaliza tus celdas

Ajuste sus celdas para reflejar los estados que necesita para su diseño. Puntos adicionales si usa un complemento como Automatizar para dar a cada celda un nombre Col / Row único.

¡Eso es! Descarga la biblioteca y pruébalo tú mismo.

¡Descarga la Uber-Table-Library aquí o desde Github!

Hay un tutorial y una tabla de muestra incluidos en el archivo.

¿Que sigue?

Estoy experimentando con otra versión de este patrón que aprovecha la configuración de Sombra del objeto para dibujar el borde, con configuraciones para las sombras "dentro" y "fuera". Esto parece (hasta ahora) ser más eficaz que el método de un solo píxel.