Este artículo forma parte de una serie que estamos realizando sobre Affinity Designer y Diseño UI en Silo Creativo. Puedes acceder al resto de ellos desde aquí:
- Diseño UI con Affinity Designer (I): Artboards
- Diseño UI con Affinity Designer (II): Guías y Cuadrículas
- Diseño UI con Affinity Designer (III): Recursos
- Diseño UI con Affinity Designer (IV): Restricciones
Tras abordar durante las últimas semanas la preparación de nuestro proyecto en Affinity Designer, ya sabemos como preparar los artboards donde irán nuestros diseños web o prototipos. Y como crear guías y rejillas personalizadas según nuestras necesidades. Así que el siguiente paso es saber como utilizar y, quizás incluso más importante, como gestionar nuestros recursos o assets. Aunque, en primer lugar, una cuestión que quizás os estáis preguntando algunos. ¿A que llamamos Recursos en Affinity Designer?
Los Recursos en Affinity Designer no son más que paquetes de elementos que podemos utilizar en uno o más proyectos. Ya sea en la misma sesión o otra diferente. Y los elementos que los componen pueden ser, por ejemplo, iconos, check-boxes, cuadros de texto, etc. Es decir, cualquier elemento que usamos una y otra vez para mantener una misma línea de diseño. Quizás el ejemplo más sencillo es si nos imaginamos que estamos diseñando una aplicación para iOS. Como todos sabemos, estas aplicaciones tienen unas lineas de diseño muy definidas, con colores, iconos y elementos que se repiten de unas a otras, y que son comunes a todas.
Pues los Recursos entran precisamente para facilitarnos esa tarea. Tener en un mismo lugar todos esos elementos, y que al alcance de un clic, podamos insertarlos de manera sencilla en nuestro diseño. Lo mismo ocurre en Android y las aplicaciones que se basan en Material Design. O incluso si estamos diseñando una web, muchas veces creamos unos diseños muy definidos, por ejemplo, a la hora de crear los botones de la web. Podemos crear un botón base que respete ese diseño, e ir insertándolo donde los vayamos necesitando.
Si habéis adquirido Affinity Designer, junto con vuestra compra os habrán facilitado un enlace con un paquete llamado Grade UI Kit. Entre los archivos de este Grade UI Kit, encontraremos un archivo que podremos importar a nuestro proyecto, y añadir un montón de recursos correspondientes a iOS 10.
Funcionamiento del panel de Recursos en Affinity Designer
Lo primero que vamos a hacer es comprobar si tenemos activo y visible el panel de Recursos dentro de Designer. No nos preocupemos si no lo vemos. Solo tenemos que ir a Vista > Estudio, y activar la opción de Recursos. Y automáticamente aparecerá en el viewport de Designer. Podemos mantener este panel flotante, o anclarlo justo con el resto que hay en el lado derecho. Personalmente, me gusta colocarlo en el lado izquierdo, ya que así me ocupa toda la vertical, y tengo una mejor visualización de todos los elementos.
Es posible que al abrir este nuevo panel de Recursos, aparezca completamente vacío. Esto será así si nunca lo hemos usado, o nunca hemos añadido algún paquete de Recursos, ya sea externo o uno creado por nosotros mismos. Así que, pongámonos a trabajar y veamos como podemos crear nuestros propios recursos.
Crear y gestionar nuestros propios paquetes de Recursos
Con lo primero que debemos familiarizarnos con el uso del menú desplegable del panel de Recursos. Lo podemos ver si pinchamos en el clásico icono de menú hamburguesa que hay en la parte superior izquierda del panel. En él tenemos todas las opciones que vamos a utilizar a lo largo del artículo. Pero antes que nada, necesitamos saber que elementos son los que queremos utilizar para crear nuestro primer paquete de Recursos.
En mi caso, quiero crear un paquete con los iconos de Font Awesome, ya que suelo usarlos con asiduidad en algunos de mis diseños web. Solo he ido a su página, y he bajado algunos para empezar a añadirlos a mi paquete de Recursos. Lo primero que hay que hacer es crear una nueva categoría, en donde irán todos nuestros elementos. Nos vamos al menú del panel, y pinchamos en Crear Nueva Categoría. Por defecto, no creará una llamada Predeterminado. Pero como queremos mantener cierto orden en nuestros Recursos, en mi caso la llamaré Font Awesome. Así no me perderé la próxima vez que la vaya a utilizar.
Si has estado atento, habrás observado que dentro de la Categoría se ha creado una Subcategoría llamada Default. Las Subcategorías nos permiten jerarquizar aún más nuestros Recursos. Y es ideal, ya que en Font Awesome tenemos iconos de color negro y de color blanco. Por lo que, haciendo clic derecho sobre el nombre de la Subcategoría la podemos renombrar. Y en el menú desplegable del panel, nos da la opción de crear una nueva Subcategoria. Perfecto, ya solo tenemos que empezar a añadir los diferentes elementos.
A continuación, abriré en Designer todos los iconos que voy a añadir a mi paquete de Recursos de Font Awesome. Da igual si está en una misma ventana o en diferentes, ya que en todas debemos tener el panel de Recursos. Una vez tengamos los iconos abiertos, podemos seleccionar uno (o varios, si los tenemos en la misma ventana), y elegir la opción de Añadir desde la Selección. Esta opción está disponible en el menú desplegable de la Subcategoría correspondiente. Y como por arte de magia, tendremos todos nuestros iconos en el panel de Recursos.
Para que la búsqueda de los elementos sea más efectiva, si hacemos clic derecho sobre cada uno de ellos, tenemos la opción de cambiarles el nombre. Aspecto muy útil cuando tenemos un paquete de Recursos muy grande. Además, así le damos uso al buscador que hay en la parte inferior del panel. Que nunca está de más usar las funcionalidades que trae el programa.
Importar y Exportar Recursos en Affinity Designer
Por último, vamos a ver como podemos añadir recursos externos. Es decir, que los haya creado un compañero y lo compartamos para un proyecto. O simplemente que lo encontremos como descarga en alguna página o foro online. Como dijimos al principio, podemos conseguir de forma gratuita el paquete Grade UI Kit desde la propia página de Serif al haber adquirido Affinity Designer. Pero en esta ocasión, vamos a importar otro paquete de recursos, y así vemos de paso donde podemos encontrarlos.
Imaginemos que vamos a diseñar una aplicación siguiendo los principios del Material Design de Google. Podríamos hacer sus iconos correspondientes, lo cual sería una ardua tarea. O incluso ir a la propia web de Google y descargar todos los iconos disponibles, e ir añadiéndolos a un nuevo paquete de recursos. Y con el ejemplo de Font Awesome que hemos visto anteriormente, si el paquete de elementos es muy amplio, podemos consumir bastante tiempo. Pero en esta ocasión hemos tenido suerte, ya que si entramos en los foros oficiales de Affinity (lo cual os recomendamos enormemente por lo que podemos aprender), encontramos un hilo en el que un usuario ya ha hecho este proceso. Y que nos ofrece un enlace para descargarlo.
Una vez tengamos descargado el archivo comprimido en nuestro ordenador, solo tenemos que descomprimirlo. Dentro encontraremos un archivo con extensión .afassets. Para añadirlo a nuestro panel de Recursos dentro de Designer, solo tendremos que desplegar el menú correspondiente que hemos visto anteriormente, y elegir la opción Importar Recursos. Buscamos el archivo, y automaticamente ya lo tendremos disponible siempre que abramos Designer. Rápido y sencillo.
Esto mismo lo podemos hacer no solo con los Recursos que encontremos en Internet. Si trabajamos en equipo, y queremos compartir alguno de los Recursos que hemos creado, solo tenemos que usar la opción de Exportar Recursos, que encontramos en el menú desplegable. Y el archivo que creemos, solo tendremos que facilitárselo a nuestros compañeros. O quizás compartirlo con la comunidad para que otros pueda aprovecharlo. Con esto acabamos con la pesadez de que nos tenga que pasar una carpeta con ciertos de archivos, y con el consiguiente problema de formatos de archivos de imagen que podamos encontrar.
Y con esto terminamos esta tercera parte. Y el siguiente y último capítulo, veremos como utilizar las restricciones. Un aspecto fundamental y que marca una diferencia importante con respecto a otros programas de diseño vectorial. Con las restricciones podemos controlar la posición y el tamaño de los elementos con respecto a su contenedor. Pudiendo crear diseño que sean pseudo-responsives. Pero no adelantemos acontecimientos tan pronto. Lo veremos en profundidad en unos días.
