Tutoriales de croquis

Configurar un sistema de diseño

Aprenda a personalizar y usar las mejores prácticas de Sketch como un sistema de diseño robusto que le ahorrará cientos de horas en el próximo proyecto.

Esto es parte de Frames for Sketch: artículo de tutorial que lo ayudará a comenzar con el Sistema de diseño de marcos y personalizarlo para que coincida con las pautas de su marca, además de ayudarlo a aprender algo nuevo sobre las características y trucos de bocetos que quizás no conozca.

Contenido de la guía:

  1. Descripción general: un vistazo rápido a las secciones principales.
  2. Colores: aprenda a agregar y usar colores.
  3. Tipografía: reemplaza las fuentes del sistema.
  4. Componentes - Personalización de símbolos.
  5. Complementos: lista de complementos útiles para controlar marcos.
  6. Resumen: casos de uso y preguntas frecuentes.

1. Descripción general - Actualizado

Frames es un producto hecho por un diseñador con la idea de implementar las últimas características de Sketch en una única biblioteca de interfaz de usuario combinando las mejores prácticas y técnicas útiles que pueden ahorrar mucho tiempo a largo plazo para cualquier persona familiarizada con la aplicación de Sketch.

El sistema está diseñado para ser liviano y adaptable a las marcas, por eso muchos equipos lo encuentran una herramienta realmente útil para construir sus propias bibliotecas basadas en él.

El archivo Master Frames se divide en 5 páginas principales que contienen una gran cantidad de contenido prefabricado: componentes, estilos y diseños prediseñados que se pueden personalizar y usar para hacer su propio kit de interfaz de usuario o un sistema de diseño (según su preferencia).

Nota: Frames utiliza las fuentes de Google Roboto y Muli de forma predeterminada, así que asegúrese de instalarlas antes del primer lanzamiento.
  • Comience: este es el punto de partida para los recién llegados, aquí puede ajustar sus colores, estilos y fuentes rápidamente para que coincidan con su marca.
  • Guía de estilo: el esquema de color, la hoja de componentes, los iconos, las maquetas y los estilos de tipo de letra todos juntos le sirven como la única fuente de verdad para su proyecto.
  • Web UI Kit: colección de diseños prediseñados creados con componentes del sistema que se pueden personalizar y utilizar libremente para la creación rápida de prototipos y para convertir los alambres de estilo azul en tomas de regate agradables.
  • Gráficos y tablas: los marcos contienen un conjunto de 32 componentes de Gráficos + Tablas que se pueden personalizar, redimensionar y reutilizar fácilmente para que pueda concentrarse en trabajar con datos en lugar de puntos vectoriales.
  • Símbolos: todos se agrupan por categorías y se ordenan según el tipo de símbolo (colores, botones, entradas, etc., cubriremos todos los grupos un poco más).

Sí, estas 5 páginas son un patio de recreo perfecto para diseñar rápidamente aplicaciones y sitios web, lo que me ahorra toneladas de horas como diseñador. Pero ahora pasemos a la página Comenzar para comenzar a preparar nuestro sistema para que coincida con los conceptos básicos de nuestra Marca.

2. colores

Los marcos de forma predeterminada contienen diez colores que se pueden cambiar globalmente en todo el documento, solo necesita seleccionar Capas de relleno y sobrescribirlas con nuevas propiedades, luego aplicar los cambios y listo, todo se sincroniza, y el nuevo color ahora está disponible para todos los componentes que tienen un atributo de Color en el menú de anulaciones!

Nota: También puede usar degradados a nivel mundial, solo convierta sus capas en símbolos y establezca un nuevo tamaño de símbolos en 100x100.

Para agregar más colores, vaya a la página Símbolos y copie cualquier mesa de trabajo de color. Cópiela / péguela y asígnele un nuevo color.

Los elementos del sistema recién nacidos, incluso si son solo colores, deben seguir una estructura de nomenclatura, por lo que el elemento se ajusta al grupo correcto, piense en ello como una ruta para describir la estructura de carpetas de su sistema, así que asegúrese de realizar los cambios. Por ejemplo, Color / Naranja permite encontrarlo en anulaciones de cualquier otro elemento del sistema que tenga propiedades de Color.

NOTA: el estilo de relleno se usa en todo el sistema y se aplica a todos los componentes como un atributo de color, esto también incluye formas de estilo de borde.
(Como botones, alertas, insignias o etiquetas).

3. tipografía

Los marcos de forma predeterminada utilizan una combinación de fuentes simple Roboto + Muli organizada de encabezados H1 a H5, y una combinación de fuentes simple siempre puede ayudarlo a construir una tipografía llamativa para su proyecto o simplemente dribbble shot. Por lo tanto, puede personalizar libremente ambas fuentes o eliminar una de ellas si es necesario.

El sistema de tipografía está integrado en estilos compartidos con una estructura simple:
* H1 / Nombre de fuente / Alineación / Color

Para cambiar el sistema de fuentes actual, simplemente sobrescriba las capas de texto predeterminadas con una nueva configuración y difunda los cambios en la tierra de Marcos. Al hacerlo, no olvides sobrescribir el nombre de fuente anterior del menú de estilos de texto compartido con un complemento súper útil: Sketch Text Style Master, solo busca el nombre de fuente que deseas reemplazar. Y al hacer esto, puede aplicar fácilmente nuevas propiedades de texto a todos los diseños del Kit de IU.

NOTA: Los componentes como los botones contienen símbolos de texto que no serán sobrescritos por ningún cambio aquí, cubriremos cómo personalizarlos en la siguiente sección.

Ahora, agreguemos algunas fuentes nuevas al sistema, para que sigan nuestra estructura con estos simples pasos:

1. Elija o duplique todas las capas de cualquier fuente: realice los cambios que necesite y no sobrescriba los estilos compartidos por ahora.

2. Usando el cambio de nombre, el complemento activa el comando "buscar y reemplazar" en las capas seleccionadas y reemplaza el nombre de fuente predeterminado en la estructura de nombres con la nueva. (Ejemplo: de H1 / Roboto .. a H1 / Arial ..)

3. Y genere nuevos estilos a partir de las capas de texto seleccionadas, para ello use el complemento Generador de estilos y presione "generar estilos compartidos", y listo, la nueva fuente está lista.

Rename It y Style Generator son herramientas beneficiosas para este enfoque.

Una vez que haya terminado con la personalización, puede guardar los estilos de fuentes actuales como una plantilla para importarlos rápidamente a cada nuevo proyecto utilizando el plugin de estilo compartido, ahorrará una gran cantidad de tiempo, obtenga más información sobre cómo dominar el texto en este artículo.

4. Componentes

Los componentes básicos del sistema son componentes receptivos que se hacen usando símbolos que comparten un enfoque sistemático único, para seguir una estructura de ruta y formar grupos lógicos. Todos los símbolos se dividen en categorías por diseño.

La mayoría de los símbolos se construyen con otros símbolos. Cuando el símbolo está anidado dentro de otro símbolo, representará el atributo del estilo visual que se puede ajustar rápidamente utilizando el menú de anulaciones. (Como Color, Estado, Forma o Dispositivo).

Ahora echemos un vistazo más de cerca a los grupos de símbolos para aprender cómo podemos personalizarlos a escala.

Colores

El símbolo más simple y uno de los más útiles: solo un bloque que almacena un solo color de Relleno. (ancho x alto = 100px x 100px)

Sugerencia: Use un color blanco de 50% de opacidad para que sus elementos, como los iconos, se vean transparentes.

Texto

Los símbolos de texto se usan para botones, entradas y áreas de texto; para cambiarlos, se sobrescriben los valores predeterminados de las capas de texto y los cambios se sincronizarán con el elemento principal.

Consejo: utilice la opción Ajustar contenido al cambiar el tamaño para ajustar el ancho del contenedor de símbolos al sobrescribir los valores predeterminados.

Botones

Los botones están ordenados por tamaño y están disponibles en las siguientes variaciones: Básico, Icono a la derecha, Icono a la izquierda, Tabulador y Botón de texto. También puede encontrar el tipo de botón Flexible con el ícono que siempre permanece firmemente unido a uno de los lados del texto; Estos botones son bastante complicados y están hechos con esta técnica.

Para cambiar la apariencia de un botón, debe cambiar el atributo Forma que contiene las propiedades de Estado y Color, aquí un ejemplo de cuántas variaciones de un solo botón puede lograr anulando estos atributos usando las propiedades predeterminadas.

Formas

Los campos de entrada pueden ser descriptivos (con una etiqueta / título adicional) o tener un aspecto básico similar a un rectángulo. Para personalizar las imágenes de las entradas, use el símbolo de estado, sobrescriba cualquier estilo de capa de estado para aplicar sus cambios.

Al cambiar el atributo de estado de entradas, podrá cambiar rápidamente entre el aspecto básico y el material.

Forma

Los símbolos de forma representan la forma de un elemento como Botones, Insignias, Etiquetas y notificaciones: cada forma puede ser de estilo Relleno o Borde, y el atributo de color de Relleno se aplica a ambos.

Nota: Los símbolos de forma se pueden personalizar fácilmente cambiando las propiedades del radio de la capa del Contenedor. Las formas de estilo de borde se hacen usando contornos con propiedades de resta, así que asegúrese de cambiar el radio de ambas capas fusionadas.

Estado

Los símbolos de estado se usan para describir las interacciones y transformaciones de elementos, como los estados Hover, Active o Disabled para botones o entradas, y puede manipularlos para adaptar sus elementos a la situación actual de la interfaz.

Para actualizar los estados del botón o entrada, debe actualizar el estilo de las capas. También puede agregar efectos adicionales a los símbolos, por ejemplo, puede agregar un símbolo de sombra a cualquier estado de desplazamiento para que parezca flotante.

Datos

Los datos son un lugar para elementos de interfaz de usuario de segunda prioridad que sirven para proporcionar al usuario información relevante y describen la situación actual de la interfaz con la ayuda de comentarios positivos, negativos o de advertencia.

Íconos

Todos los íconos se basan en una cuadrícula de 24 píxeles, tienen un estilo muy similar al material y tienen un atributo de color que siempre coincide con su esquema de color, por lo que siempre que vea un elemento de ícono dentro de un botón o entrada, sepa que puede intercambiarlo fácilmente con cualquier otro ícono de la lista o cambiar su color.

Los íconos usados ​​con más frecuencia están hechos en dos estilos: Relleno y Trazo.

Maquetas

Las maquetas se utilizan para presentar su contenido visual, como fotos, hermosos fondos y pantallas de dispositivos, puede cambiar la apariencia de la maqueta cambiando el atributo Dispositivo.

Usando las opciones de Pantalla, puede agregar superposiciones para oscurecer su imagen con un degradado de blanco a negro o poner el atributo de relleno como un tinte para aumentar la legibilidad del texto sobre las fotos.

Los marcos incluyen maquetas de iPhone 7, Macbook y iPad Air hechas con la ayuda de recursos de diseño de Facebook.

Puede agregar sus maquetas y una capa PNG a un símbolo y establecer las proporciones correctas para que el símbolo de pantalla coincida con la imagen de los dispositivos, obtenga más información sobre cómo usar las maquetas aquí y no se olvide de tomar un archivo gratuito.

5. Complementos

Los marcos se pueden controlar y ampliar mediante complementos. Esto significa que puede hacer movimientos súper salvajes a través de su documento; por ejemplo, puede sincronizar fácilmente la biblioteca de bocetos Frames y tener un control de versiones seguro con su equipo mediante la aplicación Abstract. Descubra casos de uso y extensiones más amigables que puede usar junto con Frames.

6. Resumen

Después de configurar los estilos básicos y llevar los componentes a la vista deseada, puede tener un sistema de diseño totalmente cargado a su servicio que esté listo para conectarse a cualquier proyecto. También puede guardar el archivo como una plantilla para tener siempre Marcos a mano.

Psst. No necesita personalizar todo para comenzar, configurar los colores de su marca es suficiente para comenzar a diseñar productos de excelente apariencia.

El uso de marcos es gratificante y le brinda la capacidad de cambiar su diseño sobre la marcha sobrescribiendo símbolos. De acuerdo, sí, lo tenemos. Pero, ¿en qué casos de uso real es bueno este sistema?

Casos de uso

  • Creación de prototipos, incluso si la fecha límite llega en 10 minutos, puede crear rápidamente una página web o una guía de estilo para su cliente.
  • Cree un kit de interfaz de usuario de marca, use un estilo prefabricado para sobrescribirlos con el suyo y pruebe sus ideas visuales construyendo su lenguaje de diseño.
  • Wireframing, utilizando contenido prefabricado, puede construir rápidamente wireframes y discutir sus ideas antes de pasar al diseño final de activos.
  • Aprenda algo nuevo, hágase más experto con Sketch y manténgase actualizado con las últimas características y técnicas que pueden salvar su día.
  • Sincronización, si está trabajando en un proyecto con sus colegas, use Marcos para colaborar y diseñar con los mismos bloques de construcción que están sincronizados.

Haz más en menos tiempo, muévete rápido y construye más fuerte. ‍

Si aún no tiene el sistema, puede visitar el sitio web Frames for Sketch para obtener la versión completa del producto, o descargar el archivo Demo y explorar más de cerca.

Preguntas más frecuentes

¿Cómo obtener la última versión?
Enviamos notificaciones por correo electrónico a través de Gumroad y twitteamos cuando se lance la nueva versión, así que asegúrese de seguirnos, y si ya compró marcos, vaya a la página del Producto y descargue la última versión.

¿Quiere sugerir una función o necesita más ayuda?
¡Guay! No dude en comunicarse con nosotros y discutirlo a través de hello@robowolf.net.

¿Estás planeando hacer versiones de Adobe o Figma?
Quizás en el futuro, hasta que estas herramientas brinden la misma flexibilidad que Sketch.

¿Qué diferencia a su producto de otros sistemas de diseño?
Los marcos se integran en un sistema a través de toneladas de cambios debido a las constantes actualizaciones de Sketch y una experiencia de diseño de producto, ahora cualquiera que lo domine tendrá la capacidad de generar y escalar sistemas de diseño para un cliente medio / grande rápidamente.

No he probado ningún otro sistema en el mercado, pero creo que el mundo es un gran lugar y hay muchos diseñadores como yo.

Antes de que te vayas

  • Encuentre más recursos relacionados con Marcos en Sketch App Sources.
  • Ayúdenos a correr la voz sobre los marcos para bocetos y obtenga un 25% de descuento. Simplemente envíenos un correo electrónico / twittee / envíenos un DM al enlace a su publicación, y nos pondremos en contacto con usted lo antes posible.
  • Sigue a Robowolf para más cosas relacionadas con el diseño.