Share
Lo que vas a crearEn este tutorial, usarás un diseño de carrito de compra móvil para practicar el uso de dos características muy importantes en Sketch. Prestaremos mucha atención a: "Símbolos" y "Estilos compartidos".
Los símbolos le permiten duplicar elementos de su diseño y reutilizarlos. Cualquier cambio que realice en el contenido de un símbolo se reflejará en todas las instancias de ese símbolo.
Para crear uno, con un grupo de objetos seleccionados, haga clic en Crear simbolo:
Hay dos consejos importantes para el uso eficiente de los símbolos. Primero, asegúrese de que sus símbolos no sean complicados. Tomemos el ejemplo de mi encabezamiento símbolo:
Verá el fondo, la barra de estado, la etiqueta del título y los iconos, todos mostrados aquí en sus subcarpetas dentro del símbolo de la barra de encabezado:
La barra de progreso no se incluirá dentro del símbolo porque su estado cambia en cada pantalla.
Lo segundo es marcar la opción. Excluir Texto Valor de los simbolos para cada una de sus capas de texto dentro de sus Símbolos. De esta manera usted puede editar El texto para cada uno de los símbolos duplicados de forma individual..
La función "Estilos compartidos" es tan simple como "Símbolos". Es útil cambiar la apariencia de múltiples elementos, a través de varios símbolos y objetos, en un solo clic. Echemos un vistazo a la cabecera y la barra de progreso de nuevo. Aquí puede ver que he cambiado el fondo de la barra de progreso, pero no se ve muy bien en el fondo del encabezado:
Para evitar cambiar cada fondo de la barra de progreso de forma manual, puede establecer un estilo compartido. Aquí estamos aplicando el header-bg estilo que he preparado anteriormente, haciendo clic en Crear nuevo estilo compartido cuando se seleccionó el fondo del encabezado:
Luego aplicamos lo mismo para cada capa que debe reflejar el mismo estilo. Ahora, cuando edite el fondo de la barra de progreso, se modificará el fondo de todos los elementos con el estilo compartido:
Con estas dos funciones en su kit de herramientas, diseñar su próxima interfaz de usuario de aplicación en Sketch debería llevar mucho menos tiempo!
Gracias por leer y no dude en hacer cualquier pregunta en los comentarios a continuación..
Accentsconagua