Introducción a diseño de aplicaciones móviles boceto con Sketch

1. Introducción: Hola, soy Andrew Mercando. Soy Diseñador de Productos Digitales por aquí en Skillshare. Entonces, como diseñadora en Skillshare, llego a trabajar en todo el proceso de diseño, ya sea esbozar nuevas características, armar algunos marcos de alambre que nuestro equipo de ingeniería puede empezar a motearse y construir, o en realidad diseñando UI para, digamos, nuestra aplicación para iPhone o un sitio web. Entonces, en esta clase, nos vamos a centrar en esa última pieza. Te voy a enseñar cómo crear realmente rápidamente hermosas interfaces de usuario usando Sketch. Creo que es un buen momento para aprender Sketch. Es una de las herramientas de diseño más nuevas, pero realmente es una herramienta que desde cero se construye para interfaces de usuario [inaudible]. Entonces, hay un montón de características que hacen que sea realmente fácil sacar ideas de la cabeza y en la pantalla de una manera que puedas ver rápidamente los resultados de tus ideas y tu trabajo. Entonces, creo que esta clase es genial para cualquiera que quiera obtener su primer sabor del diseño de aplicaciones móviles. Vamos a cubrir los conceptos básicos de Sketch, para que cosas como crear tus primeras formas y peinar tus formas en tu texto para hacer una experiencia de iPhone realmente hermosa. Al final de esta clase, deberías tener un gran conocimiento de la herramienta y de lo que puede hacer, y cómo realmente puedes aprovecharla para hacer posible cualquier idea que tengas. 2. Proyecto: diseña una aplicación para una lista de tareas: Esta clase es realmente para principiantes, así que no necesitas ninguna experiencia para venir a esta clase. No necesitas conocer ningún otro software, realmente vamos a partir de lo básico del sketch y a lo largo de las lecciones realmente construimos en esos conceptos básicos y muy rápidamente diseñamos un To- Do List App. Creo que To-Do List App es un gran primer proyecto de diseño de UI, por lo que nuestra App va a ser realmente simple. No va a ser una tonelada de pantallas, pero va a permitir que te pongas realmente creativo con cómo quieres diseñar la App Lista de tareas pendientes. Te voy a guiar a través del diseño de mi propia aplicación Lista de tareas pendientes, y aprenderás todo sobre los conceptos básicos del sketch y cómo producir realmente rápidamente un diseño de interfaz de usuario hermoso y de alta calidad . Estoy muy emocionado de ver lo que ustedes se les ocurre. Asegúrate de subir tu proyecto a la Galería de Proyectos de Skillshare, y voy a pasar y dejar comentarios y comentarios sobre lo que ustedes crean. 3. Formas, texto y estilo simple: Oigan, chicos, bienvenidos a su primera lección. Si aún no has descargado Sketch, dirígete a bohemiancoding.com. Desde esta página, podrás descargar una versión de prueba gratuita. Una vez que estés todo configurado e instalado, vamos a empezar con un nuevo archivo de Sketch. Una vez que estés todo configurado e instalado, abre el archivo Sketch que te vinculé en la pestaña de proyecto de clase en skillshare.com. En este video, vamos a repasar algunos de los conceptos básicos de Sketch. Al final de la misma, aprenderás a hacer formas como rectángulos, círculos, e incluso algunas más complejas para crear una foto de portada de proyecto como se ve aquí. Empecemos a recrear esta foto de portada del proyecto. Entonces, lo primero que vamos a querer hacer es insertar un nuevo rectángulo en nuestro lienzo Sketch. Puedes insertar lo que quieras en el lienzo Sketch yendo a este desplegable de inserción en la esquina superior izquierda de la interfaz. Aquí, tienes todo lo que puedes poner en el lienzo Sketch. Pasaremos por la mayoría de estas cosas en esta clase, pero por ahora, empecemos con la forma y elijamos rectángulo. También puede usar la tecla de método abreviado R para un acceso rápido al rectángulo. Ya verás que mi cursor ha cambiado a un crosshair con un pequeño cuadrado al lado. Entonces, lo que vas a querer hacer ahora es hacer clic y arrastrar para crear tu rectángulo. No te preocupes demasiado por el tamaño porque vamos a ajustar eso en un segundo. Genial, así que has creado tu primer rectángulo. Entonces ahora, vamos a ajustarlo un poco. Si vamos por aquí al lado derecho de Sketch, verás que tenemos nuestro panel inspector, y aquí es donde podemos ajustar todas las diversas propiedades de nuestras formas o cualquier otra cosa que hayamos seleccionado en Boceto. Entonces, empecemos cambiando su tamaño. Vas a seleccionar el campo de texto ancho y vamos a hacer que 800 y golpear enter. Ya verás que el ancho de tu forma se actualizó en cuanto presionas enter, y ahora solo hagamos que sea de 450 píxeles de alto. Genial. Entonces ahora, tenemos un rectángulo en el tamaño exacto que queremos. Entonces, lo siguiente que voy a querer hacer es realmente hacer este rectángulo un color diferente. Entonces si pasamos a esta sección de relleno en el panel de inspector y damos clic en esta pequeña caja gris, verás que surge un poco de tooltip que tiene un montón de opciones diferentes para peinar este rectángulo. Entonces, puedo cambiar el color solo seleccionando el color que quiero de este pequeño recolector de color. También puedo usar una de las opciones de color preestablecidas de Sketch. Entonces sigamos adelante y hagamos nuestro rectángulo azul. Por lo que estoy bastante contento con este color azul. Entonces, voy a dar clic afuera para simplemente cerrar ese selector de color. Verás justo debajo hay otra sección llamada fronteras. Qué bordes te permite controlar es el estilo del contorno de tu forma. Déjame hacer este 10 píxeles de ancho para que puedas ver mejor de qué hablo. Entonces, el borde es básicamente solo un contorno de tu forma. Puedes elegir dónde está la posición, por lo que ya sea dentro al centro o directamente fuera de tu forma, y al igual que los rellenos puedes ajustar su color también. En realidad no quiero un borde en mis formas, así que voy a seguir adelante y desmarcar esto. Entonces a continuación, hagamos un círculo. Puedes ir al desplegable de inserción o simplemente puedes golpear O para crear un nuevo óvalo. Por lo que esta vez cuando haga clic y arrastre, quiero que mantenga pulsado el turno. Lo que verás aquí es que a medida que estás arrastrando la altura y el ancho del nuevo óvalo que estás creando o manteniéndote igual. Seguiré adelante y centraré ese círculo. Entonces, verás aquí arriba en el tamaño, hemos creado un óvalo que mide 230píxeles de ancho por 230-píxeles de alto. Debido a que sosteníamos el cambio hacia abajo mientras lo estábamos creando, las proporciones de esta forma son restricciones. Si sigues adelante y arrastras esto para redimensionarlo, verás que siempre se mantiene el mismo ancho y alto. Esto se puede apagar haciendo clic en este pequeño candado entre el ancho y la altura en el panel de inspector. Por ahora, lo voy a dejar encendido porque quiero que este sea un círculo perfecto. Seguiré adelante y lo centraré dentro de mis antecedentes. Verás que esta pequeña pauta roja aparece indicando que ahora has centrado tu círculo. Vamos a darle estilo a este círculo. Voy a apagar su frontera y sólo quiero hacerlo blanco. Entonces uso uno de los colores globales de Sketch para cambiar eso a blanco. Impresionante. Entonces, ahora tengo un fondo y un círculo. Vamos a seguir adelante y crear nuestra marca de verificación ahora. Entonces pensemos en qué es una marca de verificación. Básicamente, son dos rectángulos superpuestos. Entonces seguiré adelante y dibujaré esos ahora. Hagamos nuestro primer rectángulo de 20 píxeles de ancho por 100 píxeles de alto, y solo haremos un segundo rectángulo de 20 píxeles de alto por hacerlo de 60 píxeles de ancho. Genial. Entonces, solo coloquemos a estos dos justo encima uno del otro. Entonces, lo que queremos hacer ahora es tomar estos dos rectángulos y transformarlos en una sola forma. Entonces, lo que vas a querer hacer es seleccionar ambos tus rectángulos y subir aquí a tus opciones de forma compuesta. Vamos a repasar el primero. Entonces, lo que hace la unión es que toma dos formas superpuestas y crea una forma combinándolas, así que adelante y haga clic en unión. Entonces, ya verás ahora lo que tienes es solo una forma de nuestros dos rectángulos que pueden ser peinadas y editadas como una sola. Entonces, seguiré adelante y giraré este negativo 45 grados para hacer una marca de verificación y solo seguir adelante y posicionarlo justo sobre el círculo. Impresionante. Entonces, hagamos nuestra siguiente forma compuesta. Entonces, si seleccionas tu marca de verificación y tu círculo, subirás aquí y probemos la herramienta de restar. Entonces, lo que esto hace es que resta lo que sea la forma superior de la forma inferior. Entonces, lo que realmente hizo esto es que creó una forma con una marca de verificación recortada de ella. Entonces, lo siguiente que voy a querer agregar a mi foto de portada de proyecto es el título de nuestra app. Entonces para ello, le añadiré una capa de texto a mi lienzo. El método abreviado para capa de texto es T y voy a seguir adelante y hacer clic. Entonces, lo que ves es que aparece algún texto prerellenado que dice tipos algo y está seleccionado hasta ahora. Apenas empiezo a escribir el nombre de mi app, Todo App, aparece justo en mi lienzo. Puedes golpear escape para salir del modo de edición de texto. Impresionante. Entonces cambiemos ahora el estilo de nuestro texto. Entonces en el panel de inspectores, ya ves que aquí tengo algunas opciones específicas de texto. El primero es tipografía. Esto básicamente solo tirará de cualquier tipo de letra que haya instalado en su computadora. Cambiaré el mío a Bell Gothic por ahora y seguiré peinando mi texto. Debajo de la tipografía y el peso, tienes algunas otras opciones. Entonces, en este pequeño engranaje, puedes hacer cosas como agregar un subrayado o un tachado o cambiar tu texto a una lista. De manera similar a tus capas de forma, puedes elegir diferentes colores para tu texto. Voy a seguir adelante y dejar el mío blanco, y también puedes ajustar el tamaño de tu texto. Entonces haré el mío 48. A veces estas pequeñas sugerencias no se cierran, pero si solo haces clic en el botón de color, suele descartarse. Entonces, también tienes control de la alineación de tu texto. Ahora mismo, queda el mío, por lo que cualquier texto que le agrego sólo se va a agregar a la izquierda. En realidad voy a querer que esto se centre. Por lo que a medida que agrego texto a este título, simplemente irá adelante y se centrará en sí mismo. La siguiente opción que tienes es ancho. Entonces, aquí hay dos opciones. Si solo haces clic cuando estás creando tu capa de texto, crearás un ancho automático. Básicamente, para qué sirve esto es una sola línea de texto. Si sigo agregando a esta línea de texto, notarás que nunca se envuelve la palabra. Si quería crear un párrafo de texto, puedo cambiar esto a fijo; o mientras estoy creando mi capa de texto, puedo hacer clic y arrastrar para crear una capa de texto que sea de cierta dimensión. Déjame simplemente cambiar esto a negro. A medida que escribo aquí, notarás palabras palabra wrap. Entonces esto es mejor si estás tipografiando un párrafo o un área de texto de varias líneas. Por ahora, seguiré adelante y borraré eso. debajo del ancho, también puedes ajustar el espacio entre tus caracteres, tu altura de línea y tu espaciado de párrafo si vas a crear un campo de texto de ancho fijo. No me encanta esta tipografía que elegí, así que en realidad voy a volver a Avenir a continuación y no hacer eso audaz. Simplemente haré de eso un medio sencillo. Impresionante. Entonces, tenemos un gran inicio a nuestra foto de portada del proyecto. En el siguiente video, aprenderemos a hacer un estilo más avanzado para crear algo realmente único que luego podamos subir a Skillshare. 4. Estilos y pulido avanzado: Está bien. Ahora que tenemos un mango en algunos de los conceptos básicos del sketch, hagamos un estilo más avanzado. Entonces, lo primero que quiero hacer es hablar de algunas opciones de relleno que tenemos. Entonces, si sigues adelante y seleccionas aquí tu fondo, sabrás por el último video que hemos hecho solo un relleno de azul muy básico. Sketch es bastante poderoso aunque porque te permite agregar múltiples rellenos a cualquier objeto de su lienzo. Entonces, si vas por aquí a la sección de relleno y golpeas este pequeño icono más, notarás que ahora tenemos dos rellenos diferentes en este objeto. Entonces, lo que tenemos aquí es un relleno degradado. Con un gradiente, puedes controlar cosas como la dirección del gradiente, también puedes cambiar el color del degradado seleccionando uno de estos extremos y ajustando el gradiente usando tu selector de color. Entonces, déjame seguir adelante y hacer esto un poco más profundo de un azul por aquí, y por aquí, eso se ve bastante cool hasta ahora. Entonces, vamos a explorar algunas de las otras opciones de relleno. Entonces, también tienes cosas como gradientes radiales, así que eso nos va a convertir en un gradiente que emita desde un punto central, gradientes angulares o algo llamado rellenos de patrones. Entonces, lo que son los rellenos de patrón es básicamente, boceto llenará tu área con una imagen de tu elección. Voy a añadir un relleno de fondo pero voy a elegir este pequeño papel gráfico buscando cuadrícula por aquí. Puedo ajustar la escala de mi rayo de relleno desde aquí. Entonces, déjame hacer eso como 55, eso se ve bien, y cerraré el recolector de relleno. Ahora bien, no tengo control granular del color de ese relleno, pero lo que puedo hacer es cambiar su modo de mezcla y también opacidad. Entonces, déjame simplemente seguir adelante y cambiar esto a una opacidad del 20 por ciento. Voy a golpear enter y luego tal vez multiplicar aunque solo dejarlo normal probablemente se adapte a mis necesidades. Impresionante. Entonces, ahora tengo este papel de rejilla fresco buscando fondo relleno de gradiente. Entonces, lo siguiente que quiero hacer es hablar de agregar algunas sombras de gota a nuestros objetos. Entonces, si selecciono mi marca de verificación y bajo aquí al área de sombras en el panel de inspector y agrego uno nuevo de esos, verás que se ha añadido un poco de sombra de gota a mi composición. Tengo control total sobre esto así que si quiero hacer el x e y offset 00, así que está directamente debajo de él, solo estás consiguiendo este resplandor a su alrededor. Voy a subir esto para mostrarte cómo luce eso. De verdad empieza a hacer que esto parezca que está saliendo un poco de la pantalla. Le da un poco de profundidad, esto está flotando sobre mi fondo. Haré de esto un seis, y también puedes hacer cosas como cambiar el color real y la opacidad de este fondo. Estoy bastante contento con la configuración predeterminada, pero si quería que fuera un rojo, lo cual es difícil de ver porque es tan transparente, tú también puedes hacerlo. Las sombras se pueden aplicar a cualquier objeto. Entonces, en realidad puedes seguir adelante y agregar una sombra a tu texto también. Entonces, voy a hacer de este seis, y ahora el texto parece que se está saliendo también. Está bien. Entonces, ahora que ustedes saben su camino alrededor del sketch, lo que quiero que hagan es darle estilo a su foto de portada de proyecto como quieran. Te puedes enloquecer un poco. Piensa en esto como una oportunidad para realmente establecer el tono y la dirección del arte para el resto de tu app. Cuando hayas terminado de peinar tu foto de portada, vamos a seguir adelante y subirla a la Galería de Proyectos SkillShare, para que puedas mostrar al resto de tus compañeros de clase lo que estás intentando crear. 5. Exportación y carga: Entonces ahora que tienes tu foto de portada de proyecto estilo como quieras, quiero hablar un poco de capas y buena higiene mientras estás diseñando un boceto. Por lo tanto, notarás en el lado izquierdo de la interfaz de boceto tienes una lista de básicamente todo lo que has agregado al lienzo de boceto hasta ahora. Lo que esta lista te permite hacer es ordenar tu objeto para que puedas colocar las cosas delante o detrás del otro. También puedes expandir tus formas compuestas para ajustar cada una de las formas que componen de una manera granular y lo más importante para esto realmente puedes cambiar el nombre de estas capas. Entonces, lo que me gusta hacer es que estoy diseñando es simplemente mantenerme realmente organizado y renombrar mi capa para que sean fáciles de encontrar y volver a ti. Entonces, sigamos adelante y llamemos a éste un fondo. Cambiaremos el nombre de esta a marca de verificación y podemos dejar nuestro texto tal como está, bosquejado por nombres predeterminados, tus capas de texto, lo que sea que escribas en ellas. Impresionante. Entonces, ahora tenemos un bonito archivo de diseño limpio. Otra característica del boceto que te ayuda a mantenerte organizado es el agrupamiento. Entonces, ¿qué quiero decir con eso? Entonces, si voy a mi lienzo y también puedes hacer esto desde tu panel de capas y seleccionar todas mis capas y golpear el comando G, verás que colapsó todo en una carpeta. Entonces, básicamente lo que es esto es un grupo y boceto. Entonces, puedo nombrar a este grupo, así que sólo lo llamaré foto de portada y ahora bosquejo tratará esto como un solo objeto. Entonces, si hago clic en esto seleccionará el grupo y lo puedo arrastrar y todo lo que hay en ese grupo se moverá juntos. Si quiero seleccionar cosas en el grupo, puedo o bien mantener pulsado el comando y eso me permitirá seleccionar profundamente dentro del grupo o puedo hacer doble clic en objetos y eso me dejará ir un nivel más profundo en las agrupaciones. Entonces ahora que tengo agrupada mi foto de portada de proyecto, puedo seguir adelante y seleccionarla y si bajo a la esquina inferior derecha de la interfaz de boceto, hay esta pequeña área llamada make exportable. Lo que esto me permite hacer es seleccionar el tamaño y tipo de archivo que me gustaría exportar este grupo para poder usar estos archivos fuera del sketch. Por lo que puedo elegir varios archivos de imagen de PNG a PDF a SVG. Voy a dejar el mío PNG. También puedo hacer múltiples exportaciones de las mismas opciones. Entonces, si estoy diseñando para iPhone y necesito gráficos a 2x o 3x, puedo hacer eso también. Si necesito tanto PNG como SVG también puedo simplemente exportar esos en un solo swoop rápido. En realidad eliminaré estas dos opciones. Si golpeas foto de exportación, verás que aparece tu recolector de archivos y solo puedes guardarlo donde quieras. Impresionante. Entonces ahora que has exportado tu foto de portada adelante e inicia sesión en Skillshare, inicia tu proyecto y sube esto como tu foto de portada a ella y no puedo esperar a ver lo que creáis vosotros chicos. 6. Páginas y mesas de trabajo: Está bien. Entonces, estamos a punto de empezar a diseñar nuestra aplicación. Pero primero, hablemos un poco de cómo se estructuran los archivos de Sketch. Entonces, hemos aprendido sobre la lista de capas en grupos, pero Sketch también tiene otras herramientas organizacionales que son realmente impresionantes para cuando estás diseñando aplicaciones, o páginas web o lo que sea que vas a estar diseñando con Sketch. Entonces, si notas esto, Gets Started Here signo de exclamación, es un poco desplegable. De qué se trata se trata de una página en Sketch. Por lo tanto, Sketch permite dividir su archivo en varias páginas cada una con su propio lienzo. De lo que esto te permite hacer es dividir lo que estés trabajando en grupos que organizativamente tiene sentido. Entonces, para este archivo, he hecho una página para nuestras pantallas principales de App, he incluido otra página que tiene Interacciones y Microestados, y he incluido otras dos páginas que tienen algunos otros componentes que vamos a ser usando mientras estamos haciendo algo de interfaz de usuario. He incluido algunos componentes básicos de la interfaz de usuario de iOS que estaremos usando cuando nos metamos realmente en diseñar nuestra aplicación. Entonces, si haces click en el pequeño ícono, puedes ampliar las páginas para ver una lista completa de lo que tienes y saltarte rápidamente a ellas. También puedes agregar una nueva página directamente desde aquí y similar a grupos o cualquier lista de capas. Puedes nombrar esto como quieras. Seguiré adelante y borraré esto. Entonces, las páginas son realmente una gran herramienta para mantenerte organizado en Sketch. Entonces, entremos a una de las páginas. Vámonos a las Pantallas de Aplicaciones. Entonces, en Aplicaciones Pantallas, verás que tenemos un montón de, básicamente, vistas de aplicaciones. Si necesitas hacer clic y arrastrar por ahí, si mantienes presionada la barra espaciadora, cursor del ratón se bloqueará y podrás arrastrar el lienzo alrededor, solo súper útil ya que estás navegando por la interfaz de Sketch. Entonces, lo que he hecho en Aplicaciones Pantallas es que he creado un montón de mesas de trabajo. De lo que básicamente son las mesas de trabajo, son un tipo especial de grupo. Entonces, las mesas de trabajo son marcos fijos. A mí me gusta usarlos para representar diversos estados de mi app. Por lo que tengo, por ejemplo, nuestro icono de aplicación. Si pasas a la lista de capas, puedes expandir la mesa de trabajo para ver exactamente qué formas y objetos están encima de esa mesa de trabajo. Notarás, justo como ejemplo, que estas mesas de trabajo son de marco fijo. Entonces, si hay algo en tu Mesa de Trabajo y lo arrastras por un lado, en realidad lo recortará para ti. Entonces, sólo voy a recenter eso. Entonces, para crear una Mesa de trabajo, puedes ir al menú desplegable Insertar o presionar la tecla de acceso directo A, y notarás que en tu panel Inspector se te ocurre un montón de plantillas predefinidas que Sketch incluye. Entonces, si quería agregar otra pantalla a este archivo, solo hago clic en iPhone 6, y verás que Sketch agrega otra Artboard justo al lado de mi última Artboard. Impresionante. Por lo tanto, las mesas de trabajo pueden nombrarse igual que cualquier otro objeto en Sketch, List View UI. Las mesas de trabajo también se pueden arrastrar y colocar donde quieras en el lienzo. Si bien estamos diseñando, voy a simplemente poner nuestras mesas de trabajo de la interfaz de usuario justo debajo de nuestras mesas de trabajo de estructura alámbar. Entonces, puedo referirme rápidamente a los wireframes que nos hemos trazado para nosotros mismos. Impresionante. Entonces, esas son solo algunas de las grandes características que tiene Sketch para mantenerte organizado y viendo mientras estás diseñando. Entonces, en el siguiente video, en realidad vamos a empezar a trabajar en algunas de las UI para nuestra aplicación. 7. Encabezado: Está bien. Por lo que ahora, estamos listos para empezar a diseñar la interfaz de usuario para una aplicación de lista de tareas pendientes. Lo primero que voy a querer hacer es, volver a mi foto de portada y simplemente agarrarla y traerla a la página de las pantallas de mi app para poder hacer referencia al estilo que expuse en ella. Entonces, solo seguiré adelante y lo pondré justo al lado de mi primera pantalla de interfaz de usuario que tengo aquí abajo. Entonces, lo que en realidad haré ahora es, solo sigue adelante y crea los otros tableros de arte para las secciones principales de la interfaz de usuario. Entonces, lo que haré es duplicar este tablero de arte un montón de veces. Entonces, o bien puedo ir a la herramienta de creación de tableros de aplicaciones pulsando la A o puedo seleccionar este tablero de aplicaciones y puedo mantener pulsada la opción y arrastrar. Lo que eso va a hacer es que sólo va a duplicar lo que sea que esté arrastrando aquí. Entonces solo crearé estos otros tres tableros de arte y colocaré algunos justo debajo de los wireframes que voy a estar creando. Puedes seguir adelante y simplemente renombrar estos, y uno último para tarea de edición, impresionante. Por lo tanto, vamos a acercar y ver nuestros wireframes. Entonces, en la Vista de Lista tenemos básicamente un encabezado donde podemos agregar un nuevo elemento de tareas pendientes, tenemos una sección para nuestros artículos no hechos y tenemos un listado de nuestros artículos hechos. Parece que todos los wireframe para los que vamos a estar haciendo UI tienen uno de estos encabezados. Entonces, ese es probablemente un buen lugar para empezar como lo primero que vamos a seguir adelante y crear. Entonces, empecemos con eso ahora mismo. Entonces, lo primero que voy a querer hacer es realmente crear el fondo para mi encabezado. Entonces, voy a golpear R para crear un nuevo rectángulo. Arrastraré eso para que sea el ancho completo de mi tablero de arte para un iPhone seis que tiene 375 píxeles de ancho si estamos diseñando en el 1X y me limitaré a quitar el borde de eso. Entonces, lo que voy a querer hacer ahora es, mirar hacia atrás a mi foto de portada de proyecto y empezar a tomar algunas pistas de estilismo de ella. Entonces, lo primero que notaré es que tiene este fondo azul realmente rico. Entonces, si sigo adelante y doy clic en el fondo de mi foto de portada puedo ver lo que tengo de vuelta aquí. Entonces, si voy a este relleno, quiero este azul para mi cabecera. Entonces, puedo o seguir adelante y copiar el valor hexadecimal aquí mismo o puedo golpear este pequeño plus aquí abajo junto a mis colores de documento. Lo que eso va a hacer, es que me va a guardar ese color y me permita sólo tener acceso rápido en cualquiera de mis recolectores de color. Entonces, vamos a seleccionar el fondo de nuestro encabezado y solo que sea tan bonito azul. Entonces, lo siguiente que voy a querer agregar a este encabezado es esto, barra de estado de iOS aquí arriba. Al igual que mencioné en un video anterior, he incluido algunos de estos componentes de iOS, también tengo un enlace en las notas de clase en la descripción del proyecto y simplemente pegarlo justo ahí. Entonces, ahora que está ahí, solo vas a querer posicionarlo justo al ras con la parte superior y los lados de tu tablero de arte, y ahora tienes tu barra de estado de iOS. Entonces, esto realmente está empezando a parecer una verdadera aplicación para iPhone. Entonces, lo siguiente que voy a querer hacer es solo agregar mi título y mis enlaces de acción al encabezado. Entonces, solo sigue adelante y pulsa “T” para agregar una nueva capa de texto. Para esto, solo vas a querer hacer click porque no vas a querer que se arregle con capa de texto. Llamemos a esto Todos, ya que esta es una lista de nuestros artículos por hacer. Haré que esto se centre. Entonces, si quiero ajustar el contenido de esta caja lo mantendrá bonito y centrado, y lo haré un poco más grueso haciéndolo un peso medio de fuente, sólo porque es un título,por sólo porque es un título, lo que debería ser bastante importante. El tamaño es de 18, en realidad estoy bastante contento con eso por ahora mismo, así que dejaré eso. A continuación, vamos a crear la acción. Entonces, teníamos un pequeño enlace nuevo aquí arriba en la parte superior derecha de nuestra cabecera. Entonces, lo que haré es seleccionar mi título y pegaré “opción”, y lo arrastraré. Si bien estoy arrastrando esta vez, voy a mantener pulsado Shift. Lo que eso va a hacer es, sólo va a arrastrar esto a lo largo del eje x o y. En este caso, lo está arrastrando a lo largo de la x. Entonces, no va a cambiar las coordenadas y de la misma, sólo va a cambiar la x. Entonces, solo voy a soltar eso. Porque esto está alineado a la derecha, cambiaré la alineación a la derecha y escribiré nuevo aquí mismo. Puedo comprobar la distancia de hasta qué punto este objeto está lejos de varias cosas en el encabezado, solo seleccionándolo y pulsando la tecla Alt. Lo que esto va a hacer, es que va a traer algunas herramientas de medición que Sketch nos proporciona. Entonces, verás que esto está a 13 píxeles del borde derecho del tablero de arte y el cuadro limitador de esta capa x está a 27 píxeles de la parte inferior de nuestro fondo. Dependiendo de qué cantidades más, me dará diferentes herramientas de medición. Lo siguiente que quiero hacer es en realidad también solo hacer esto un poco más ligero. Entonces, tiene un poco de un peso de tipo diferente al título de mi app. Entonces esta es una cabecera bastante grande. En realidad creo que en algún lugar por debajo de mediados de los 60 probablemente sea un mejor tamaño de cabecera para nosotros. Entonces, lo que voy a hacer ahí es, voy a cambiar la altura de eso, y luego quiero simplemente centrar esto entre la barra de estado y la parte inferior de mi fondo. Entonces, eso fue 13, así que déjame apenas igualar eso hasta 10. Entonces, tenemos 10 y 11. Entonces no vamos a conseguir eso perfectamente parejo, pero probablemente sea bueno por ahora. Entonces por aquí, seguiré adelante y cambiaré esto a 16. Te darás cuenta de que a veces, si tienes un objeto seleccionado y mantienes presionada la tecla de opción para moverlo, se moverá un 10 de píxel. Es algo realmente raro lo que hace Sketch. No sé por qué alguien querría mover esto un 10 de píxel pero es solo una de esas pequeñas rarezas que tiene Sketch, ojalá algún día arreglen. Entonces, lo que realmente haré es asegurarme de que esto esté a 16 píxeles de un lado de este tablero de arte. Enfriar. Ahora, lo siguiente que quiero hacer es solo darle un poco de profundidad a este encabezado. Por lo tanto, un encabezado se sienta en la parte superior de su interfaz de usuario y es probable que las cosas se estén deslizando detrás de ella. Entonces, lo que voy a querer hacer es simplemente agregar una simple sombra de gota aquí. Entonces, la sombra de gota predeterminada es un poco oscura. Entonces, entraré en el color y me dejaré bajar esto al 30 por ciento de opacidad, y haré el desenfoque un poco menos también, tal vez haga el desplazamiento en el eje Y solo uno. Entonces, sí. Eso me da una bonita sombra sutil. Entonces, realmente parecerá que las cosas están pasando detrás de él. Entonces, genial. Ahora tenemos nuestro encabezado, sigamos adelante y solo mantengámonos organizados. Entonces, seleccionaré el fondo y me dejaré simplemente renombrar eso y todo lo demás se llama bastante correctamente, pero solo seguiré adelante y agruparé estos en grupo de cabecera. Impresionante. Por lo que ahora, tienes un encabezado que puedes usar en el resto de la pantalla de tu App para iPhone. Entonces, si solo lo agregas a la vista Create.Task y cambias esto a Guardar, tienes un componente realmente reutilizable que puedes usar en toda tu aplicación. Tendrás que seguir adelante y crear esa pequeña x para salir de la vista Guardar o del icono de atrás. Entonces puedo seguir adelante y sólo hacer eso ahora mismo. Entonces haré dos rectángulos. Entonces hagamos que esos tres píxeles de ancho y 35 píxeles de alto. Matar la frontera en ella. Copiarlo [inaudible] comando, V extremo simplemente gire esos 90 grados. Parece que esto está un poco fuera de centro. Entonces, ¿por qué no hacemos que parezcan números. Usaré la herramienta My.Union y luego los giraré 45 grados y podría poner esto justo arriba en mi cabecera ahora. Es un poco grande así que solo lo reduciré a 20 por 20 y lo convertiré en un color blanco. Enfriar. Entonces puedes seguir adelante ahora y darle estilo a tu encabezado como quieras y duplicarlo en todos los tableros de arte que se necesitan para el resto de tu app y te veré en el siguiente video. 8. Símbolos: Entonces, en nuestra última lección iniciamos nuestra interfaz de usuario creando encabezados para cada una de nuestras pantallas de aplicaciones. A continuación, empecemos por crear algunos de los objetos que se encuentran en nuestra Vista de lista. Acerquemos la Vista de Lista pulsando Command Plus y arrastrando nuestro lienzo manteniendo presionada la barra espaciadora. Lo que tenemos en esta Vista de lista es un par de artículos que se repiten. Entonces, tenemos un encabezado repetido para cada una de estas secciones, y luego dentro de cada una de estas secciones, no hemos hecho , todos, y tenemos algunos tachados todos. Entonces, lo que quiero mostrarles en esta lección es cómo hacer una pieza de diseño reutilizable. Entonces, empecemos con hacer de estos títulos de sección un ejemplo realmente sencillo. Entonces, Sketch tiene una herramienta realmente poderosa llamada Símbolos. Entonces, si sigo adelante y creo un rectángulo para mi encabezado de sección, solo voy a seguir adelante y voy a darle estilo a esto, bajaré esto hasta que sea realmente gris azulado claro aquí abajo. Añadiré este color a mis colores de documento porque podría querer reutilizarlo. Creo este pequeño fondo para mi encabezado de sección y solo seguiré adelante y crearé un título para ello. Entonces, llamaré a éste Not Done, y solo ajustaré la fuente. De hecho haré de esto un bonito azul oscuro. Todo va con una especie de tono de color azul aquí, y simplemente lo centraré visualmente. Haz este 16 píxeles lejos del costado para que coincida con mi elemento de acción por aquí. Genial, esto se ve un poco grande así que voy a derribar esto a 14 y solo centrarlo ahí dentro. ¡ Impresionante! Entonces, déjame crear un grupo para esto y llamar a esto un Encabezado de Sección. Tu aplicación podría tener un montón de encabezamientos de sección. Entonces, tenemos una sección Not Done, pero también tenemos una sección Done. Ahora, puedo fácilmente, de la misma forma que hicimos nuestros encabezados, simplemente crear dos objetos como este. Pero si quiero cambiar el color de esto, decir un oscuro con un encabezado claro, tengo que ir y hacer exactamente lo mismo o recoparlo y rehacer este otro encabezado de sección. Por suerte, Sketch te da una herramienta bastante impresionante llamada Símbolos donde si solo actualizas una, puedes actualizar el resto de ellas. Se actualizará automáticamente el resto de ellos. Entonces, probémoslo. Entonces, si seleccionas tu encabezado que deseas crear un símbolo y solo tienes que hacer clic con el botón derecho en él, puedes bajar a esta opción Crear símbolo. Alternativamente, también puedes subir aquí en el encabezado. Entonces, si creas un símbolo, notarás que cambió esa carpeta a este color morado. Entonces ahora, en cualquier momento que tengas otro Encabezado de Sección en este color morado, si actualizas uno de estos, ambos se actualizarán, y puedes hacer esto por lo que quieras. Entonces, si actualizas tus estilos de tipo, se actualizará. Si actualizas los tamaños, colores, solo actualizará. Entonces, una cosa que debes saber, que por defecto, también actualizará el texto aquí dentro. Entonces, notarás que cambié el texto y cambió en ambos lugares. Pero eso no es algo que queremos. Entonces, lo que tienes que hacer es en realidad, en tu capa de texto, subir a esta pequeña marca de verificación que aparece cuando tu capa de texto está en ensamblado, y simplemente pulsa Excluir valor de texto del símbolo. Entonces, lo que esto ahora te va a dejar hacer es realmente tener diferentes valores de texto aquí y el símbolo ignorará lo que esté en ese campo de texto, pero aún así mantendrá todas sus opciones de estilo para que puedas mantenerte consistente y mantener el estilismo. Otra cosa a destacar es estos dos símbolos están vinculados, pero puedes cambiar el título de ellos de forma independiente si quieres mantenerte organizado. Entonces, puedes hacer Sección Dirigido para este tipo y pegarle Done y luego puedes hacer por aquí, Not Done. Genial, así que esto es realmente poderoso. Entonces, lo siguiente que vamos a hacer es usar Símbolos para crear las filas de nuestra lista de cosas que hacer. Entonces, todos estos son básicamente iguales y queremos crear símbolos. Entonces, si actualizamos el estilo de uno de ellos, todos cambian. Entonces, empecemos a crear esa fila. Entonces, vamos a crear el Not Done to do item. Entonces, sólo voy a darle un trasfondo. Haré este fondo blanco por ahora mismo. Lo que voy a querer hacer es copiar y pegar justo ahí. Quiero solo hacer un trazo realmente ligero en la parte inferior de la misma para poder separar cada uno de mis artículos para hacer. Entonces, tengo este objeto. Lo que voy a hacer ahora es cambiar la altura de la misma a un píxel de altura. Entonces, haré uno y verás que ahora tengo un rectángulo de un píxel. Llamaré a esto un trazo inferior, y llamaré a este objeto Fondo. Entonces, quiero que esto esté alineado en la parte inferior con el fondo, este trazo inferior y el fondo esté alineado en la parte inferior. Entonces, seleccionaré ambos objetos y subiré aquí a estas herramientas de alineación, y lo que éstas te permiten hacer es, puedes hacer cosas como alinearlo al centro, a la parte superior, o a la parte inferior. Entonces, quiero alinear la mía al fondo. Entonces, tengo este pequeño golpe aquí abajo. Lo siguiente que quiero hacer es poner una marca de verificación vacía para denotar que este objeto aún no se ha comprobado. Entonces, volvamos a nuestra foto de portada del proyecto. Ya hemos hecho una marca de verificación así que sólo voy a seguir adelante y tomarla desde aquí. Lo copiaré y lo pegaré en mi nueva fila y lo redimensionaré justo ahí. Haré esto 40 píxeles por 40 píxeles, y luego seleccionaré el fondo, y usaré mi herramienta de alineación para asegurarme de que solo esté alineado al centro ahí. Hagamos esto 16 píxeles lejos de un lado. Genial. Antes de ir más lejos, sólo voy a seguir adelante y los agruparé en grupo y sólo lo llamaré Tarea - Not Done. Impresionante. Entonces, quiero cambiar el estilo de esto. En realidad cambiaré el color a nuestro pequeño azul claro ahí mismo, y quiero que se vea impreso en la fila, lugar de que se cierne sobre ella. Entonces, apagaré la sombra y probaré una de estas pequeñas Sombras Interiores. Entonces, haz ese cero. Manténgalo un desenfoque de tres, pero sólo cambia esto a 30 para que sea un poco más sutil. realidad puedo... déjame probar 20. Genial. Entonces, ahora tenemos nuestra marca vacía. Parece que es algo que podría necesitar llenarse y podemos seguir adelante y simplemente crear el título para esto. Entonces, voy a hacer este 18 punto, quiero hacerlo medio, y lo llamaré Lorem Ipsum. Impresionante. Tiene mi bonito azul oscuro ahí y sé que en algunos de estos había una fecha de vencimiento así que solo voy a seguir adelante y voy a añadir una capa de fecha de vencimiento. Voy a hacer esto mucho más pequeño, tal vez un 14 y voy a hacer esto un poco más claro de azul grisáceo y puedo hacer eso regular. Digamos: “Vence mañana a las 12:00 PM”. Impresionante, y alinear esos hacia arriba. Vosotros chicos podéis diseñar esto como veáis conveniente. Juega con el dimensionamiento y el espaciado hasta que tengas algo que te guste. Seleccionaré ambos y espero que no estén en mi grupo. Entonces, si quieres agregar algo a un grupo que ya existe, solo tienes que ir a esta lista de capas y simplemente arrastrarlas justo y ahora, debería poder hacer la medición lejos de esta marca de verificación. Está bien, genial. Entonces ahora, tengo estos 16 pixeles por 16 pixeles y a veces me gusta también solo alinear cosas. Sketch te da estas herramientas. Se llaman gobernantes y básicamente para lo que estas son buenas es para que puedas hacer clic en estas reglas del lado y agregar estas pautas muy rápidamente a tu archivo. Entonces, lo que podría hacer es realmente alinear la línea base de eso y la parte superior de esa. Entonces, todo encaja realmente bien dentro de esta pequeña marca de verificación. Siempre puedes deshacerte de los gobernantes con solo arrastrarlos de inmediato de la regla. Entonces, es una herramienta realmente rápida y fácil. Está bien, impresionante. Entonces, lo que vamos a querer hacer ahora es seleccionar todo este grupo y vamos a crear un símbolo fuera de él, y luego solo asegúrate de volver y excluir ambos valores de texto del símbolo. Entonces ahora, si copias y pegas a este tipo, quieres hacer algo como cambiar el texto aquí, lo cambiará para todos ellos. Impresionante. Seguiré adelante y cambiaré eso de nuevo a ese azul más oscuro. Simplemente arrastraré este encabezado de fila porque ahora, tengo mis dos artículos Not Done. Entonces ahora, lo que quiero hacer es crear mis artículos Done. Pero sabes que si voy aquí abajo y solo creo otra instancia de este símbolo y luego empiezo a llenar esto con tal vez como un verde, se lo va a llenar para todos ellos, y eso no es algo que queramos. Entonces, lo que realmente vas a querer hacer es hacer clic derecho en este nuevo símbolo y vas a querer desconectarlo. Entonces, lo que esto hará, es que ya no estará conectado con el resto del símbolo para que pueda seguir adelante y cambiar esto como me parezca conveniente y mis otros símbolos no cambiarán. Pero también puedo simplemente seguir adelante y crear un nuevo símbolo fuera de él así que ahora, puedo hacer mis filas Done aquí abajo. Entonces, a lo mejor quiero que esto sea tachado. Impresionante. Entonces, lo que quiero que hagan ahora es solo terminar el resto de las pantallas de esta página. Recuerda, puedes usar algunos de los componentes que incluí en la página de componentes de iOS o crear cosas completamente desde cero. De verdad depende de ti sin embargo quieras diseñar tu app. Te atraparé en el siguiente video donde hablaremos de algunos del microestado. 9. Microestados e íconos: De acuerdo, esperemos que hayas podido terminar de diseñar las pantallas principales de tu app. En este video, vamos a repasar algunas de las últimas interacciones de los microestados. Pasemos ahora a la página. Entonces aquí tenemos un par de microestados. Tenemos nuestras interacciones de fila. Un estado vacío para nuestra ListView cuando ya sea la aplicación se carga por primera vez o tal vez después que hayas terminado y despejado todos tus artículos pendientes y por último tienes una confirmación de Eliminar tarea. Empecemos con estas interacciones de fila. Al igual que cuando estábamos diseñando el uso principal de nuestra app solo voy a seguir adelante y añadir un nuevo tablero de arte. Lo haré iPhone tamaño seis. Lo arrastraré justo debajo de las interacciones de fila y lo nombraré interacciones de fila UI. No quiero que mi tablero de arte sea blanco, así que tengo dos opciones. Puedo dibujar un rectángulo y cubrir todo el tablero de arte con un color rectángulo o puedo seleccionar el tablero de arte y encender un color de fondo para ello. Entonces, déjame hacer eso. Voy a hacer este azul claro que he estado usando en otros lugares de la app. Está bien, impresionante. Entonces, ahora tenemos nuestra interacción de fila. Entonces, lo primero que voy a querer hacer es simplemente lanzar una fila de tareas predeterminada en mi tablero de arte. Entonces, o bien puedo volver a las pantallas de mi app y copiar y pegar el símbolo que creé en la lección de video anterior o simplemente puedo insertar una instancia de ese símbolo. Entonces, si subes aquí al desplegable 'Insertar', verás que ahora tienes un área de símbolos. Entonces, aquí están todos los símbolos que he creado hasta ahora en mi app. Hagamos tarea no hecha y se va a añadir sólo una instancia de ese símbolo directamente en mi tablero de arte. Ahora recuerda, cualquier cosa que cambies aquí va a cambiar todas las páginas de tu archivo de boceto. Entonces, si cambias algo aquí también va a cambiar en tus vistas principales de aplicaciones. Sólo ten eso en cuenta. Entonces, tenemos nuestra fila por defecto. El siguiente que vamos a querer hacer es sólo añadir una fila. Parece que tenemos un pequeño ícono nuevo justo encima de donde está la marca de verificación ahora mismo. Entonces, vamos a crear eso. Entonces, sólo voy a acercar. Voy a crear un óvalo nuevo y quiero crearlo exactamente del mismo tamaño que el óvalo de marca de verificación y recuerda, no quieres poner esto en el símbolo porque entonces pondrá ese óvalo en todas tus filas. Entonces, voy a seguir adelante y voy a hacer este blanco y quiero hacer las fronteras este bonito azul, lo voy a subir a dos y sólo voy a añadir la palabra nuevo en ella. Entonces, no quiero texto blanco aquí voy a hacer este azul también y sólo lo atrevido un poco. Pondré mi alineación en centrada. Entonces si quisiera agregar un signo de exclamación o algo así, podría hacerlo muy fácilmente. Impresionante, entonces, me alejaré un poco. Eso es como una lengüeta grande para mi gusto. Entonces, voy a probarlo a las 11. Eso se ve bien y luego normalmente cuando uso todos los textos en mayúsculas me gusta espaciar un poco las letras así que solo escribe una sobre el personaje y espacia esas letras. Probemos dos, creo que uno funcionaba mejor. De acuerdo, genial, así que ahora tenemos nuestro nuevo estado de fila. El siguiente que vamos a querer hacer son un par de estas interacciones de deslizamiento. Entonces, parece que cada una de estas interacciones tiene un icono bastante consistente con una etiqueta y un fondo. Entonces, en realidad voy a seguir adelante y crear todos los iconos a la vez para hacerlos todos consistentes. Entonces, vamos a ver. Tenemos una marca de verificación, un bote de basura y un lápiz pequeño. Entonces, vamos a crear cada uno de esos ahora mismo. Empecemos con la marca de verificación. Esto debería ser bastante fácil para nosotros ahora porque lo hemos hecho tantas veces y déjame solo hacer esto 25 por siete y luego haré otro rectángulo siete pixeles de ancho por hagamos 50 pixeles alto y solo seguiré adelante y ajustar esto justo ahí. De acuerdo, genial y igual que lo hicimos antes simplemente nos uniremos y le daremos una rotación negativa de 45 grados. Bueno, hagamos que estos dos píxeles de espesor y lo voy a hacer por fuera. Eso parece que podría ser un poco grande así que vamos a derribar eso a unos 35 píxeles de altura y eso es sobre el tamaño usaré para todos nuestros iconos ahora, bien genial. Entonces, en realidad me voy a hacer solo pequeñas guías aquí para que pueda mantener todo relativamente dentro de la misma escala. Hagamos nuestro cubo de basura ahora. Hacer la papelera lo que voy a querer hacer es simplemente crear la base de los botes de basura y el bote de basura tiene una parte superior más ancha que la inferior. Entonces una forma de hacer esto en boceto es hacer doble clic en mi rectángulo para entrar en modo de edición de ruta. Qué modo de edición de ruta me permite hacer es seleccionar cada uno de los puntos de anclaje en esta forma uno a uno o si mantengo pulsado shift, puedo seleccionar dos a la vez y ahora si muevo esos alrededor, verás que soy capaz de simplemente moverme esos puntos de anclaje mientras que el resto de los puntos de anclaje que no están seleccionados se mantienen estacionarios. Entonces, lo que realmente vamos a querer hacer es simplemente seguir adelante y seleccionar ese punto de anclaje inferior a la vez y simplemente moverlo en dos píxeles al centro. Genial. Ahora vamos a darle estilo a eso de la forma que queríamos, eso está bien por ahora y no queremos ningún relleno de centro. Entonces, vamos a crear ahora la parte superior de la papelera. Entonces si solo hacemos un rectángulo y podemos hacerlo unos cuantos píxeles más ancho. Vamos a darle estilo a estos y vamos a poner esto para el exterior. Está bien, genial. Siento que mi papelera es tal vez un poco estrecha así que solo seguiré adelante y lo ensancharé un poco y luego arrastraré esto y solo seguiré adelante y centraré alinear estos. Impresionante. Entonces vamos a darle un pequeño mango, me acerqué, me alejaré creando un último rectángulo y haremos que ese grosor dos despegue el relleno y lo que vamos a tener que hacer ahora y simplemente superpondremos estas cosas justo encima de cada otro. Entonces, tenemos una pequeña marca de cheques y tenemos un cubo de basura y el último que vamos a querer hacer es un lápiz. Entonces, comenzaremos con un simple rectángulo. Hagamos eso de unos siete u ocho píxeles de ancho. Simplemente adelante haz el grosor dos y quita el relleno. Entonces al igual que hicimos con la papelera, hagamos doble clic en este rectángulo. Seleccionaremos los dos puntos de anclaje superiores. Entonces, además de moverlos solos, también podemos controlar el radio de apenas ciertos puntos de anclaje. Entonces, baje esto hasta cuatro ya que este tiene ocho píxeles de ancho, esto básicamente debería ser un extremo perfectamente redondo para este lápiz. Ahora queremos crear la punta del lápiz. Entonces, si pasas por encima de estas líneas, verás que tu cursor se convierte en un bolígrafo con un plus en él. Lo que esto va a hacer es que va a sumar un punto de anclaje aquí. Entonces, si haces click verás que tengo un punto de ancla totalmente nuevo en esa forma y ahora puedo seleccionar eso y puedo arrastrarlo y moverlo por donde quiera. Entonces, solo arrástrelo unos píxeles hacia abajo para que sea un extremo afilado como lo tendría un lápiz normal. Está bien genial. Quizás quieras simplemente seguir adelante y añadir una pequeña línea aquí mismo para mostrar dónde empieza la punta del lápiz y puedes hacerlo pulsando L para la herramienta de línea y luego simplemente arrastrando una línea justo a través de ella y quieres posicionarte que justo ahí dentro y luego solo otra vez solo adelante y que sea una línea gruesa de dos píxeles y de igual manera tal vez este lápiz tenga un borrador en la parte superior, así que solo puedes seguir adelante y arrastrar una línea allá arriba también. Enfriar. Entonces, ahora lo que queremos hacer es probablemente querer agrupar esto y llamarlo, darle un nombre así que lo llamaré ícono editar. Haremos lo mismo con nuestro basurero. Genial. Por lo que tenemos algunos iconos simplemente realmente simples que ahora podemos usar cuando estamos haciendo nuestras filas. De nuevo, puedes simplemente deshacerte de estos gobernantes arrastrándolos ahí mismo. Entonces, vamos a copiar y pegar nuestra fila de tareas principal, y lo que vamos a querer hacer es simplemente deslizarlo un poco y haremos un rectángulo que tenga exactamente la misma altura que es. Mueve su frontera y éste probablemente debería ser verde para denotar que estás a punto de revisar algo. Arrastraremos nuestro icono de marca de verificación justo encima de él y lo centraremos en el medio, sigamos adelante y hagamos este trazo blanco y añadamos solo una pequeña etiqueta para que la gente sepa lo que está a punto de suceder. Haremos hecho signo de exclamación. Nuevamente, hagámoslo blanco y pongámoslo al centro y ahí vamos. Enfriar y ahora solo puedes hacer lo mismo para las otras dos interacciones de fila. Entonces, solo copiaremos esto dos veces. Cambiemos esto a un rojo y solo traeremos estos iconos por aquí. Probablemente querremos eliminar a esos tipos. Ponga esto justo en el centro. Esa es la herramienta de alineación. Vamos a hacer esto negativo 45 grados y vamos a querer entrar hacerlos todos blancos. Copia esto. Impresionante. Entonces, ahora tenemos nuestras interacciones de fila. Entonces, puedes seguir adelante y terminar estos estilos de filas como quieras para que coincidan tu app y luego cuando termines con esos solo terminar el resto de los microestados que tenemos aquí dentro. Entonces, el vacío y el mensaje de confirmación. Recuerda, he incluido un mensaje de confirmación en los componentes de iOS. Si deseas usar el mensaje de confirmación predeterminado del sistema operativo iOS o simplemente puedes diseñar tu propio personalizado. Depende de ti. En el siguiente video, aprenderemos a exportar nuestras pantallas para poder compartirlas alrededor con la gente. 10. Exportación de mesas de trabajo: De acuerdo, entonces ahora que terminamos de diseñar nuestra aplicación para iPhone, vamos a querer exportar nuestras pantallas para poder compartirlas con un ingeniero que va a estar construyendo nuestra aplicación o subirlas a la galería del proyecto Skillshare, donde podemos obtener algunos comentarios de nuestros compañeros de clase. Por lo que Sketch hace que sea realmente fácil hacer esto. Lo que vas a querer hacer es seleccionar cada una de las mesas de trabajo que quieras exportar de tu lista de capas en el lado izquierdo de Sketch. Entonces, lo que vas a hacer es volver a bajar a esta esquina inferior derecha y golpear este botón hacer exportable. Verás un poco de previsualizaciones de cada una de tus mesas y también podrás añadir varios tamaños también. Tan solo para mostrarte lo que esto hace, voy a seguir adelante hit a plus y voy a añadir el tamaño 2X aquí así que obtengo imágenes de doble tamaño de mis originales. Entonces seguiré adelante y golpearé mesas de trabajo de exportación, escogeré la carpeta a la que quiero exportarlas y presionaré el botón de exportación. Además, una característica rápida y fácil que el Sketch permite es la capacidad de compartir directamente al correo o incluso iMessage directamente desde Sketch. A veces viene muy útil. Entonces ahora si minimizo Sketch y navego hasta la carpeta donde guardé toda mi app de mesas de trabajo, puedo ver tengo una copia de cada una de mis mesas de trabajo en png tanto a tamaño 1X y tamaño 2X. Ahora estoy listo para compartirlas con mis amigos o subirlas a la galería del proyecto Skillshare. Entonces lo que quiero que hagas ahora es subir la pantalla de tu app principal a la galería de proyectos de Skillshare, y yo y tus otros compañeros entraremos ahí y dejaremos algunos comentarios y comentarios sobre tu trabajo. 11. Explora sobre diseño en Skillshare: manera.