Novedades de SF Symbols 7

Hola, soy Kelsey. Formo parte del equipo de diseño de Apple. Hoy me emociona hablarles sobre las nuevas actualizaciones de SF Symbols. Asegúrate de ver la sesión de la WWDC “What's new in SF Symbols 6” del año pasado, ya que es un gran recurso para ponerte al día y prepararte para lo que viene. Antes de empezar, repasemos el diseño y la creación de símbolos, una pieza clave para comprender las nuevas funcionalidades de este año. Cada símbolo está diseñado y creado cuidadosamente para transmitir una idea fácil de reconocer. Estas ideas se traducen en un diseño, empezando con un punto vectorial y creando una ruta continua que comienza a tomar forma. Cada punto vectorial y curva se guía con intención, definiendo el carácter y el contorno de la forma. Cada curva y ángulo debe sentirse deliberado, equilibrado y visualmente comunicativo.

Centrémonos en la flecha. Un símbolo no es solo una ruta con contorno visible. Son los detalles sutiles los que lo hacen especial. En cambio, está construido con formas delineadas con cuidado, para controlar las proporciones, el espacio negativo y el peso visual. Esto garantiza claridad, consistencia y una apariencia refinada e intencional. Algunas formas se crean con dos trayectorias diferentes, orientadas en direcciones opuestas, que permiten a cada trayectoria refinar su aspecto, y es una pieza importante para definir cómo estas trayectorias pueden animarse. Veamos las novedades de este año para entender cómo esto se incorpora a nuestras últimas experiencias. Empezaremos presentando Draw, que tiene nuevos ajustes de animación y renderizado. Seguiremos con nuestras actualizaciones al reemplazo mágico, que este año mejoramos. Veremos los degradados y descubriremos cómo se aplican en símbolos y modos de renderizado, antes de que profundizar en cómo crear los tuyos personalizados. Por último, veremos las actualizaciones de nuestras API. Tenemos mucho que ver, así que empecemos. Este año, traemos Draw a SF Symbols, un conjunto de funcionalidades inspiradas en la escritura a mano que permite a los símbolos dibujar a lo largo de su trayectoria definida.

Con Draw, presentamos dos nuevos ajustes preestablecidos de animación. Draw On anima el símbolo al aparecer en la pantalla y Draw Off al desaparecer de la pantalla. Estos ajustes aprovechan la estructura en capas y se integran a tus experiencias para resaltar momentos relevantes a través de la animación. Draw On y Draw Off son compatibles con opciones de reproducción como By Layer, la opción predeterminada, donde cada ruta se dibuja con un desfase inicial. Si buscas un efecto más rápido e inmediato, puedes animar con Whole Symbol, que dibuja todas las capas juntas, donde cada ruta de dibujo empieza y termina al mismo tiempo. O puedes aprovechar nuestra nueva opción de reproducción para los preajustes de dibujo, Individually, que dibuja cada capa una a una, y espera a que termine la capa anterior antes de empezar con la siguiente. Usa esta opción si buscas ser intencional y llamar la atención sobre movimientos individuales. Diseñamos Draw para que sea flexible, de modo que cada símbolo defina cómo se dibuja. Por ejemplo, el viento se dibuja de izquierda a derecha, pero este carácter se dibuja de derecha a izquierda, como su dirección de escritura. Además, algunos símbolos pueden dibujarse desde el centro, como este símbolo simétrico. Entender las direcciones de dibujo disponibles te ayudará con tus símbolos personalizados, que analizaremos más adelante en esta sesión. Los símbolos más complejos, como las flechas, se componen de dos formas que actúan como una. Draw admite estas formas compuestas, permitiendo que la punta de la flecha siga su ruta. Este movimiento puede reforzar el significado del símbolo y darle vida a tu app. Ahora que vimos Draw, pasemos a la app SF Symbols y veamos un adelanto de estas nuevas animaciones. Draw On y Draw Off se agregaron a la lista de animaciones en el inspector. Comenzaré seleccionando Draw On, lo que revelará las tres opciones de reproducción que vimos antes. Como con los ajustes de animación, puedo tener una vista previa aquí en la app. Draw Off es similar, con una diferencia, el interruptor inverso. Esto indica si la ruta debe borrarse siguiendo su dirección original, continuar con el movimiento existente o en reversa desde el final. Draw es una excelente manera de animar símbolos, pero también se puede usar para transmitir progreso. Si conoces el color variable, tal vez sepas que algunos símbolos son compatibles con un renderizado variable para trasmitir intensidad o progreso a través del color. Para lograr una resolución mayor, agregamos Variable Draw a los ajustes de renderizado. Variable Draw aprovecha las anotaciones de dibujo en las capas.

Renderiza la ruta a un porcentaje específico sobre una versión con menor opacidad de la capa. Esta es una buena forma de ver progreso, como en una descarga, para reflejar la temperatura o al completar una sesión de yoga.

Volvamos a la app SF Symbols y veamos las actualizaciones del Inspector de renderizado, donde puedes tener una vista previa. Mejoramos el selector de renderizado de variables para incluir una opción de dibujo.

Selecciono Draw, y ahora las capas de dibujo reaccionan al renderizado variable, igual que con el color.

Es importante destacar que los símbolos admiten color y dibujo variables, pero solo puedes elegir uno al renderizar. En este caso, puedes usar la opción predeterminada para usar el modo de renderizado preferido del sistema. Además de las nuevas animaciones de Draw, también mejoramos el reemplazo mágico para ofrecer mayor continuidad al animar símbolos relacionados. El reemplazo mágico ahora reconoce formas coincidentes para una transición fluida entre dos estados. Si dos símbolos comparten la misma forma, el sistema la conservará y al mismo tiempo reemplazará las capas diferentes. También agregamos Draw al reemplazo mágico para los símbolos compatibles, aprovechando Draw Off para el símbolo saliente y Draw On para el símbolo entrante. Junto con la combinación de la forma, el sistema mezclará y combinará estas nuevas funcionalidades en los símbolos participantes para ofrecer la transición más fluida y expresiva. Estas mejoras se pueden ver a través del ajuste de reemplazo mágico existente en el inspector de animación. Si es la primera vez que usas SF Symbols, se encuentra en el selector de animación con los otros ajustes. Los degradados se usan para agregar profundidad, dimensión e interés visual a un dibujo. Este año, nos complace anunciar que los degradados llegarán a SF Symbols. Cuando se aplica a un símbolo, el degradado crea sensación de iluminación que no está presente con los colores planos. La nueva renderización en SF Symbols genera un degradado suave y linear a partir de un color de origen, disponible en colores del sistema y personalizados. Están disponibles en todos los modos de renderizado y se pueden aplicar a tus símbolos personalizados.

Se ven bien en todas las escalas y tamaños, pero destacan en instancias más grandes. Usa degradados donde quieras destacar la profundidad y la dimensión de los símbolos. Volvamos a la app SF Symbols para obtener una vista previa, que activo con el nuevo interruptor debajo del modo de renderizado en el inspector. En la vista previa, el degradado se aplica en todos los modos de renderizado, con las opciones seleccionadas. Ahora que vimos estas nuevas funcionalidades en acción en los símbolos del sistema, sigamos con la creación de tus propios símbolos personalizados. En esta sección te mostraremos cómo anotamos algunos de nuestros símbolos. Si quieres puedes duplicarlos como símbolos personalizados, eliminar los puntos guía existentes y realizar anotaciones con nosotros. Para entender cómo funcionan las anotaciones, debes recordar los detalles de cómo se dibujan los símbolos. En este corazón de ejemplo, el símbolo se construye con dos rutas separadas. Y scribble.variable se dibuja con un ancho variable. Esto significa que no podemos simplemente trazar para crear la animación. Entonces, ¿cómo funciona realmente Draw?

Las animaciones se basan en un conjunto de puntos guía a lo largo de la ruta deseada. Como sugiere su nombre, estos puntos guían a lo largo de la ruta definida. Como mínimo, debe tener dos puntos guía para calcular correctamente la ruta de dibujo. Un punto inicial, indicado por un círculo abierto, y un punto final, indicado por un círculo cerrado. A medida que las rutas se vuelven más complejas, pueden requerir puntos adicionales para rellenar los espacios entre el inicio y el final, indicar varias rutas, o incluso guiar una flecha a lo largo de la ruta. También algunos símbolos requieren puntos guía especializados para ayudar al sistema a calcular correctamente la ruta de dibujo. Por ejemplo, varias rutas pueden compartir un punto inicial o final y las curvas cerradas deben marcarse como puntos de esquina. Hay mucho por ver, así que vamos a la app SF Symbols para explorar cómo anotar estos símbolos. Empecemos con la línea diagonal como nuestro primer ejemplo. Cambié a la vista de galería con los controles de la barra de herramientas de la app. Al seleccionar Draw On o Draw Off en la lista de animaciones, la barra de herramientas de Draw aparece en la parte superior. Al seleccionar el botón de la izquierda ingreso al modo de punto guía, que me dará una vista previa de la ubicación a medida que me muevo.

Cuando defina la ubicación, puedo colocar el punto guía con un solo clic y continuar con el siguiente punto. Notarás que el primer punto guía se convierte automáticamente en el punto inicial. Al colocar el segundo punto, el sistema determinará el final y la dirección del dibujo con una flecha.

Ahora puedo probar la animación.

Nuestra línea se dibuja hacia arriba por la ruta definida.

¿Pero qué pasa si el símbolo es complejo? Este tiene bastantes giros y para guiar la animación en cada giro, debemos colocar algunos puntos más en la ruta. Vamos a la app SF Symbols para intentar replicar esta anotación.

Ya tengo algunos puntos, pero necesito rellenar los huecos alrededor de las curvas cerradas. Es importante ubicar bien los puntos para que la ruta se anime de forma fluida en las formas más complejas. Vamos a probarlo.

Perfecto. La animación ahora gira muy bien. Hasta ahora, solo anotamos símbolos de una sola ruta. ¿Pero qué pasa con los símbolos con más rutas? Cada ruta en un símbolo puede usar las mismas reglas para definir su ruta y dirección de dibujo específicas. Si estás anotando conmigo, ve a la línea 3 horizontal para probar esto.

Puedo hacerlo de distintas maneras, pero comenzaré anotando cada línea para dibujar de izquierda a derecha, seleccionando cada capa para anotarla.

Genial, pero tal vez quiero que la línea del medio se dibuje en la dirección opuesta. Puedo arrastrar los puntos guía existentes a lo largo para moverlos. A medida que arrastro el punto de inicio a otro punto guía, la dirección de la flecha cambia e indica que la ruta ahora se dibuja en la dirección opuesta. Esto funciona bien para símbolos de una sola dirección, pero algunos tienen direccionalidad implícita desde su centro. Para estos podemos anotarlos para que se dibujen en dos direcciones. wave.3.up es un excelente ejemplo para esto. Puedo comenzar ubicando mi punto inicial en el centro y luego colocar puntos guía adicionales a cada lado del punto de inicio. El sistema reconoce automáticamente las dos direcciones y lo indica con flechas a cada lado del punto de inicio. Debo asegurarme de que todos mis puntos iniciales estén alineados en las capas para un efecto simétrico. Puedo activar el ajuste para ayudarme a lograr esto.

A medida que anoto las dos rutas siguientes, notarás que mis puntos guía se ajustan tanto a los vértices como a los puntos guía existentes en otras capas.

Revisaré mi animación para asegurarme que ahora se dibujen del centro hacia afuera. Ya anotamos algunos símbolos, así que veamos opciones de configuración adicionales para personalizar las animaciones de dibujo como desees. Por defecto, las rutas se dibujan con un extremo redondeado, pero quizá necesitas otro estilo. En este ejemplo, notarás que la animación es abrupta al final, porque la tapa redondeada no coincide con el dibujo, pero podemos solucionarlo. Con el menú contextual en los puntos iniciales, podemos configurar tapas y extremos adaptables para que usen el estilo de la ruta durante la animación. Vamos a intentarlo de nuevo.

Mucho mejor. Las rutas ahora se animan con su estilo de dibujo. Es importante tener en cuenta que las tapas adaptables solo están disponibles en los símbolos que se dibujan en una sola dirección. Todos los símbolos hasta ahora se construyeron con formas dibujadas como una única ruta. Sin embargo, no todos los símbolos están diseñados así. Los símbolos que se crean con muchas rutas también se pueden anotar, pero tienen una mecánica diferente. Anotemos este círculo. Cuando coloque mi primer punto guía, el sistema detectará que está situado a través de dos subrutas y lo tratará como punto inicial y final, lo que se indica mediante la cápsula en el borde de salida del punto guía. Por defecto, se dibuja en el sentido de las agujas del reloj.

Si quiero que se dibuje en sentido contrario a las agujas del reloj, puedo cambiar la dirección a través del menú contextual del punto guía y, si es necesario, puedo agregar puntos guía adicionales a lo largo de la ruta para formas más complejas. Como te habrás dado cuenta, este tipo de dibujos solo permite la animación unidireccional y no se puede anotar para dibujar bidireccionalmente. Los componentes de no dibujo aparecerán por defecto, pero en algunos casos, como el de las flechas, es posible que tengas que hacer alguna anotación adicional para obtener el resultado deseado. Repasemos cómo anotarlos.

El componente de línea del símbolo se animaría bien, en el sentido de las agujas del reloj. Pero sería mejor si la punta de la flecha estuviese unida a la línea mientras se dibuja. Al arrastrar la punta hacia un punto guía ya ubicado, creo una unión, un elemento de no dibujo asociado a un punto guía. El punto guía adjunto indica desde dónde aparecerá y seguirá la ruta. Después de crear una unión, obtendrás una vista previa de la ruta adjunto al punto guía asociado. Para eliminarla, simplemente arrastra la ruta fuera del punto guía y suéltala en otro lugar del lienzo. Es importante tener en cuenta que para crear una unión, la flecha debe dibujarse como una ruta separada de la base. Para usar las uniones de dibujo, debes revisar y modificar tus símbolos personalizados para separar elementos como flecha. Anotamos varios símbolos diferentes con la colocación automática de puntos guía. Pero no todos los símbolos son fáciles, por eso incluimos opciones avanzadas para ayudarte con los más complicados. Al colocar puntos guía, el sistema decide la ubicación por defecto de cada punto guía. En algunos casos, la ubicación predeterminada podría no ser la óptima para el símbolo.

En estos casos, debes mantener presionada la tecla Opción y arrastrar un lado del punto guía hacia adelante o atrás en la ruta, sin afectar el punto asociado. En símbolos con muchas rutas superpuestas, o directamente encimadas, puede ser difícil colocar el punto guía en la subruta correcta desde la vista de capa. Para esto, puedes seleccionar la subruta directamente en la lista de capas, para forzar un punto guía específico en esa subruta. Cuando anteriormente en la sesión hablamos sobre los puntos guía, mencionamos algunos tipos específicos de puntos guía: iniciales y finales. Al colocar puntos guía, el sistema determina los tipos según la ubicación en la ruta. Igual que con la ubicación, puedes anular el tipo por defecto en el menú contextual de un punto guía. Aquí puedes decidir si quieres que el punto guía sea estándar o un punto final. Y puedes establecer un punto automático para que el sistema haga el trabajo por ti. Puede que notes un tipo de punto guía adicional en esta lista que aún no abordamos: las esquinas. En las rutas con esquinas pronunciadas, el sistema necesita un manejo especial, que se logra especificando los puntos guía como puntos de esquina. Los otros tipos de puntos guía funcionan asociando dos puntos, uno a cada lado de la ruta. Los puntos esquina son únicos porque asocian dos puntos del mismo lado de la ruta y se indican con un diamante. Dependiendo del diseño de tu símbolo, la anotación puede requerir prueba y error. Si alguna vez necesitas empezar de nuevo, solo usa la opción Reset Guidepoint en el menú contextual de cada capa. No existe una única forma de colocar los puntos guía. Prueba diferentes ubicaciones para encontrar la que mejor te funcione. Recuerda que los símbolos admiten nueve pesos diferentes y tres escalas. Debes asegurarte de que tu símbolo personalizado se anime correctamente en todas las configuraciones. Pero no te preocupes, solo necesitarás anotar tres y el sistema se encargará del resto. Al anotar un símbolo personalizado, debes comenzar anotando el peso regular. Esto sirve como anotación base y es el único peso donde puedes agregar y quitar puntos guía.

El sistema interpolará automáticamente los puntos guía a los otros dos pesos de plantilla, ultraligero y negro.

Ten en cuenta que cada punto guía ultraligero y negro está asociado a su punto guía de origen en el peso regular.

Si muevo el punto guía en el peso regular, también se moverán los puntos guía asociados en ultraligero y negro.

Como los símbolos se pueden interpolar entre pesos con las plantillas, debes asegurarte de que los puntos guía asociados estén en el mismo orden en regular, ultraligero y negro. Veamos la ubicación actual de nuestros puntos guía. En general, están bastante bien. Pero parece que hay algunos puntos fuera de lugar en el peso negro. Podríamos arreglar fácilmente estos puntos guía, pero debemos ver que estén en el orden correcto. Para esto, podemos activar los números de puntos guía, que muestran números únicos en cada punto para indicar el orden de aparición según el orden asociado del peso regular. Notarás que seis, siete y ocho están fuera de orden, lo cual puedo solucionar rápidamente arrastrándolos a nuevas ubicaciones. Los puntos guía sobrescritos se ven en naranja y garantizan que los símbolos se dibujen correctamente en todas las configuraciones. Con esto anotamos completamente nuestros símbolos para Draw. Con unos pocos pasos, podrás ser el animador de tus propios símbolos.

Ahora que están anotados, podemos decidir si queremos que opten por variables o no.

Después de activar el interruptor de renderizado variable en configuración, puedes activar una capa con el botón de dibujo variable en la lista de capas. Siempre puedes obtener una vista previa con el control de renderizado variable que vimos. Al realizar esta selección, debes revisar cada capa para determinar cuidadosamente cuáles deben participar. En el ejemplo del termómetro, solo habilitamos una capa, para que el medidor transmita el progreso sin afectar las otras capas de dibujo. Así anotas símbolos personalizados para Draw. Ahora que vimos todas las nuevas funcionalidades que llegan a SF Symbols 7, veamos las actualizaciones de las API para usarlas directamente en el código. Para nuestros nuevos ajustes de animación, puedes usar Draw con el modificador symbolEffect, siguiendo el esquema de animaciones. En SwiftUI, cuando el valor de isHidden se actualiza, el símbolo se dibujará y borrará, aplicando la animación. En AppKit y UIKit, puedes especificar si quieres Draw On o Draw Off respectivamente para cada animación. Al igual que con otros, si quieres anular el valor predeterminado de By Layer, puedes configurar el modo de reproducción deseado directamente en la línea.

Para aprovechar el dibujo variable, especifica el modo de valor variable en las secciones relevantes. Asegúrate de establecer el valor de la variable deseada al configurar el símbolo. Para aprovechar el degradado, configura el modo de renderización de color en degradado con el modificador de vista SwiftUI o la configuración de símbolos para UIKit y AppKit. Con unas pocas adiciones a tu código, puedes aprovechar todo el poder de SF Symbols 7. Siempre puedes buscar el botón de copiar código en la app SF Symbols si lo necesitas. Hoy vimos bastante, así que repasemos los pasos para aprovechar al máximo estas nuevas funcionalidades.

Si no lo hiciste, descarga la versión beta de SF Symbols 7 para ver las actualizaciones en nuestra biblioteca, tener una vista previa del degradado y experimentar el poder de Draw. Revisa tus dibujos para que estén diseñados para aprovechar todas las opciones disponibles de anotación. Consulta la documentación de estructuras para saber cómo aprovechar estas funcionalidades directamente en el código. Y esas son las novedades en SF Symbols 7. Ya queremos ver qué haces con estas nuevas funcionalidades.