Durante la WWDC 2019, Apple presentó un conjunto gratuito de más de 1500 símbolos para ser usados por los desarrolladores en sus aplicaciones. Aquí te explicaré cómo utilizar los nuevos Apple SF Symbols en tus aplicaciones. De todas formas, aunque sean gratuitos, hay que tener en cuenta los acuerdos de licencia que indica Apple:

All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.

Qué son los SF Symbols

Tal como hemos dicho, los SF Symbols son un conjunto de más de 1500 íconos, integrados en la fuente de texto San Francisco y que son configurables para todo tipo de tamaño y peso.

Ejemplos de un SF Symbol en diferentes tamaños y pesos.

Para poder saber qué íconos hay disponibles podemos descargar una aplicación de Apple. Esta apliación está disponible para macOS 10.14 y posteriores.

Aplicación de Apple que contiene todos los SF Symbols.

Con esta aplicación podemos mostrar íconos tanto por peso (en la imagen anterior estaban mostrados los íconos con peso ultralight), o por temática. Así, si en la columna de la izquierda seleccionamos Weather, veremos todos los íconos relacionados con esta temática.

Symbolos correspondientes a la temática Weather.

Soporte

Los SF Symbols pueden usarse en las siguientes plataformas:

  • iOS 13 y posterior
  • watchOS 6 y posterior
  • tvOS 13 y posterior

Exportar, modificar y validar SF Sybols

Los SF Symbols también se pueden exportar desde la aplicación, simplemente hay que seleccionar el símbolo que se quiera exportar y desde el menú superior, seleccionar File > Export Custom Symbol Template… o teclear ⌘E. Con esto obtendremos el ícono en formato SVG.

Seleccionamos la opción Export Custom Symbol Template del menú superior.
Indicamos el lugar de exportación del símbolo en formato SVG.

Una vez hemos exportado el ícono podemos modificarlo mediante otro programa, en este caso cambiaremos el color del ícono de negro a amarillo.

Ícono original.
Ícono cambiado de color.

A continuación, hemos de comprobar si las modificaciones realizadas son válidas. Para ello, desde la aplicación SF Symbols vamos a File > Validate Custom Symbols…, seleccionamos el fichero .svg del ícono modificado y lo validamos.

Validación del símbolo modificado.

Una vez hecho esto, podemos ir a un proyecto de Xcode, seleccionamos la carpeta Assets y arrastramos a su interior el fichero .svg. Ahora ya podemos utilizarlo.

Símbolo añadido a un proyecto en Xcode.

Cómo usar SF Symbols en nuestros proyectos

Uso de SF Symbols en iOS 12

Los SF Symbols sólo se pueden utilizar de forma nativa en iOS 13. Por tanto, ¿cómo podemos utilizarlos en veriones anteriores, como iOS 12?

Si queremos utilizar alguno de estos símbolos en versiones anteriores a iOS 13, lo que debemos hacer es exportar ese símbolo (tal como hemo visto antes) y, mediante alguna herramienta gráfica, transformarlo a formato png (por ejemplo) e importarlo en el catálogo Assets.xcassets del proyecto.

Uso de SF Symbols en iOS 13 y SwiftUI

El uso de SF Symbols con SwiftUI es muy sencillo, simplemente hemos de añadir un componente Image con el nombre del símbolo que queremos mostrar:

Una vez tenemos el símbio, podemos modificar su tamaño y color de diferentes formas, por ejemplo:

Uso de SF Symbols en iOS 13 y UIKit

Si queremos utilizar un SF Symbol en un proyecto en iOS 13, pero trabajando con UIKit en vez de SwiftUI, tenemos dos opciones: crearlo con código o en un storyboard.

Código

Para usar esto símbolos en Swift, los llamamaos en un component UIImage utilizando el parámetro systemName en vez de named:

Ahora bien, si queremos configurar su aspecto tal como hemos hecho en el caso de SwiftUI, debemos utilizar la clase SymbolConfiguration de UIImage:

Si nos fijamos, al ir introduciendo el código para generar la configuración, vemos que existen numerosos inicializadores para dicha configuración.

Inicializadores para UIImage.SymbolConfiguration.

De esta forma podemos configurar diferentes parámetros de la apariencia del símbolo como, por ejemplo:

Storyboards o ficheros .xib

En el caso de utilizar Storyboards o ficheros .xib, el uso de SF Symbols es sencillo:

  • Arrastramos un componente UIImageView sobre la vista:
Añadimos un elemento UIImageView a la vista.
  • A continuación, en el Inspector de Atributos, seleccionamos el símbolo que queremos mostrar (nos aparece un menú con los símbolos disponibles):
En el Inspector de Atributos seleccionamos el símbolo que queremos mostrar.
  • Finalmente, modificamos los atributos del símbolo (tamaño, peso, escala, color…):
Modificación de los atributos del símbolo.

Casos específicos en iOS 12: UIImageView y UIButton

Además de añadir la configuración de un símbolo al crear un elemento UIImage, hay dos casos nuevos en los que se puede aplicar esta configuración: UIImageView y UIButton.

Esto se puede realizar a partir de una nueva propiedad que presentan estos elementos: preferredSymbolConfiguration en el caso de UIImageView y setPreferredSymbolConfiguration(_:forImageIn:) en el caso de UIButton.

Estas propiedades lo que nos permite es configurar una imagen, por ejemplo, para que se asemeje al texto que tiene a sua alrededor.

Conclusión

Gracias a los más de 1500 símbolos que Apple presento durante la WWDC 2019, y que podemos utilizar de forma gratuita, podemos desarrollar aplicaciones de forma más rápida con un acabado profesional.


0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme en Feedly