Cómo gestionar tus inspiraciones de diseño UI con Eagle

En resumen

En esta guía, descubrirás la aplicación Eagle y cómo utilizarla para gestionar tus inspiraciones de diseño UI, con la ayuda de un completo tutorial y un Eaglepack listo para usar de la estructura de carpetas que utilizo.

Tabla de contenido

• ¿Qué es Eagle?
• Cómo uso Eagle para el diseño UI
• Para ir más allá
• Bonus: ¿dónde encontrar inspiraciones?

¿Qué es Eagle?

Cuando eres un diseñador UX/UI, a menudo tienes un montón de imágenes de diseños que te gustan, y puedes tender a guardarlos en carpetas en tu máquina o, por ejemplo, en tableros de Pinterest. Sin embargo, esto no es muy conveniente, ya que encontrarlas puede ser complicado a medida que se acumulan más.

Ahí es donde entra Eagle, que es una aplicación para Mac y Windows que te permite guardar y organizar todas tus imágenes que te inspiran. Va más allá al permitirte organizar cualquier tipo de archivo, como vídeos, audio o incluso tipografias y archivos 3D. Personalmente, lo uso sobre todo para organizar mis inspiraciones y encontrarlas siempre que sea necesario.

Lo descubrí hace un par de años, casi en el momento de su primer lanzamiento (recientemente han celebrado su quinto aniversario en abril de 2022 🎂). Desde entonces, Eagle suele estar abierto todos los días en mi Mac, es una de las herramientas que más uso con Notion y Figma.

La aplicación se complementa con su plugin de navegador (Chrome, Safari, Firefox y Edge), que permite guardar fácilmente las imágenes de un sitio y marcadores de tus favoritos.

¿Por qué utilizarlo?

Cuando se hace diseño UX/UI, o de hecho cualquier actividad creativa, basarse en otros trabajos es siempre una buena práctica. Hablo más sobre la creatividad y la importancia de la inspiración en ella aquí.

Con Eagle, podrás guardar fácilmente todas las imágenes, vídeos y sitios que te gustan y poder encontrarlos fácilmente el día de un proyecto, te ahorra tiempo y no tienes que depender sólo de tu memoria.

¿Qué haríamos sin Eagle?

Eagle no es la única forma de guardar tus inspiraciones, tienes varias a tu disposición, como los tableros de Pinterest o las colecciones en Dribbble y Behance, pero para mí, Eagle sigue siendo la mejor forma porque tus inspiraciones están centralizadas en un solo lugar, y no en varios servicios. Para ir más lejos, te presento las ventajas y desventajas de los diferentes métodos en este artículo.

¿Cuánto cuesta?

Sí, Eagle no es gratis pero por sólo 30$ y con el tiempo que nos ahorramos, merece la pena, y es un pago único con todas las futuras actualizaciones sin coste adicional. Además, puedes usar tu licencia en dos máquinas simultáneamente.

Es nuevo: Eagle Community

Recientemente, con Eagle 3.0, han lanzado muchas mejoras, una de las más importantes es Eagle Community. Accesible online o directamente desde Eagle, podrás descubrir y descargar directamente en tu biblioteca Eagle paquetes de ilustraciones, enlaces y otros assets, como por ejemplo este pack de iconos 3D gratuito.

También hay una sección de herramientas clasificadas por categorías.

Hablemos de las limitaciones

Así que sí, Eagle es genial, pero para que tengas una visión completa antes de usarlo, todavía tengo que hablarte de las principales limitaciones. Pero la verdad es que son realmente secundarias comparadas con los beneficios.

Sólo para Mac y Windows

Una de las principales limitaciones es que sólo funciona en estos sistemas, así que no tabletas o smartphones.

No hay una solución en la nube específica para Eagle

No es realmente un problema para mí, pero depende de usted para establecer un uso de la nube. Aunque puedas usar Eagle localmente, es recomendable en caso de que tu disco duro se estropee y quieras usar Eagle en otra de tus máquinas. Es decir, Eagle guarda todos tus archivos en una carpeta (llamada “library”), y es esta carpeta la que tendrás que poner en tu nube (Google Drive, Dropbox, iCloud etc.).

Dicho esto, como ellos lo explican aquí, es una elección por su parte que se justifica por el hecho de que, desarrollar una solución en la nube propia les llevaría mucho tiempo y podría causar problemas a los usuarios. Y sobre todo, les saldría más caro o incluso les obligaría a establecer un sistema de suscripción, así que personalmente, prefiero que hayan tomado esta decisión.

Compartir bibliotecas

Otro punto que mencionar, se refiere a compartir una biblioteca de Eagle entre varios diseñadores, puede haber conflictos cuando varias personas modifican una biblioteca al mismo tiempo. Por eso es mejor adaptada a un uso en solitario.

Una arquitectura de biblioteca específica para Eagle

Y por último, ten en cuenta que las carpetas de la biblioteca creadas por Eagle sólo pueden ser leídas por ella. Así que si la empresa cierra y el programa deja de funcionar, podría ser problemático. Sin embargo, incluso en este caso, hay muchas posibilidades de que hagan la herramienta gratuita, o incluso de código abierto, y siga funcionando.

Además, cuando importas un archivo en Eagle, por ejemplo una tipografia, se duplica en la biblioteca de Eagle, incluso si el archivo ya está en una carpeta tuya en tu máquina. Esto no es realmente un problema porque permite que Eagle esté más optimizado, más información aquí.

Cómo uso Eagle para el diseño UI

Ahora que hemos hecho las introducciones y estás más familiarizado con Eagle, aquí hay un tutorial en seis pasos sobre cómo lo configuro y lo uso a diario en el contexto específico del diseño UI. Nótese que con el tiempo, después de haber probado varias maneras de hacer, creo que he llegado a la más óptima.

En resumen, los seis pasos son:

• 1. Configuración
• 2. Guardar inspiraciones
• 3. Tómese un momento para ordenar
• 4. Encontrar inspiraciones
• 5. Visualizar las inspiraciones
• 6. Agrupar inspiraciones por proyecto

Ojo, esto es por supuesto un uso adaptado para mí, pero Eagle es potente y ofrece mucha flexibilidad en su uso, es decir que hay varias formas de conseguir el mismo resultado, así que depende de ti según tus necesidades y preferencias.

Estructura de carpetas ya lista para usar

Antes de empezar, he publicado en Eagle Community un pack con todas mis carpetas (sin las inspiraciones) para facilitarte la tarea en lugar de empezar desde cero:

Este es un archivo .eaglepack y al abrirlo (a condición de haber primero instalado Eagle y creado una biblioteca) importará una nueva carpeta “UI” en Eagle con toda mi estructura de carpetas, que introduzco en el siguiente punto “Creación de las carpetas”.

1. Configuración

Instalación

Descarga la versión para tu sistema desde su página web. Puedes instalarla y usarla gratis durante 30 días.

Primera biblioteca

Una vez instalado, Eagle te invitará a crear tu primera biblioteca. En mi caso, fue “inspirations”, es la que más uso y como su nombre indica, donde guardo todas mis inspiraciones. También uso otra “resources” del que hablaremos más adelante.

Luego, tendrás que indicar dónde guardarla, en mi caso la pongo en la nube porque uso Eagle en dos máquinas (trabajo y casa). Ten en cuenta que primero puedes ponerla en local y más tarde, si cambias de opinión por la nube, moverla allí. Entonces Eagle te pedirá que le digas la nueva ubicación de la biblioteca.

Configuración

Puedes cambiar la configuración según tus necesidades en las preferencias (Eagle > Preferences). Personalmente, sólo he puesto el tema en automático en “General”, el comportamiento de desplazamiento del ratón en “Vertical Scroll” en “Viewer” y he dejado el resto en las opciones por defecto.

Instalación del plugin del navegador

Una vez que Eagle está instalado y configurado, tienes que instalar el plugin para tu navegador.

Permite guardar imágenes en particular y una parte o un sitio completo, así como simplemente su URL.

Creación de las carpetas

En mi proceso, las carpetas son colecciones organizadas por temas. Aquí tienes una visión general de cómo es:

Puedes notar que no sólo tengo inspiraciones de diseño UI, creo que es importante encontrar inspiración en otras áreas también, aunque la carpeta “UI” es la que más tiene. Podría haber hecho dos bibliotecas, para tener inspiraciones de UI por separado, pero prefiero tener todo a mano.

Para crear una carpeta, vaya aquí:

También puedes ver que he asignado colores y iconos a cada colección para distinguirlas mejor. Para eso, un simple clic derecho te dará acceso a los parámetros (puedes seleccionar varias subcarpetas al mismo tiempo)

Así pues, tengo varias colecciones pero vamos a centrarnos en la estructura de la carpeta “UI”, ya que es la que más uso.

Dentro de ésta, he creado tres carpetas principales que siguen un orden lógico de diseño UI (cada parte se compone de elementos de la anterior):

• Components > Templates > Flows

Si aún no lo tienes, te aconsejo que descargues mi pack con todas mis carpetas de UI para no tener que crearlos todos manualmente.

Veamos el contenido de cada uno de ellos:

1 - Components

Aquí he agrupado todos los elementos básicos de las interfaces, por lo que encontrarás inspiración para botones, banners, overlays, formularios, pies de página, etc.

2 - Templates

Las plantillas son páginas y pantallas comunes a varios sitios o aplicaciones, por ejemplo una página 404, una entrada de blog, una página de precios, una página de estadísticas, etc.

3 - Flows

Esta es una carpeta que he añadido recientemente, los flows son acciones concretas como “añadir al carrito” o “crear una cuenta”. Por lo tanto, se basan en plantillas, por ejemplo, la acción “añadir al carrito” se compone de una plantilla “página del producto” y “página del carrito”, o incluso una modal después de la adición para confirmar la acción. Esta carpeta se compone, naturalmente, de capturas de vídeo.

Algunas carpetas pueden tener el mismo nombre

Por ejemplo, tengo una carpeta “Shopping carts” en “1 - Components” y otra en “2 - Templates”, sus diferencias son que en los components, serán inpiraciones de carros de compra integrados en templates (como un overlay) y en las plantillas, será una página entera dedicada al carro de compra. Puedes ver un ejemplo en el archivo de carpetas si lo has descargado.

Esta notación no es universal

De hecho, cada persona puede adaptarla según sus preferencias y su contexto, ya sea que estemos en Figma, en la documentación de un sistema de diseño, en un framework de código, etc.

Por ejemplo, Mobbin agrupa en “elements” lo que yo llamo componentes, pero al final, sigue siendo semántica y no importa los términos que se usen, mientras sigan siendo consistentes para un proyecto a lo largo del tiempo y todos los que trabajan en él usen los mismos, entonces está bien.

Para el usuario final, que su header se llame internamente “elemento”, “componente” o “sección” no tendrá ninguna diferencia para el.

Cuidado con el síndrome del coleccionista

Capturar miles de inspiraciones, clasificarlas según niveles extremadamente precisos y luego no utilizarlas nunca puede convertirse rápidamente en una pérdida de tiempo.

No debemos perder de vista nuestro objetivo, que no es crear la más bella y precisa colección de inspiraciones, sino ayudarnos en nuestro trabajo de diseño.

De hecho, podría ser tentador hacer aún más niveles de clasificación en los componentes, podríamos separarlos en básicos (aquellos que no se pueden dividir en otros componentes como un campo de texto), los que tienen varios subcomponentes básicos como un header, o, los que son puramente estructurales como los overlays (que pueden contener casi cualquier componente).

Nada te impide hacerlo, por supuesto, y es lo que yo solía hacer. Pero al final lo simplifiqué porque realmente no me ayudaba, al contrario, cuando añadía nuevas subcarpetas en los componentes, tenía que dedicar tiempo a pensar dónde ponerlo, y a veces traía un nuevo nivel de clasificación, obligándome a reorganizar otras carpetas…

Así que prefiero advertirte porque he estado allí y he visto el tiempo que puede consumir ⏳ .

En el punto 4 veremos cómo busco inspiraciones, y verás que esta organización funciona bien.

Creación de las etiquetas

Así, las carpetas son colecciones pero Eagle ofrece la posibilidad de asignar etiquetas a nuestras inspiraciones. En mi caso, las utilizo como atributos.

Ten en cuenta que si te has descargado el pack mencionado en el punto anterior, no he podido poner las etiquetas agrupadas por carpetas en él, así que te tocará a ti crearlas.

Para crear nuevas etiquetas, se hace seleccionando una inspiración y luego desde el panel derecho (o pulsando “T”). Desde ahí, puedes empezar a escribir el nombre de tus etiquetas, Eagle las creará si no existen. A continuación, puedes encontrarlas en la pestaña “All Tags” (atajo ⌘+6 o Ctrl + 6):

Puedes ver que las he agrupado en cinco partes con un color para cada una, ya veremos después, cuando encontremos inspiraciones, por qué esto es útil.

Veamos la función de cada grupo:

Supports

Como su nombre indica, para indicar un soporte. Por ejemplo una ilustración puede estar sobre un libro, un flyer, una tarjeta de visita, o una inspiración de UI sobre una pantalla de móvil, ordenador o tableta.

Categories

Aquí tengo etiquetas para dominios, por ejemplo una cabecera para un sitio web en la categoría “E-commerce” tendría esta etiqueta.

Topics

A veces me gusta asignar un tema a una inspiración, por ejemplo una ilustración divertida con “Funny” o inspiraciones con personajes usando “Character”.

States

Este es un grupo que he creado recientemente, los uso para describir un estado de un componente o una plantilla, por ejemplo, podría ser útil si tengo una inspiración de dashboard pero está vacío porque la cuenta acaba de ser creada, para asignarle la etiqueta “Empty” o el mismo dashboard con elementos pero cargando con la etiqueta “Loading”.

Styles

En este grupo hay aspectos visuales que doy a las inspiraciones como “3D”, “Minimalista”, “Retro”, etc. Por ejemplo, un banner con un bonito degradado y una ilustración en 3D tendría las etiquetas “3D” y “Gradient”.

¿Carpetas o etiquetas?

La pregunta se puede plantear porque ambas se pueden utilizar casi de la misma manera. Yo he probado varias formas, por ejemplo en un tiempo usaba sólo carpetas pero con el tiempo he llegado a usar ambas, sobre todo cuando busco en mi base de inspiración, lo veremos en el punto 4.

2. Guardar inspiraciones

Vayamos por ejemplo en Dribbble, con el plugin, tienes varias formas de guardar una imagen, mi favorita es simplemente hacer clic derecho mientras mantienes la tecla ⌥ (Alt) sobre la imagen en cuestión. Entonces la encontrarás en Eagle en “Uncategorized”.

Luego, digamos que te gusta un componente de un sitio, por ejemplo este banner:

Para hacer una imagen sólo de esta parte, uso la función “Capture Area” del plugin con ⌥+2 (Alt + 2) y Eagle incluso añade a la captura la URL del sitio automáticamente:

Consejo: con el modo “Capture Area”, puedes mantener pulsado ⌘ (Ctrl) y pasar el ratón por encima de los componentes, Eagle será lo suficientemente inteligente como para preseleccionarlos. Más información.

Ten en cuenta que también puedes guardar capturas fuera del navegador, de hecho, cuando Eagle está abierto, tienes un icono de el en la barra de menú de macOS en la parte superior derecha con las opciones de captura (atajo ⌥+⌘+E o Alt + Ctrl + E para capturar una parte de tu pantalla). Pero cuidado, a diferencia del plugin del navegador, no obtendrás la URL del sitio.

Y, por último, para guardar simplemente un enlace de una web, como si fuera un gestor de favoritos, uso “Save URL to Eagle” o ⌥+0 (Alt + 0). Ten en cuenta que, en este caso, podrás incluso navegar por el sitio guardado desde Eagle, que integra un navegador.

Estas son las tres funciones de guardado que más utilizo, pero puedes descubrir otras en esta página, sobre todo la de drag and drop que te permite poner tus inspiraciones directamente en una carpeta sin pasar por la pestaña “Uncategorized”.

Consejo: capturar una grabación de vídeo

Digamos que te gusta un efecto animado en un sitio, ¿cómo capturarlo en movimiento en Eagle? El plugin no permite (¿todavía?) hacer eso. Pero afortunadamente, macOS y Windows tienen cada uno una aplicación nativa para capturar un video de su pantalla, aquí es cómo lo uso en Mac:

Digamos que me gusta el efecto del header de esta web y quiero capturarlo para más tarde:

Entonces hago ⌘+⇧+5 y defino un área de grabación para capturar la página por un momento.

Luego pondré el vídeo generado en Eagle sin olvidar copiar y pegar la URL del sitio en la información del vídeo importado en el panel derecho (siempre es mejor si quieres comprobar el efecto en la fuente o simplemente encontrar la página original).

3. Tómese un momento para ordenar

A menudo, mi uso de Eagle se realiza en dos etapas:

1. Guardar las inspiraciones en la pestaña “Uncategorized” sin clasificarlas.
2. Dedicar un momento una vez a la semana para mirar las inspiraciones capturadas con el fin de etiquetarlas y ponerlas en una, o varias carpetas.

Al hacer esto, evito interrumpir lo que estoy trabajando, ya que a menudo me encuentro con inspiraciones mientras estoy inmerso en un proyecto de diseño, así que reservo un momento en la semana para ordenar todas las inspiraciones que he guardado. Al hacerlo, puedo “digerir” mejor las inspiraciones, la primera vez que las veo, y luego una segunda vez cuando las observo con más detalle para clasificarlas.

Estos son los pasos que sigo para clasificar:

Asignar etiquetas

Primero voy a la pestaña “Uncategorized” (atajo ⌘+2 o Ctrl + 2), tomo una inspiración y luego, antes de enviarla a una carpeta, le asigno una o varias etiquetas (con el atajo “T”).

Tenga en cuenta que también puede asignar etiquetas a varias inspiraciones al mismo tiempo si las selecciona juntas primero.

Enviar a una o más carpetas

Una vez añadidas las etiquetas, es el momento de enviar la inspiración a una(s) carpeta(s).

Para ello hago ⌘+⇧+J (Ctrl + Shift + J) para seleccionar la(s) carpeta(s) a la(s) que irá la inspiración (me muevo con las flechas y pulso enter en vez de con el ratón) y luego hago ⌘+⏎ (Ctrl + Enter) para enviar.

También puedes asignar carpetas a tu inspiración desde el panel de la derecha y en este caso se llaman “category”, pero eso es sólo semántica.

Y al igual que las etiquetas, puedes asignar carpetas a varias inspiraciones al mismo tiempo.

Una inspiración puede tener varias carpetas

Si por ejemplo una ilustración está en una pantalla de inicio de sesión, y me gusta tanto como la propia pantalla, puedo en este caso, asignar dos carpetas a esta imagen, “Illustration” y “UI > 2 - Templates > Logins and signups”.

Otro ejemplo, con un componente de testimonios que consiste en un carrusel, lo enviaré a “UI > 1 - Components > Testimonios” y “UI > 1 - Components > Carousel”. En la parte 4 veremos por qué es útil hacer esto.

Este es uno de los puntos fuertes de Eagle: su flexibilidad. Así, una inspiración puede estar en tantas carpetas como quieras, y debido a la forma en que Eagle maneja las bibliotecas, no se duplicará.

Utilizar clasificaciones, notas y comentarios

No son funcionalidades que utilice a menudo, pero pueden ser útiles para añadir niveles adicionales de clasificación.

Evaluaciones y notas

Puedes dar una evaluación de 0 a 5 estrellas a tus inspiraciones así como una nota. Para la evaluación, a primera vista podemos decirnos ¿por qué hacerlo en las inspiraciones que guardamos? Efectivamente, si las has guardado es porque te gustan y por eso todas tienen 5 estrellas. Por supuesto, pero hay un caso para mí en el que son útiles, en el caso en el que evaluaría no la calidad de una inspiración sino su dificultad, como 5 estrellas = técnicamente difícil.

Por ejemplo, si diseño un header para una web y busco entre mis inspiraciones, puede que no quiera mostrar headers demasiado complicados técnicamente porque sé que no voy a tener tiempo de llegar a algo similar.

Comentarios

Yo lo uso poco, pero puedes comentar con más detalle tus inspiraciones. Te será útil después, cuando las busques, porque Eagle te permite filtrar según los comentarios (además de las evaluaciones y las notas, por cierto). Para eso, una vez que tu inspiración está abierta en Eagle, puedes entrar en modo comentario con la tecla “C”.

4. Encontrar inspiraciones

Ahora que nuestras inspiraciones están etiquetadas y almacenadas en carpetas, es aquí donde entra en juego la magia de Eagle 🤩. Aunque pueda parecer un poco largo y tedioso, todo lo que hicimos antes nos permitirá, con las herramientas de búsqueda de Eagle, encontrar fácilmente y rápidamente lo que buscamos en nuestra base de datos, y créanme, es realmente útil cuando estamos trabajando en un proyecto y necesitamos obtener rápidamente inspiraciones específicas. Hay varios métodos, aquí están mis favoritos:

Desde la pestaña “All”

Como su nombre indica, aquí Eagle te muestra todas tus inspiraciones, clasificadas por orden de adición. También puedes cambiar el parámetro de clasificación aquí:

Así que, desde esta pantalla, si no tienes la barra de filtros desplegada, haz ⌘+⇧+F (Ctrl + Shift + F) y deberías tener esto:

Con ella se puede, por ejemplo, decirle a Eagle que sólo muestre las inspiraciones en estilo 3D (atajo ⌥+T o Alt + T para abrir las etiquetas), o incluso añadir el filtro “Types: gif, video” para ver sólo las inspiraciones 3D en movimiento, y podríamos filtrar aún más para mostrar sólo las procedentes del sitio Dribbble, por ejemplo:

Aquí es donde ayuda tener etiquetas agrupadas, porque también se utilizan en esta barra. Otro ejemplo, podría mostrar todas las inspiraciones en una pantalla de ordenador con la etiqueta “Desktop”, en la categoría “Finance” con el estilo “Dark”.

Tenga cuidado de elegir el modo “All” para mostrar sólo las inspiraciones que tienen todas las etiquetas y no una o más:

Consejo: puedes guardar los filtros que utilizas a menudo, para eso, una vez configurados tus filtros, tienes la opción de guardarlos para poder volver a ponerlos con un clic:

También hay una función de búsqueda en la parte superior derecha, en este caso Eagle buscará apariciones de este texto en los títulos, notas, comentarios, etiquetas, URLs, etc. de las inspiraciones.

Desde una carpeta específica

Esta es la forma que más utilizo. Por supuesto, puedes hacer lo mismo desde la pestaña “All” ya que también puedes filtrar por carpetas, pero es más directo de esa manera.

Yo suelo utilizar el atajo ⌘+J (Ctrl + J) que es similar a Spotlight en macOS (y que permite, entre otras cosas, navegar en las etiquetas pulsando Tab).

Tenga en cuenta que puede utilizar el acceso directo “/” para abrir/cerrar todas las carpetas rápidamente.

Una vez en una carpeta, sigo teniendo la barra de filtros en la parte superior, sólo que en este caso, ya sea por etiquetas o por carpetas, Eagle sólo me muestra las presentes en esa carpeta.

Del mismo modo, también se puede ir a una carpeta de “alto nivel”, por ejemplo, puedo ir a la carpeta “UI” y aplicar filtros. Sin embargo, tenga cuidado de marcar la casilla “Show subfolder contents” en la parte superior derecha.

Por eso poner las inspiraciones en varias carpetas puede ayudarme a encontrarlas mejor. Por ejemplo, si quiero inspiraciones de testimonios que utilicen un carrusel, sólo tengo que ir a “UI > 1 - Components > Testimonials” y filtrar por la carpeta “Carousel” en la barra superior:

Pero si ahora quiero ver inspiraciones de carruseles, que sea en una sección de testimonios o en otra, sólo tengo que ir a la carpeta “UI > 1 - Components > Carousels” para verlos todas.

Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator

5. Visualizar las inspiraciones

Una vez que se muestran las inspiraciones deseadas, tiene varias opciones de visualización. Tiene, por ejemplo, cuatro modos de presentación:

Una vez que hayas elegido una opción, puedes acercarte o alejarte con las teclas - y + de tu teclado.

También puedes pulsar la tecla Tab para ocultar las barras laterales. Luego, para obtener una vista más amplia de una inspiración, tienes tres opciones: abrirla con un doble clic, mantener pulsada la tecla Z en el hover, o en el Mac, pulsar la barra espaciadora.

También puedes, aunque yo lo uso poco, abrir el archivo con la aplicación por defecto con ⇧+⏎ o haciendo clic con el botón derecho, tienes más opciones de aplicaciones con “Open With”.

Si guardaste una inspiración de la web con el plugin, entonces Eagle guardó automáticamente su URL de origen, puedes abrirla en tu navegador con el atajo ⌘+⇧+O (Ctrl + Shift + O).

6. Agrupar inspiraciones por proyecto

Último punto de este tutorial, aquí está mi enfoque para hacer moodboards de inspiraciones agrupadas por proyecto.

Tengo una carpeta dedicada a esto llamada simplemente “Projects” y dentro de ella, crearé una nueva carpeta para cada proyecto que inicie. Entonces, durante el paso anterior de buscar inspiraciones, si me gusta una inspiración y quiero inspirarme de ella para mi proyecto actual, la enviaré a la carpeta de éste (Eagle la deja en su carpeta original) aún con ⌘+⇧+J (Ctrl + Shift + J).

Ejemplo con mis inspiraciones de diseño del blog:

También añadí esta carpeta en el “Quick Access” para tenerla siempre arriba en la barra de la izquierda, para eso, es haciendo clic con el botón derecho en la carpeta que quieres anclar.

Para ir más allá

Así pues, hemos visto las funcionalidades que yo utilizo principalmente, pero Eagle tiene muchas otras muy potentes 🚀, vamos a repasarlas:

Uso de otras bibliotecas

No estás limitado a una sola biblioteca, puedes crear varias. Para eso, puedes hacer ⌘+L (Ctrl + L) para mostrar la herramienta de gestión de bibliotecas.

Personalmente, utilizo otra para los recursos. No lo presentaré con más detalle aquí porque su estructura es casi idéntica a la de mi libro gratuito sobre los mejores recursos para el diseño UX/UI. Dicho esto, a diferencia de la biblioteca de inspiración, no uso etiquetas porque es más un gestor de marcadores que de inspiración, por lo que las carpetas por sí solas son suficientes.

Smart folders

Son carpetas especiales y dinámicas que no contienen archivos pero muestran algunos según unos filtros. Yo no las uso mucho, pero quizás en tu caso te sean útiles.

Por ejemplo, podríamos imaginar una carpeta inteligente que mostrara todas las inspiraciones procedentes de Dribbble, o para ir más allá, mostrar sólo las añadidas en los últimos 30 días y que sean de diseño móvil. Para esto, en el panel izquierdo, crea una nuevo smart folder con los siguientes filtros:

Eagle como gestor de assets

Más allá de las inspiraciones, Eagle puede gestionar un gran número de tipos de archivos, entre otros, SVG, tipografias o incluso archivos de audio.

Iconos

Los iconos son assets muy utilizados en el diseño UI y Eagle puede ayudarte a gestionarlos. No es una funcionalidad que yo personalmente utilice porque prefiero usar plugins como Icons8 o Material Symbols y una librería Figma para iconos personalizados, pero quizás en tu caso Eagle te convenga más, especialmente con el Eagle Community donde puedes encontrar paquetes de iconos gratuitos e integrarlos directamente en tu librería de Eagle, después, puedes copiarlos y pegarlos desde Eagle en tu herramienta de diseño.

Imágenes y vídeos

Además de los iconos, también puedes gestionar los assets fotográficos, las ilustraciones y los vídeos que sueles utilizar en tus diseños.

Fuentes

Eagle va más allá con este tipo de archivos, ya que no sólo puedes ponerlas en Eagle, sino que puedes activarlas directamente desde él. Es decir, si una fuente no esta activada, es como si no estuviera instalada en tu maquina. Yo no lo uso porque uso pocas, pero puede ser útil si, por ejemplo, tienes cientos de ellas pero solo las usas para ciertos proyectos puntuales o simplemente prefieres buscarlas con Eagle en vez de con la herramienta de tu sistema como Font Book en macOS. Más información aquí.

Tenga en cuenta que, por defecto, Eagle no propone el filtro “Font” en la barra de filtros, para activarlo, vaya en la configuración.

Otros consejos

Enumero aquí algunas funcionalidades que pueden ser útiles en algunos casos.

Filtro según el color

Puedes indicar un color en la barra de filtros y Eagle filtrará las inspiraciones que tengan un color dominante cercano a él.

Recortar una imagen

Eagle también tiene algunas funcionalidades que se pueden encontrar en un software de edición de imágenes. Una vez abierta la imagen en Eagle, tienes esta barra de herramientas en la parte superior derecha que te permite recortarla:

Convertir y reducir el peso de las imágenes

En la continuidad del punto anterior, Eagle permite incluso convertir y comprimir imágenes (todavía no vídeos). Por ejemplo, puedes convertir un JPG a WebP reduciendo la calidad o incluso el tamaño para tener un archivo mucho más ligero. Para eso, selecciona tu imagen y luego usa ⇧+E (o el botón “Export” en la barra derecha).

Etiquetado automático

Puedes configurar tus carpetas para que Eagle asigne automáticamente una o varias etiquetas a todo lo que pongas en ellas. Para eso, haz un clic derecho en tu carpeta para acceder a ella o utiliza ⌘+⇧+R (Ctrl + Shift + R).

Acciones

Una acción es una secuencia de tareas que puedes repetir en un solo clic, por ejemplo, añadir varias etiquetas y mover una inspiración a una carpeta, útil si tienes que hacer lo mismo a menudo. Para eso, se accede desde la parte superior derecha o con la tecla “G”.

Filtrar carpetas

Si, como yo, tienes muchas carpetas, una funcionalidad en la que uno no se fija necesariamente, es el hecho de que puedes filtrar la visualización de estas carpetas en la barra de la izquierda, con la entrada de filtros que hay en la parte inferior de esta misma barra.

Mover un archivo de una biblioteca a otra

Puedes mover fácilmente uno o varios archivos a otra biblioteca, para eso, una vez seleccionado el archivo o los archivos, haciendo clic con el botón derecho, tendrás la acción “Add to Other Library”.

Navegar por un sitio desde Eagle

Si has guardado una URL con el plugin de Eagle (⌥+0, Alt + 0), podrás navegar en ese sitio directamente desde Eagle, y también funciona para vídeos como YouTube. Una vez guardada la URL en Eagle, un simple doble clic sobre ella la abrirá en el navegador de Eagle.

Búsqueda de imágenes en Google

Probablemente lo sepas, pero Google te permite hacer búsquedas inversas de imágenes. Si por ejemplo quieres ver imágenes similares a una que tienes en Eagle, puedes hacer ⇧+G y Eagle lanzará la consulta en Google (también tienes otras opciones como Bing, para eso, haz click derecho en tu imagen y luego “Reverse Image Search”).

Importación automática

Una funcionalidad potente pero un poco escondida, te permite indicar una carpeta normal fuera de tu biblioteca que Eagle vigilará y todos los archivos que pongas en ella se importarán automáticamente en Eagle. Para configurarlo, está en los ajustes:

Modo de escala de grises

Un modo que puede ser útil si quieres buscar a través de las imágenes en función de su contraste y brillo sin que te “molesten” sus colores. El atajo para esto es ⌥+⌘+G (Ctrl + Alt + G).

Para ir más lejos 🦅

Con este artículo, te he presentado todos los puntos que, según yo, son los más esenciales para utilizar Eagle de forma óptima, pero si quieres ir más allá, te aconsejo que consultes la documentación oficial de Eagle.

Bonus: ¿dónde encontrar inspiraciones?

Hay muchas fuentes para encontrar inspiraciones pero no todas son iguales, entre mis favoritas tienes:

• Mobbin - Muy útil para encontrar diseños de aplicaciones móviles reales, para iOS y Android y categorizadas según varios criterios.
• Behance - Un clásico que existe desde 2005. Muchos proyectos reales en todos los campos creativos digitales.
• Dribbble - Más reciente (2010) pero tan conocido como Behance, tiende a mostrar conceptos más ficticios pero aparecen más y más proyectos reales.
• Awwwards - Un sitio muy conocido que califica el diseño de muchos sitios según criterios como la creatividad, la usabilidad y el contenido.
• Page Flows - Una mina de oro donde se presentan en vídeo muchos userflows de productos existentes, es de pago pero algunos son gratuitos.
• Muzli Magazine - Un blog de calidad que mezcla artículos de diseño UX/UI y colecciones de diseño seleccionados.

Para aprender más, escribí un libro gratuito donde enumero todos mis recursos favoritos de diseño UX/UI, desde las mejores herramientas hasta las mejores fuentes de assets y más, como dónde encontrar un trabajo en este campo.

Doko Zero
Diseñador UI con conocimientos de UX y desarrollo web