Supercarga de flujo de trabajo de diseño móvil en Sketch

Sketch es bastante famoso en el campo de herramientas de diseño en la actualidad. Siempre creo que una de las razones es que Sketch tiene una gran biblioteca de complementos: comunidad. Hoy, quiero presentar 2 complementos: Paddy y RenameIt que ayudarán a reducir la cantidad de tiempo que realizan acciones replicadas y agilizarán su flujo de trabajo de diseño móvil. Especialmente, si está creando un sistema de diseño, creo que lo encontrará bastante útil.

Escribo este artículo basado en mi experiencia, así que estoy realmente abierto a la discusión, para que podamos mejorar el flujo de trabajo de diseño. También probé el diseño automático antes, pero parece que no estamos juntos.

Debido a la limitación de GIF. ¡Perdón por la velocidad de las imágenes GIF en esta publicación! Puede consultar mi artículo original aquí para ver los videos de velocidad completa / lenta.

Mi antiguo flujo de trabajo de diseño actual

Pasemos al tema principal. ¿Cuál es el problema actual? ¿Le resulta familiar el siguiente flujo de trabajo de diseño?

Al abordar el diseño de la interfaz de usuario, debe preocuparse por el contenido, cómo se ve en la variante del tamaño de la pantalla. Cada vez que actualizamos contenido, tenemos que volver a diseñar todo de nuevo. Puedes verlo normal, ¿no es el trabajo de diseño? Pero si tiene que actualizar cientos de componentes, verá el dolor aquí.

Hay muchas maneras de resolver este problema, puede usar muchos complementos para organizar las capas. Pero todavía no es automático, o al menos no de la manera conveniente como en este artículo. Pasaremos de construir componentes básicos a una página completa, como el Método de diseño atómico.

Botón

Creo que es uno de los componentes más populares, así que lo intentaremos primero. Si usó el botón dinámico antes, estará familiarizado con él rápidamente. Esta es la estructura de un botón: Fondo, Texto. Agregaremos [topPadding rightPadding bottomPadding leftPadding] en el nombre de la capa de fondo. Luego, actualizará automáticamente su base de fondo en la longitud del texto. Si el relleno superior y el relleno inferior son iguales, el relleno izquierdo y el relleno derecho son iguales, puede usar la taquigrafía como CSS taquigrafía:

Sería más útil si creamos un símbolo de botón, como este:

Botón con icono

Aplica este mecanismo, podemos crear un botón con el icono dos:

Variantes de botones

Creo que está familiarizado con: botón predeterminado, botón de peligro, botón de advertencia, ... Aquí es donde el complemento Rename it será la combinación perfecta con Paddy. Fui a la situación que crea muchos símbolos de botón, luego hice algunos experimentos, luego descubrí que necesito disminuir el tamaño del botón. Ahora solo seleccionamos todo el Fondo del botón> Ajustar y reemplazar nombre de capa> Cambiar tamaño para ajustar el contenido. ¡Culo! todo está limpio de nuevo.

Componente

Ahora, crearemos componentes populares, un elemento horizontal:

Antes de bajar, quiero presentar la función de alineación automática de Paddy. Esta característica nos ayuda a alinear todo y actualizar cada vez que cada capa cambia de tamaño. Para obtener más detalles, consulte toda la hoja de trucos a continuación:

Paddy Auto Align Hoja Cheet

Al utilizar la metodología atómica, dividimos el componente en: Avatar e Información. La información incluye título y subtítulo:

Gracias a la función de Alineación automática de Paddy, puedo centrar horizontalmente Avatar e Información. El espacio entre Avatar e Información es de 16px, por lo que el grupo debe tener el nombre "[16h m]". El espacio entre Título y Subtítulo es 2px, y dos elementos están alineados a la izquierda, por lo que agregamos "[2v l]" al grupo Información. Finalmente, la estructura del grupo debería ser así:

Componentes más complejos

Ahora construimos un componente anidado de componentes más complejos, una sección Lista:

Sigue el espíritu de descomponer cualquier cosa, lo dividimos en componentes más pequeños:

Ahora, veremos qué sucede cuando agregue un nuevo elemento:

El nuevo elemento se alineará en el grupo como los elementos. Super conveniente!

Página / Pantalla

Ahora que sabemos cómo construir algunos componentes, estamos listos para construir una página completa. Crearemos 2 páginas: en la pantalla de embarque y en la pantalla de inicio:

Inducción

Ahora, probaremos esta pantalla en varios tamaños de pantalla:

Pantalla de inicio

Dividimos la pantalla en 3 secciones principales:

  • Encabezado de página: título de la página y avatar de usuario
  • Sección horizontal.
  • Seccion vertical.

Agregaremos más detalles para ver cómo se construye cada componente:

El título de la página y el avatar son un centro de alineación vertical.

Sección horizontal

  • El espacio entre Título y Lista es 24px → [24v l].
  • El espacio entre el elemento en la lista es 16px → [16h t].

Seccion vertical

  • El espacio entre Título y Lista es 24px → [24v l].
  • El espacio entre el elemento en la lista es 24px → [24v l].

Finalmente, tenemos una página que organiza y alinea automáticamente sus componentes en su camino. Ahora complicaremos un poco la lista:

  • Cambiar el tamaño de la miniatura en la sección horizontal.
  • Agregue más elementos en la sección vertical.

Bum! ¡Todo está limpio de nuevo!

Ahora puedo probar todo de forma rápida. Entonces puedo concentrarme en crear experiencia en lugar de empujar cada píxel. Además de eso, también mantiene la precisión de un componente y la consistencia entre ellos.

Conclusión

Complementos utilizados

  • Arrozal
  • Renombrarlo

4 cosas para recordar

Divide tu página en partes más pequeñas como en este libro Atomic.

Tamaño de fondo automático agregando el tamaño [superior derecha inferior izquierda] al nombre de la capa de fondo.

Alinee todo en un grupo agregando esas cadenas al nombre del grupo principal:

  • Vertical: [t] => arriba, [m] => centro, [b] => abajo
  • Horizontal: [l] => izquierda, [c] => centro, [r] => derecha

Espacie todo en un grupo agregando esas cadenas al nombre del grupo principal:

  • Vertical: [Xv], es decir, [16v] => el espacio entre los niños en el eje vertical es 16px.
  • Horizontal: [Xh], es decir, [24v] => el espacio entre los niños en el eje horizontal es de 24px.

Me inspiró este genial artículo, apliqué este mecanismo similar a mi flujo de trabajo y descubrí algunas buenas prácticas como mencioné anteriormente.

¡Gracias por leer! ¡Feliz bosquejo!

Este artículo está publicado originalmente en mi sitio web aquí. ¿Quieres saber más? Soy Duy Luong, diseñador de productos y desarrollador front-end. ¡Mira mi cartera aquí!