Porque se viene un pedazo de taller, un pedazo de contenido de la mano de Carmen Ansio, que para mí es una verdadera salvaje del UX, del diseño web, del desarrollo web, ha un montón de CSS, siempre está compartiendo un montón de perlas, ha participado en todas las conferencias que hemos hecho aquí, porque nos encanta todo lo que dice siempre.
También ha estado en la Devs League, que fue subcampeona, muy cerquita de Gonzi, Gonzi sintió el aliento en la nuca, o sea, estuvo cerquita Carmen, y la verdad es que participó y lo hizo súper bien, y ya sabéis que a mí me encanta siempre tenerla por aquí, y hoy pues nada, qué mejor que Carmen nos enseñe un poco UX para desarrolladores y programadores, porque muchas veces hablamos de que los programadores, especialmente los programadores web,
que si deberían aprender esto, lo otro, y mira, ¿qué crees que te diga? Yo creo que esto es vital, que no digo que seas un experto, que seas un dios o una diosa, pero sí que te suene, que te sientas cómodo utilizándolo, porque muchas veces te vas a encontrar o que te van a dar un diseño o que te van a hablar de ciertas cosas que te tienen que sonar para realmente sacarle todo el partido o para ser productivo en tu trabajo, y es algo que te vendes muy bien si dices, no, yo esta herramienta la domino perfectamente, así que ya sumas puntos.
Pues le vamos a dar la bienvenida a la buena de Carmen, vamos a decirle hola, Carmen, ¿cómo estás, Carmen?
¿Qué tal? Buenas.
Ya ves, ¿cómo está la gente? Sos mi vida, Carmen, sos la mejor.
Ay, mira, hi.
Estoy hasta nerviosa.
Estoy nervioso yo.
Te lo juro, estoy nerviosa, estoy nerviosa. Además he visto gente también diciéndome, hay que esperar una semana ahora, porque como...
Y do la Carmen, si tengo una hija, le pongo como tú.
¡Guau!
Bastante común en España el nombre, al menos hace unos años.
O sea, no va a ser difícil. Es verdad que al menos no te llamas Daenerys, ¿no? Que entonces sí que sería...
Sí, exacto.
Es un nombre común, eso sí que es verdad.
Oye, Carmen, pues nada, para que la gente sepa un poco de ti, pues se han perdido en, no sé, en otra galaxia o lo que sea.
Carmen, ¿quién eres tú?
Vale, pues ahora mismo trabajo como freelance con un perfil de UX Engineer, que es la parte que toca, que está en el medio entre diseño y desarrollo.
Estoy especializada sobre todo en hacer sistemas de diseño.
Entonces, como tengo un background de diseño, el poder unirlo con la parte más de front, el front del front, ¿no? Más la parte de CSS, pues me ayuda muchísimo a poder, pues, ayudar tanto a nivel de consultoría, a equipos, como el poder facilitar la colaboración entre perfiles, sobre todo de diseño y desarrollo.
Porque, como decías, la herramienta lo está petando porque cubre muy bien ese gap que necesitamos.
Seguro que dentro de tres años sale otra herramienta.
Si dentro de un año sale otra herramienta que se ajusta más a lo que yo necesito para trabajar y me facilita la vida, pues me iré con esa herramienta.
Pero ahora mismo, el día de hoy, pues está cubriendo un montón de funcionalidades que necesitamos los que trabajamos sobre todo en diseño y desarrollo de productos digitales.
Así que, bueno, es una pasada herramienta.
De hecho, es muy normal que ahora en cualquier empresa, cuando te pasan un diseño, te pasan un Figma, ¿sabes? Te dicen, no, te voy a pasar un Figma.
Entonces, muchas veces es tan importante el hecho de que, claro, mucha gente dice, ah, yo no quiero aprender Figma, que eso es de UX.
Pero dices, no te equivoques. Es que vas a tener que trabajar con el Figma, vas a tener que estar ahí pendiente.
Hay un montón de herramientas para desarrolladores, para Figma, que te van a ayudar un montón.
Entonces, me parece un error tan, muchas veces como que nos encerramos en nuestra burbuja de conocimiento y es una pena porque justamente perdemos oportunidades por eso, ¿no?
No tienes que ser experto o experta en un ámbito o un área que no es el tuyo, pero sí que tienes que conocerlo.
Yo pongo un ejemplo que siempre creo que es bastante claro.
Yo hace un montón de años trabajaba en diseño gráfico, trabajo en una imprenta.
Me sabía todos los gramajes de los papeles, los tamaños, que era un DIN A4, que era 29,7 por, ¿sabes?
Me sabía los tamaños, me sabía cómo actuaba la tinta, qué tipo de tinta hacía sobre el papel.
Entonces, todo eso lo tienes que saber.
Entonces, la herramienta que ahora mismo es donde se confluyen toda la comunicación y todas las interacciones sobre un diseño que se tiene que llevar a desarrollo,
está cociéndose en Figma, ¿vale?
Y como tú dices, todas las empresas están tirando por la herramienta porque realmente otras opciones no dan tanta potencia.
Y las opciones que había no están cayendo, se están quedando atrás o directamente están desapareciendo.
Porque Adobe XD, como Adobe adquirió Figma, aunque aún no está ejecutada la compra, es decir, están teniendo temillas legales,
pero como la he comprado, pues el producto de Adobe lo retira y lo depreca en Figma.
Entonces, se quedan con Figma.
Así que...
Yo solo voy a decir, no tengo velita aquí, no tengo velita, pero yo pondría una velita de que por favor, por favor, Adobe, no mates, no jodas Figma, por favor, te lo pido.
Tengo información de que se realizó esta compra no por lo que hicieron a Macromedia, que fue un queremos el monopolio y absorbemos y reventamos tus productos y los dejamos ahí,
sino porque tenían acuerdos con empresas grandes como Microsoft que no estaban utilizando XD, que utilizaban Figma.
Hostia.
Estaban teniendo problemas y antes de seguir teniendo más problemas dijeron, pues compramos, ahora es nuestra, pues no hay problemas y los trabajadores utilizan Figma, perfecto.
Pero espero que lo, no sé, que lo respeten, el producto, ¿sabes? Que no lo cambien mucho, que no la alien parda, porque muchas veces lo que ocurre es que lo intentan monetizar de otra forma, sacarle...
O sea, que no sé, espero que se quede todo quieto.
En principio dijeron que daban un año largo de roadmap de lo que ya había sobre la mesa.
Sí que es verdad que creo que van a tirar por lo que tú dices, por la pasta.
Van a, o van a subir el pricing o van a hacer que muchas cosas que están en beta sean luego de pago, como va a pasar con el modo de desarrollo, lo siento.
O sea, está en beta hasta final de año, en 2024 se va a tener que pagar un asiento por tener ese perfil dentro de la herramienta.
Pero bueno, aún así hay opciones.
Ahora vamos a ver cosas y os voy también a comentar.
Y no veo el chat, así que, por fa, me vas diciendo tú.
Yo te iré diciendo algunas preguntitas, solo para que la gente, pues voy a compartir un momento la pantalla, solo para que la gente sepa de qué vamos a hablar.
Pero vamos a estar hablando de Figma, para que me conozca, por si alguien está perdido en otra galaxia, una de las aplicaciones más importantes a la hora de trabajar con diseños, no solo web, sino que pueden ser móviles, como hemos dicho, incluso presentaciones PDF y un montón de cosas más.
Una aplicación que es colaborativa, como seguramente vamos a ver, porque vamos a ver los cursores ahí moviéndose en tiempo real, pero que además te permite, como también nos va a enseñar Carmen, no solo la herramienta en sí es súper potente a la hora de diseñar, sino que también tenemos herramientas como estas que se llaman de Figma Dev Mode,
que tienen como pasar del diseño al desarrollo, que está más pensada incluso para los desarrolladores, porque al final lo que te da, que sí, cómo son los espaciados, cómo exportar este código, un montón de cositas, si veis, le das al botoncito,
ya te pones como en un Dev Mode, que te ayuda un montón a acelerar tus desarrollos, que hoy en día, pues cuanto más rápido vayas, pues mejor copiar el CSS y un montón de cosas.
Esto es una cosa así, muy por encima, pero no os preocupéis porque la buena de Carmen os va a dar aquí un meneo que os vais a enterar.
Así que Carmen, cuando tú quieras, comparte la pantalla y...
Voy para allá. Primero voy a compartir Figma, ¿vale?
Sí.
Y luego dejaré, en algún momento, dejaré de compartir Figma y voy a compartir Visual Studio Code, ¿vale?
Y el por qué es porque quiero tener las dos herramientas por separado, porque hay un temilla y ahora os lo explico, ¿vale?
O sea, que te comparto Figma.
Tanto Figma como Visual Studio Code lo podría utilizar en el navegador, ¿vale?
Así que podríamos tirar del navegador y tener una pestaña Visual Studio y en el otro Figma,
pero pasa una cosa y es que digamos que la extensión de Figma para Visual Studio Code a veces da problemas de hacer login
si lo estás utilizando desde el navegador, ¿vale?
A veces da problemas. Entonces, para que no tengamos ese problema de conexión con Figma desde Visual Studio Code,
pues prefiero hacerlo así, ¿vale? Pero no os preocupéis.
Entonces, Miguel ha hecho una presentación ya muy guay.
Ya me ha presentado incluso, ¿vale?
Solo decir que estoy también dentro de la comunidad de Figma y también soy Google Developer Expert, ¿vale?
Sobre todo por los temas que hago de CSS, para que tengáis un poco también ese mix, ¿no?
Porque Figma, la ventaja que tenéis siendo desarrolladores y desarrolladoras es que tenéis ya un mindset de desarrollo,
cosa que muchos diseñadores digitales no lo tienen y cuando tengo que enseñar Figma a perfiles de diseño lo pasan mal.
Lo pasan mal porque vais a ver que se basa en el modelo de caja, se basa en la medida principal de Figma son los frames.
Si un frame equivale, es un div, es un contenedor, ¿vale?
Y se comporta como tal y autolayout es Flexbox.
Entonces, vais a tener mucha ventaja en ese sentido, ¿no?
Pues lo primero, obviamente, es que si no tenéis cuenta, os tenéis que hacer una cuenta, id a Figma.com y os hacéis la cuenta, ¿vale?
Podéis loguearos de forma social, ¿no?
Con vuestra web de Google o con lo que queráis.
El archivo que estoy utilizando en la presentación lo tenéis aquí.
Si entráis a bit.ly midu-figma lo podéis encontrar o si accedéis a Figma.com arroga Carmen Anzio,
vais a entrar a mi perfil de community, que ahora os explico lo que es,
y vais a poder acceder no solo a este archivo, sino a un montón de archivos que tengo subidos ahí y templates y un montón de talleres y etc.
¿Vale?
Figma.com.
Si sois estudiantes o educadores, profes, tal, podéis pedir Figma for Education, que de momento Adobe no ha metido mano ahí y es gratuito, ¿vale?
De momento.
De momento, es gratuito. No, dijeron que iba a ser gratuito, que se comprometían con el tema de educación y que va a ser gratuito.
Entonces, tenéis una, digamos, cuenta pro, pero gratis por ser estudiante, ¿sí?
De hecho, Carmen, aquí había gente que preguntaba, Christopher, por ejemplo, decía, ¿Figma es gratis?
Claro, porque no queda muy claro, ¿no? Es como que sí, ¿no? Porque ahora había un pro.
Hay diferentes tiers de precio de Figma. Hay como 4 bastante diferenciados. La primera es la gratuita. En la gratuita hay una limitación que solo puedes tener 3 páginas por archivo.
Lo que veis en la sidebar de la izquierda, ¿vale? Ah, no estáis viendo mi cursor en verde. Bueno, no pasa nada. Intentaré explicarlo mucho mejor dónde estoy.
Estoy en la sidebar de la izquierda, ¿vale? Entonces, vais a ver qué pone intro, intro Figma, ta, ta, ta, ta. Esos son páginas.
Si estás en la cuenta gratuita, solo puedes tener 3 páginas de límite. No puedes hacer más páginas. A ver, una página tiene un canvas que es infinito y tú puedes poner ahí un montón de elementos.
Pero, claro, es bastante más complejo de gestionar si trabajas con muchos elementos o muchos diseños. Entonces, eso es una de las cosas que no puedes hacer.
Y la segunda, que para mí es la más importante, es que no puedes compartir librerías. Es decir, tú no puedes generar un archivo con componentes y publicarlo dentro de tu equipo.
Eso sí, no lo publicas en abierto en internet para todo el mundo, sino que publicas ese archivo para que todos los componentes estén disponibles en tu equipo con todos los proyectos que realicéis ahí dentro.
Y que lo podáis linkar y así podéis hacer uso de todos esos componentes en cualquiera de los archivos que creáis.
Claro, es un problema. Se puede trabajar con estilos de forma local de archivo, pero eso no ayuda a tener un sistema de diseño o a tener una librería compartida porque al final vas a estar haciendo copy-paste.
Y lo interesante del tema de librerías es poder reutilizar componentes, que sean componentes maestros, como instancias.
Y si cambia algo en el componente maestro, se te repiten todo.
Claro, eso es lo principal.
Luego, hay una cuenta pro que no tiene limitación ni de páginas, ni de librería, ni nada.
Pero, mira, perfecto. Gracias.
Sí, que justamente.
Como lo estaba diciendo de cabeza.
Sí, sí, casi te ayuda, ¿no?
Por pricing.
Merci, perfecto.
Bueno, vale, esta es la pro, ¿vale?
Que lo que tienes es todas estas funcionalidades.
El death mode, como podéis ver, está en fase beta en todas, en todos los tiers de precio.
Vale, ¿qué diferencia hay versus a la de organización?
Que ya veis que el precio ya cambia bastante, ¿no?
De 12 dólares a 45, pues, lo que vais a encontrar es que tenéis analítica de vuestros sistemas de diseño.
Es decir, podéis comprobar con una herramienta que os dan, que también hay herramientas de terceros que podéis hacerlo, ¿eh?
Pero os lo dan integrado en la aplicación.
El cómo estáis rendiendo, cómo rinde vuestro sistema de diseño, cómo utilizáis los componentes, si hay componentes que se utilizan más, menos, etc.
Y, además, tenéis acceso también a poder tener ramas dentro de lo que es el control de versiones.
Y más modos de variables, que ya con el 75, que es ya el de Enterprise, ya lo tiene todo.
Es más, el Enterprise te permite acceder a la API para poder trabajar con variables.
Cosa que en las otras, tú puedes trabajar con variables, pero no puedes acceder, o sea, puedes trabajar con variables, puedes acceder a la API, pero no te deja acceder a la API para trabajar con variables.
Es decir, yo no podría, no puedo, automatizar todo el tema de tokens de diseño de forma automática a través de la API porque tengo que pagar 75 euros para poder hacer eso.
Y si quiero tener más de 4 modos de las variables, claro, vamos a ver qué son las variables, pues también tienes que pagar el asiento más alto que es este, el 75 euros.
Claro, esto si no eres una empresa y tienes un proyecto de 8, no te interesa, es más, la mayoría de empresas con las que trabajo, creo que solo han habido dos empresas que sí que tenían asientos de organización.
Y creo que una de Enterprise y algunas de ellas son empresas grandes.
Me hace gracia el comentario que te han puesto.
No nos llevamos locos, ¿eh?
Mira, pone a alguien, muy cara el LATAM y por lo visto, gratis no sirve.
Pero si te están diciendo, vamos a ver.
Gratis sí sirve, gratis sí sirve.
Free forever.
Vale, gratis sí sirve.
Lo único que digo es que está limitado a 3 archivos, tanto en Figma como en FIGJAM.
FIGJAM es la herramienta hermana de Figma, que es una pizarra en blanco, si habéis trabajado con Miro o con Mural,
es una pizarra en blanco que te permite utilizarla sobre todo para cuando haces sesiones de brainstorming, ideas, sketch, cosas que tengas que hacer así rápido.
Y además está disponible para el iPad, con lo que yo muchas veces lo que hago es tomar notas ahí, hacer dibujos y cualquier wireframe que haga de lo que tenga que diseñar luego.
Y eso automáticamente me lo puedo llevar a Figma.
Y lo interesante también es que cualquier librería que yo tenga en Figma la puedo utilizar en FIGJAM, además de un montón de funcionalidades que están pensadas ya para poder hacer talleres, hacer workshops,
incluso hay templates de retros para trabajar con tu equipo.
O sea, hay un montón de material, es una burrada, es una pasada.
Entonces, volviendo un poco a lo que vamos a ver, que no sé cuánto dará tiempo porque ya sabéis que preparo material para 20 horas siempre,
pero lo bueno es que tenéis los archivos, ¿vale?
Entonces, lo que no dé tiempo a ver más en profundidad, pues, lo tenéis en el archivo, podéis ver el ejemplo como está hecho y si no, siempre me podéis escribir y preguntar cómo se hace eso.
Entonces, lo primero que vamos a ver es una intro a Figma porque cuando haces talleres así con mucha gente que no sabes qué nivel tiene, pues, vamos a tener que partir de un punto.
Lo siento a quien sepa un poquito más, tener paciencia.
Entonces, vamos a ver una intro a Figma sobre todo para que nos sepan mover por el archivo y entender lo que estoy diciendo, ¿no?
De cuando tengamos que hacer X cosa.
Un express de diseño de interfaz para que estemos también todos un poco a la misma página.
No vamos a salir de aquí con un máster en diseño, pero sí que os voy a dar algunos consejos o reglas que tenéis que tener en cuenta.
Tanto si diseñáis como si trabajáis con diseño, también podéis levantar la mano.
Bueno, lo digo porque a veces me ha pasado que he trabajado con perfiles de desarrollo que hay alguna medida que no está bien y sois súper confiaos.
Yo os lo agradezco, sois muy buena gente.
Ponéis tal cual lo que veis, pero si estamos utilizando todo el rato de medida 24 y veis un 27, pues, que también podéis decir, oye, ojo, esto no tiene consistencia, no tiene sentido, ¿no?
O sea, hay que utilizar 24 por algo.
Bueno, vamos a ver cómo se crea un componente en Figma y cómo lo reutilizamos.
Hablaré de sistemas de diseño, del modo de desarrollo y cómo unir Figma con este modo de desarrollo, cómo trabajar en Visual Studio Code.
Y sobre todo algo que creo que es muy interesante que deberíais estar indagando, utilizando o convenciendo a vuestro equipo de diseño para que trabajarais así, son los tokens.
¿Cómo vamos a gestionar tokens, vale?
Preguntan, las limitaciones son si trabajas en un equipo y quieres compartir cosas entre ese grupo, si lo usas de manera individual, no hay restricciones de páginas, por ejemplo, da mucha libertad.
Vale, la principal limitación es esa.
Si quieres trabajar en un equipo, no puedes compartir librerías.
Entonces, para mí es penaliza.
Sí que puedes tener estilos guardados en la página y tú puedes ir copiando y pegando esos estilos en todos los archivos que quieras.
Porque, claro, si cambia uno de esos estilos, un hexadecimal, por ejemplo, no se va a ver reflejado en los otros archivos, ¿vale?
Pero, de verdad, utilizar la herramienta porque si lo utilizáis para vosotros o incluso queréis hacer side projects o vuestros propios diseños o vuestro portfolio o lo queréis diseñar,
pues que podáis ver que también tenéis templates de ejemplos para que podáis utilizarlos y que no tengáis que partir de cero.
Entonces, lo que he dicho de limitaciones aplica sobre todo a equipos, ¿vale?
A equipos que estén trabajando ya de forma profesional con diseño y desarrollo, ¿vale?
Entonces, antes de comenzar, ¿por qué Figma?
Miguel ya lo ha explicado.
Es una herramienta colaborativa.
Ahora no estáis todos aquí en este archivo, pero este archivo aguanta hasta 500 personas dentro y veríais todos los cursores moviéndose por aquí, ¿vale?
Me da miedo hacer eso porque a lo mejor si somos muchos y peta el archivo.
Entonces, no quería hacerlo, pero bueno, hasta 500 personas pueden entrar en el archivo.
Hace que todos los perfiles del equipo puedan entrar.
No está solo he pensado para diseño, es decir, perfiles de producto, de marketing, todo el mundo es bienvenido, más que bienvenido.
El pricing ya lo hemos visto.
Para mí lo más complicado de Figma es que la curva de entrada es sencilla, como el CSS,
pero es muy difícil de llegarlo a controlar de forma muy profunda porque hay muchísimas cosas, ¿vale?
Hay versión web, como he dicho, hay versión app.
Podéis descargaros la app o podéis trabajar desde la web.
No hay ninguna diferencia, pero si trabajáis desde web, tenéis que instalaros aparte un pequeño plugin que encontráis desde las páginas de descargas de Figma
para que desde vuestro navegador deis permiso para que acceda a vuestra máquina local y acceda a vuestras fuentes, ¿vale?
Porque si tenéis fuentes no vais a poder utilizarlas.
Fuentes que si queréis utilizar las de Google Fonts ya vienen integradas en Figma, ¿vale?
Entonces, no tenéis que instalarlas ni nada, ya las tenéis ya disponibles, ¿bien?
Entonces, la estructura un poco de Figma, antes he comentado lo de las páginas,
tened en cuenta también como para trabajar que tenemos un archivo, ese archivo está dentro de un equipo.
Fijaos que me voy a ir a la parte superior, hay una casita, ¿vale?
Una casita y me sale una mola del mundo al lado.
Pues, si vais a la casita, vais a ir a lo que viene siendo vuestro equipo.
Mi equipo se llama Carmen Ancio, el proyecto es Figma para Debs y dentro de Figma para Debs veis que tengo un montón de archivos.
Bien, si yo hago una librería y la comparto, todos los proyectos que haga dentro de Carmen Ancio van a tener acceso a esos componentes, ¿sí?
Esa es la jerarquía que sigue Figma, que es muy importante si trabajáis con la API porque os va a pedir toda esta información.
Os va a pedir el equipo, os va a pedir el proyecto, el archivo, el frame y luego dentro de ese frame va a poder escuchar qué hay, qué está pasando ahí dentro, ¿no?
Por lo que si, por ejemplo, queréis hacer una librería de iconos y tenerla automatizada, que cada vez que alguien de diseño ponga un icono nuevo os avise de que ha entrado un icono
y que pase por una automatización de limpio el icono, lo llevo al proyecto, lo meto dentro del componente icon, añado las clases, etc.
Todo eso se puede automatizar con la API de Figma, pero la jerarquía es esa, ¿vale?
Es bastante importante que sepáis eso.
Hay 2 tipos de archivo, antes he dicho que estaba Figma, cuando le deis a la barra superior arriba tenéis un más, podéis acceder desde este más o podéis acceder directamente desde el proyecto
y darle aquí a archivo de diseño o archivo de Figma board, pone Figma, es lila, púrpura, ¿vale?
Si le dais aquí vais a crear un archivo de Figma en vez de Figma, ¿vale?
De momento no están integrados, hay idea de que tú puedas tener en el mismo archivo diferentes tipos de páginas que sean de Figma, que sería la pizarra blanca o que sea de Figma, que sería el diseño, ¿vale?
¿Qué más? ¿Qué más?
Los proyectos, el equipo y la organización.
Tú puedes tener un montón de perfiles, es decir, si yo entraría en la casita vais a ver que pone Carmen Anxio, Carmen Dev, que es la otra cuenta que tengo para hacer cosas
y luego podéis tener cualquier usuario que tengáis unido en el perfil de community, ¿vale?
Para el perfil de community os tiene que salir un simbolito de un mundo al lado de la casita.
Si no os aparece, seguramente es porque no habéis reclamado vuestro handle, cosa importante que tenéis que hacer.
Esto es como cuando sale una red social nueva que todos vamos corriendo a coger nuestro handle, que no me quiten Carmen Anxio.
Pues, si le dais de nuevo a ese selector donde pone Carmen Anxio, ese es vuestro usuario.
Y aquí donde pone community profile os saldrá una opción que ponga reclamar el profile de community.
Simplemente vais a tener que acceder y en vez de saliros a esta página, que es donde yo tengo todos mis archivos subidos,
os pondrá que, os indicará que escojáis el nombre.
Entonces, podéis poner el handle que queráis, vuestro nombre de usuario de otras redes o lo que queráis.
Esta es la parte vuestra propia, que si queréis compartirla con alguien, podéis decirle,
entra en figma.com slash arroba y vuestro usuario.
De esa manera, pueden acceder desde el navegador a esta página.
En esta página vais a ver cualquier plugin que hayáis desarrollado y hayáis subido para que la gente pueda utilizarlo,
o incluso templates que tengáis de diseño.
Yo tengo aquí charlas, tengo un montón de material que voy subiendo, incluso ilustraciones, ¿vale?
Y desde aquí la gente puede utilizarlas.
¿Cómo?
Si habéis entrado al Bitly que hemos pasado antes, vais a aparecer en esta página.
Esta página es el detalle del archivo, donde vais a poder ver la descripción, tags de cosas que se hablan dentro,
incluso, esto es muy guapo, podéis ver aquí, es como un embed, ¿vale?
Como se hayan metido aquí uniframe, donde podéis ver todas las páginas del archivo, acceder a ellas,
e incluso hacer zoom in, zoom out, para ver si os interesa, antes de darle al ct azul que pone opening figma,
pues antes de abrirlo, por si os interesa, podéis chequearlo.
Si os interesa, podéis guardarlo, podéis darle un like por aquí abajo, ¿vale?
Podéis comentar, o incluso cuando la abráis, esto es interesante, podéis elegir el equipo,
yo tengo dos porque estoy dentro de la comunidad de figma, entonces tengo el de figma, pero mi profile de equipo es este.
Automáticamente se me va a duplicar, es como hacer un fork.
Pensad que community es como GitHub, pero con templates y con plugins y widgets de figma,
en vez de proyectos de código.
Y lo que hace es que te lo manda a drafts.
Fijaos, arriba aquí pone draft, slash, figma y el nombre, ¿vale?
Y pone draft.
Te lo manda a borradores.
Dentro de borradores no tenéis ninguna limitación, o sea, ni de páginas ni de nada, ¿vale?
Podéis acceder a todo esto, siempre que esté dentro de borradores.
Si queréis llegar a mover este archivo a otro sitio, pues podéis darle a la flechita aquí abajo
y move to project al proyecto que queráis, ¿sí?
Si tenéis ya claro que lo queréis guardar en vuestros proyectos, pues podéis guardar el archivo.
De acuerdo, cierro esto, sigo por aquí.
Fijaos que se utilizan pestañas, es igual que el navegador.
Tú puedes coger una pestaña, arrastrarla fuera de figma y tener dos instancias de figma abiertas a la vez.
¿Sí?
Que eso está pasando ahora mismo.
Si os fijáis, salen dos cármenes aquí arriba.
Salen dos cármenes porque yo estoy en otra instancia de figma, tengo abierto y tengo mi perfil también.
Entonces, por eso aparecen por las dos.
O si os pasa que estéis en la app y estéis en web, pues os va a pasar también que vais a ver ambas.
Si aquí hubiese más gente, yo podría clicar encima del avatar de esa persona y lo que haría sería seguirle.
Seguirías en modo de espectador a dónde va esa persona.
Incluso si cambia de página, si hace zoom in, zoom out, lo que sea, tú ves lo que está haciendo esa persona.
Es muy cómodo si hacéis una llamada y estáis comentando cualquier cosa.
¿De acuerdo?
Eso va muy bien.
Es más, podéis hacer una llamada desde dentro de figma.
Fijaos que cuando estáis aquí podéis darle a estos auriculares.
¿Sí?
Aparece aquí un icono de auricular que pone Start Conversation.
Entonces, comienza una conversación de audio y no hace falta que estéis trabajando ni siquiera con una llamada en Meets o donde sea.
Ya, podéis hacerlo todo desde aquí dentro.
Carmen, ¿y eso lo utilizas para hablar contigo misma?
Ahora mismo no lo veo.
Carmen con Carmen.
Imaginas, lo interesante es que, claro, no hay una llamada.
Sí, pero además que no os penséis que creas una llamada y empiezas a hablar y a asustar a la gente.
A la otra persona se la avisa.
En plan de, se ha iniciado una conversación, ¿te quieres unir?
Claro, claro.
Si no sería un poco heavy, ¿no?
Todo el mundo ahí...
Pero está genial.
Está genial porque, claro, ahora no lo vamos a ver,
pero es verdad que salen como los cursores de todas las personas que están conectadas
y entonces a lo mejor ves que está modificando algo
y puedes iniciar una llamada sin necesidad de cambiar el foco, ¿no?
Yo puedo hacer una cosa para que veas.
No, no lo hagas.
No, a ti, te lo paso a ti.
A mí sí, sí.
Vale, vale.
Tienes abierto...
En chat privado, en stringer, hay un chat privado.
Es que no me aparece.
No, no sé qué.
¿No te aparece el chat privado?
Yo creo que no podría dar la gente.
Bueno, si no, por WhatsApp.
Vale.
Es que no me aparece, no sé por qué se ha rayado.
Pero bueno, vale.
Para compartir un archivo podéis dar a share.
Y aquí vais a ver que hay diferentes cositas, ¿no?
Desde que solo puedan ver que sean editores de ese archivo,
si tú eres editor también,
o que solo puedan acceder a los prototipos que haya, ¿sí?
Podéis compartirlo con el email.
Incluso podéis llegar a poner un password
para que la gente que tenga ese link pueda entrar directamente,
para que solo puedan entrar si están invitados,
o que solo puedan entrar en caso, por ejemplo,
que sea un cliente, si tienen el link y el password.
Es para añadirle un poco más de seguridad.
Yo voy a hacer que Midu pueda entrar sin tocar nada.
Tampoco se fía de mí, ¿eh?
Que tampoco creáis.
¿Cómo se fía del Midu?
No, no.
Vale.
Entonces, ahora le voy a dar a Proof.
Sí, porque además podéis limitar también el acceso
desde los settings del equipo.
Eso es importante, porque a veces le puedes dar acceso
a alguien al archivo, pero si desde el equipo tenéis capao
que no pueda entrar, pues no va a entrar, ¿vale?
Entonces, yo ahora veo a Midu.
Entonces, si yo clico a Midu, ¿vale?
Ahora he clicado su avatar.
Si él se mueve, se va, no sé, clica en otra página.
Clica, por ejemplo, en cualquier página de la izquierda,
en Design System o donde sea.
A ver.
Aquí en la sidebar.
Ah, mira, da igual.
Está así a otro sitio, da igual.
Pero, ¿ves?
Veo, si se cambia de página, también lo veo.
Entonces, cualquier cosa que haga, yo lo veo.
Incluso, yo puedo poner un comentario, dándole a la C,
aparece esta cosita que es como un diálogo.
Y puedo seleccionar un elemento, cualquier elemento,
clicar y poner aquí, a ver si sale aquí.
Ah, no, sale otra gente.
No pasa nada.
Yo puedo poner arroba Carmen, ¿sí?
Y me llega un mensaje en plan de este elemento,
lo que sea.
Entonces, este comentario se queda reflejado,
se queda guardado.
Y si, por ejemplo, tengo la notificación activada,
me llegaría un mensaje por email en plan de,
alguien te ha dejado un comentario, ¿vale?
Esto está chulo, ¿ves?
Aquí Miguel está dejando comentarios.
Entonces, yo puedo ir y decirle sí.
Es más, ahora han añadido una funcionalidad nueva que es que tú
puedes hacer cualquier recorte que tengas en el portapapeles,
tú puedes pegarlo directamente aquí.
Entonces, puedes decirle sí y enseñar una imagen.
Eso está muy guapo.
Oh, qué chulo.
Sí, diría que también quieren hacerlo con vídeo,
para que tú puedas meter vídeo ahí también.
Ya lo veo un poco exagerado,
pero al menos lo que es el poder, el portapapeles,
poder pegarlo ahí está muy guapo.
Entonces, bueno, luego pues hay emojis para decidir cositas,
sí, y ya está.
Y podéis decir que este comentario ya está resuelto,
está resuelto, lo resolvéis y no se elimina,
sino que en el apartado de comentarios podéis filtrar por los
que ya están resueltos, ¿vale?
Los que están resueltos, los que son solo míos,
los que son solo de esta página.
Bueno, tenéis unas cuantas herramientas aquí para poder
gestionar todos estos comentarios.
Lo interesante es que, como es colaborativo,
no queremos que esto se quede en el olvido.
Cualquier comentario que se deje o que se pierda,
o ya sabéis lo que pasa muchas veces, ¿no?
Que, bueno, se pierde información por el camino y eso no es muy
bueno.
Esto que veis aquí es que podéis, a nivel de equipo,
podéis guardar thumbnails como covers en el archivo para que
así sepáis mucho mejor qué es.
Por ejemplo, aquí veis que hay de todo, ¿no?
Y aquí sí que está bien ordenadito, pues,
paleta de color, de esto, tipo, tal, tal, tal.
¿Cómo hacéis eso?
Yo lo hago por manía siempre en una página que se llama
Cover, pero podéis hacerlo donde queráis.
Entonces, hacéis cualquier tipo de, pues,
yo he hecho esta cover, ¿no?
Entonces, le dais a botón derecho,
restore, ¿vale?
Botón derecho, set as thumbnail y lo que hacéis es que eso se
convierte en el thumbnail del archivo.
Con lo que cuando vayáis a la casita a vuestro equipo,
ese es el thumbnail, ¿vale?
Entonces, ¿a qué ayuda esto?
Ayuda sobre todo a que podéis poner información de en qué estado
está lo que estáis haciendo.
En plan de, pues, esto está Work in Progress,
esto es de la, no sé, de, no sé, por decir, por ejemplo,
estamos haciendo esta tarea, la tarea tal de Gira, ¿no?
Pues, tenéis ahí el numerito de Gira.
¿Sí?
Entonces, más cosas que estamos viendo.
Los comentarios ya lo hemos visto.
Vale, esto lo hemos visto también, los ejemplos.
Bien.
Os he dejado por aquí navegación básica para los que no tengáis
tanta agilidad para moveros.
La más importante para mí es la del espacio.
Porque mucha gente no sabe cómo moverse bien a Gira y derecha,
¿vale?
Entonces, si tú haces Command o Control,
supongo en Windows, puedes hacer zoom in, zoom out con el ratón.
Pero, además, con el espacio, esta manita,
haces un paneado, ¿vale?
Entonces, puedes arrastrar para arriba, para abajo,
derecha, izquierda, ¿vale?
La manita es como un drag and drop.
Coge y puedes arrastrar y puedes moverte así, ¿sí?
Aquí hay unas cuantas más, sobre todo interesantes como para
buscar porque tiene 2 cosas muy guays Figma a nivel de
experiencia.
Y es que si le dais a Command F, ¿vale?
Podéis buscar cualquier tipo de elemento aquí dentro.
Si yo busco botón, ¿vale?
Pues, si hubiese alguno, pues, aparecería.
En la F tenéis Quick Actions, ¿vale?
Que aparece con el Command y el Slash,
donde podéis buscar cualquier tipo de acción que necesitáis
hacer.
Por ejemplo, a Rename cualquier cosa, pues, mira,
os aparecen todas estas opciones.
Si utilizáis gestores como Raycast o en Notion también,
esto es un menú muy habitual que Figma también lo ha
incorporado, ¿vale?
Para que podáis encontrar cosas súper rápido.
Ya sean los últimos plugins que habéis abierto,
cualquier tipo de acción, lo encontráis aquí.
Si necesitáis saber más atajos porque trabajáis mucho con
shortcuts, en la esquina inferior derecha tenéis un
interrogante que pone help and resources y esta que es
keyword shortcuts.
Tenéis todos los shortcuts que podéis encontrar en la
herramienta.
Además, de una manera muy guay, visualmente,
os indica la herramienta qué shortcut habéis utilizado y
cuál no.
Entonces, por ejemplo, todos los que están en azul son shortcuts
que suelo utilizar.
Y, por ejemplo, para ver las reglas, para mostrarlas,
pues, veo que no lo utilizo nunca.
Es con Shift R, ¿vale?
Pues, es una buena manera de ver cuántos shortcuts utilizáis o
si estáis haciendo algún shortcut que podréis hacer más rápido de
esta manera o no, ¿vale?
Y cualquier duda, pregunta y cosa que tengáis sobre eso lo tenéis ahí.
¿Vale?
Paneles que hay y ya empezamos a ver cosas de diseño.
Tenéis el panel de la izquierda, tenemos las capas, ¿vale?
Tenemos las páginas, las páginas serían esto.
Las capas serían, fijaos, ¿eh?
Porque esto a veces es puñetero y no se ve.
Aquí hay una mini flecha que podéis subir esto, ¿vale?
Hay una línea que separa a lo que son las páginas de las capas.
No sé si lo veis, pero hay una línea que lo separa.
Y es arrastrable, se puede arrastrar.
Porque muchas veces estamos trabajando con un montón de
páginas, ¿vale?
Y no vemos las capas.
Y la capa la tengo aquí.
Entonces, si no queréis estar subiendo y bajando esto,
porque a veces es un poco rollo, que sepáis que si clicáis al lado
de layer está assets y al lado pone intro,
te está indicando en la página que estás.
Si clicáis a esa intro, lo que hace es un foco únicamente a esa
página.
Te quita el resto de páginas, ¿vale?
Y solo vais a ver las capas de esta página.
Lo digo porque si no, a veces abruma mucho y no sabes ni
siquiera cómo moverte.
Bien, si estás desde lejos y quieres acercarte a algún elemento,
puedes clicar al elemento y si le dais al 2,
os hace un zoom in, ¿vale?
Sobre todo para que os sepáis mover, ¿vale?
Eso es bastante, parece que no, pero ayuda muchísimo cuando tienes
muchos archivos.
Y luego, otra cosa es que podéis abrir o cerrar,
desplegar las capas.
Si habéis trabajado con Photoshop, con Illustrator,
todos los elementos que podéis encontrar aquí son muy parecidos.
Al final tenemos un frame con elementos que están dentro y
esos elementos están agrupados, ya sea con grupos o con frames,
¿vale?
Fijaos que podemos clicar todos los elementos que hay aquí
dentro, pero si queremos acceder a un elemento que está muy
anidado dentro, hay un truco para llegar.
Y es que si dejáis apretado Command o Control,
supongo en Windows, perdón, es que en Windows nunca trabajo,
así que supongo que es Control, bueno,
pues con Command lo dejáis apretado y podéis clicar cualquier
elemento que esté anidado, ¿vale?
Si os fijáis, cuando hago el hover,
ya puedo seleccionar este texto.
Si no, vais a tener que estar clicando una vez en el frame,
otra vez en el elemento, otra vez en el otro elemento,
en el listado.
Ahora, ¿sabes?
Tenéis que ir haciendo como dentro, dentro, dentro, dentro y dándole
al Command y clicando, pues ya accedéis a ese elemento.
En la parte superior tenemos toda la toolbar donde vais a
encontrar cómo crear un frame, cómo crear un rectángulo,
la plumilla para poder dibujar con nodos,
es decir, para poder hacer SVGs, también podéis trabajar desde
Figma, no hace falta que estéis en Illustrator.
Y el sistema de comentarios, como ya hemos visto,
el poder compartir y el último modo de desarrollo que se activa
y desactiva dándole a este switch que tenéis aquí arriba a la
derecha, que es de color verde.
Luego vemos aquí el panel de presentación de prototipos,
que ahora lo vamos a ver más adelante.
En el panel de la derecha, en esta sidebar,
antes habían 3 switch, o sea, habían 3 tabs.
Estaba el de diseño, el de prototipo y el de inspeccionar.
Como han habilitado el modo de desarrollo,
pues el de inspect lo han quitado.
Ya no nos interesa, ¿vale?
¿Qué va a pasar cuando el año que viene ya no sea beta y se
tenga que pagar por el modo de desarrollo?
Ajá.
Han dicho que van a integrar las funcionalidades de poder
inspeccionar tamaños, colores, etcétera,
dentro del panel de diseño.
Bueno, tengo que verlo eso porque se me hace un poco,
se me hace un poco raro que lo incluyan aquí dentro.
Pero, bueno, ya veremos.
Queda poco para el 2024.
Así que vamos a tener respuestas rápido.
Bien, vamos a darle caña un poco a diseño.
He cogido material de diversas presentaciones que tengo,
que creo que es bastante interesante y os va a ayudar un
poco a entender para qué, cómo utilizamos el diseño.
Porque muchas veces se piensan que las opiniones son,
o sea, perdón, que las soluciones son arbitrarias o se han
tomado en base a opiniones.
Y no, todas las decisiones que se toman en diseño tienen un
porqué.
Y, básicamente, lo utilizamos para resolver problemas y para
comunicar cualquier idea que tengamos, ¿vale?
Esta frase la dijo Steve Jobs y lo nombro porque creo que
Apple hace muy bien todo el tema de experiencia,
porque ahora vamos a hablar de experiencia de usuario.
Porque hay 3 cosas que tienen que ser en un producto que sea
bueno y que, ¿no?
En este caso, Apple lo hace muy bien, ¿no?
Que tiene que ser útil, usable y, sobre todo, bonito.
Porque muchas veces decimos esto es funcional,
da igual cómo se vea y estamos equivocados.
Si el producto no es bonito a par que funcional y fácil de usar,
vamos a tener sorpresas con cómo se van a comportar los
usuarios.
Este es un pequeño diagrama así de para que entendamos en qué
parte está UX y en qué parte está el diseño visual,
que son 2 cosas diferentes.
Está genial que hablemos ya de UX,
que hace años no se hablaba, así que no se tenía ni en cuenta.
Ahora se tiene en cuenta, pero tened en cuenta que la parte
visual, de diseño de interfaz, está dentro de la experiencia
de usuario, ¿sí?
Que muchas veces decimos, buscamos a un UX y es como,
vale, buscamos a un UX que haga qué?
Que haga research, que haga temas de arquitectura de
información, ¿vale?
Para decidir dónde van las cosas, que haga visual,
que haga motion, qué tipo de diseñador o diseñador se está
buscando, ¿no?
Entonces, es interesante saber que UI está dentro de UX,
es una parte de toda la experiencia de usuario.
Hay un montón de fases de investigación,
de organización, de fase de participado, de testeo y tal.
No voy a entrar, os lo dejo por aquí por si alguien más tiene
interés, también luego os voy a compartir alguno de mis libros
favoritos, porque si no, no nos daría para todo.
Y esto, dejadme un segundo que quite, está saliendo el grid,
no sé por qué está saliendo el grid, pero bueno,
os podéis imaginar, creo que lo veis bien, ¿no?
Olvidaos de la grid.
Winnie the Pooh.
Es Winnie the Pooh, exacto, exacto.
Todo el mundo ve a Winnie the Pooh.
Esta imagen me encanta ponerla porque refleja muy bien cómo
nos comportamos, cómo pensamos a nivel mental,
modelo mental que tenemos los humanos.
Y es que estamos, básicamente estamos creados para poder
reconocer patrones.
Seguro que veis caras en todos los sitios, seguro.
En España había un pueblo muy famoso que era Belmez, ¿no?
Que eran las caras de Belmez, eso es muy antiguo.
Pero había un pueblo que salían caras siempre en casas,
en las paredes, y era como, no, es humedad.
Lo que pasa es que buscábamos siempre caras porque tenemos que
reconocer muy bien con quién estamos hablando,
si es amigo o enemigo, ¿no?
Es igual que los principios de UX que se basan en esto, ¿no?
En similitud, proximidad, dirección, relación, figura,
fondo.
Seguro que habéis visto la imagen de la copa y la cara,
que si ves una copa o una cara ya te quedas con eso y ya no
ves otra cosa.
Es bastante difícil luego ver el otro objeto.
Y estos son principios que se basan en cómo nos comportamos
cognitivamente, cómo funciona nuestro cerebro.
Para que entendáis que la parte de UX y de research va muy ligada
a la psicología.
No tiene tanto que ver con cómo se diseña.
Muchos perfiles de UX ni siquiera saben diseñar en programas como
puede ser Figma o XD o tal.
No tienen por qué saber diseñar.
Esto teniendo claro, porque muchas veces luego me escribe
gente y me dice, es que hemos pichado a 1X y no sabe usar Figma.
Es como lo habéis dicho, las tareas que tiene que hacer,
tiene que quedar muy claro qué tipo de perfil tiene esa persona.
Elementos que utilizamos a diario que están dentro de esos
principios y elementos de la interfaz.
Seguro que la tipografía, todos os habéis peleado con qué tipografía
pongo, seguro.
Hay herramientas de font-pairing, ¿vale?
Para poder tener dos tipos de tipografía que a priori es lo que
necesitáis, no necesitáis más.
Todo el mundo tiene odio a Comic Sans, ¿verdad?
Seguramente.
Sí, de hecho, ya han puesto ahí.
La mejor Comic Sans, aguante.
Siempre, siempre pasa.
Y yo siempre me peleo, porque Comic Sans está muy bien diseñada.
A mí me ayuda muchísimo a leer.
Es una tipografía que para la gente que tenemos dislexia ayuda
muchísimo.
Lo que pasa es que se utilizó muy mal, ¿vale?
La historia fue que creo que fue con Windows 95, si no me equivoco.
Ni siquiera tenían preparada bien cómo integrarla y la documentación de
cómo utilizar esa fuente y lo sacaron al público general, flasca.
Todo el mundo tenía Word en aquel entonces y todo el mundo era
poderoso para poder hacer Graphic Designs My Passion.
Y, entonces, hacían cosas con la tipografía que no se debía.
Como, por ejemplo, es una tipografía, pues,
muy infantil en ese sentido, muy festivo.
Y si utilizas eso para comunicados que sean importantes,
pues, no tiene mucho sentido.
Te despido de el ser que ha utilizado Spotify.
Spotify para despedir al 17% de la plantilla, ¿te imaginas?
Queridos empleados con Comic Sans, vamos a despedir un 17%.
He leído historias bastante macabras de dónde se ha utilizado
sin conocimiento ninguno, ¿eh?
O sea, no era culpa de la gente.
Lo que pasa es que de ahí viene un poco el odio, ¿no?
Tenemos que tener en cuenta que la tipografía es lo más importante
porque es lo que más contenido en web hay.
Claro, no recuerdo si como casi el 90% de contenido que hay en la web
es tipografía, restos, imágenes.
Entonces, el contenido es el rey en ese sentido.
Y Figma también lo valora así, ¿vale?
Cosas que tenéis que tener en cuenta.
Elección de fuente, sobre todo, por la elegibilidad.
Y tener varias cosas en consecuencia de eso que vienen a ser un poco la jerarquía,
que ahora vais a ver cómo funciona porque tengo ejemplos de texto para que lo veáis.
Y el contraste.
Todo eso está enfocado siempre a la elegibilidad.
Yo sé que a Miguel el alineamiento y luego la justificación y todo eso,
que el otro día lo hablábamos ya, le gusta mucho.
Luego tuve muchos trolls, ¿eh?
Que me vienen a decir.
¿Vale?
Y también hay ejemplos de, para que veáis, de qué le diéis antes.
Seguro que habéis visto alguno en internet porque hay un montón.
Yo te pongo este texto, este, este y este, y vas a ir a leer lo primero que yo quiera
porque le estoy dando más contraste, le estoy dando más importancia,
y al final estamos también fabricados para estar atentos a lo que más nos llama la atención.
Y en eso se basa los fundamentos de la interfaz.
Ya veis que está muy ligado a la psicología y a cómo percibimos el mundo.
Es el tema de la percepción.
Y sobre todo, a nivel de percepción, los colores son muy importantes.
Seguro que sabéis que el rojo es como más agresivo, que hay colores cálidos,
ta, ta, ta.
No os voy a dar la chapa con la teoría del color.
Sí que estaría guay que mirarais el cómo aplicar colores en paletas,
sobre todo a la hora de entender si esa paleta está bien hecha o no,
cuando tengáis que hacer todas las variables para CSS y así.
Si tenéis un poco de, si tenéis un poco de conocimiento en eso,
Figma os puede ayudar porque hay plugins que os generan las paletas,
así que no os preocupéis.
Sí que hay colores que de saque no deberíais utilizar nunca.
Ya podéis ver que este rojo sobre el azul, pues, molesta bastante.
No sé si al compartirlo lo podéis ver, pero yo cuando miro ese botón o, bueno,
ese elemento que pone low contrast, a mí me molesta un montón.
Me molesta mucho.
Es como que me vibra, la letra baila, ¿vale?
Entonces, es molesto.
El contraste es muy necesario, sobre todo, no solo por la legibilidad,
sino también por la accesibilidad, que parece que la accesibilidad lo tenemos
siempre como fase 2.
Y si trabajamos para web, HTML, uno, es semántico y, dos, es accesible de saque.
Entiendo que muchas veces no se hace por desconocimiento de los atributos
y el cómo se tienen que preparar esas plantillas, ¿no?
Pero, bueno, te doylo en cuenta.
También hay checkers de accesibilidad en Figma, ¿vale?
Con lo que podéis comprobar si la paleta tiene un contraste que sea bueno
y que sea elegible.
Balance.
Ahora vais a ver un ejemplo que en lo del balance a veces no es tan matemático.
Muchas veces tú intentas poner algo centrado y por su propio peso del elemento,
la vista te engaña y es mejor que lo muevas 2 o 3 píxeles más a la izquierda
y da la sensación de que esos elementos están mucho más centrados.
El alineamiento.
Por favor, no hagáis cosas locas, ¿vale?
Con los alineamientos.
Fijaos que aquí han hecho hasta el ejemplo de con el caballo.
¿Vale?
Tenemos aquí a la adera y se puede alinear a la izquierda, a la derecha,
centrado, justificado.
No justificado.
Y aquí han hecho hasta un caballo.
Por poder hacerse puede, sí.
Puedes hacer una máscara, que esa máscara esté rellena de...
Pero no es necesario, ¿vale?
Siempre digo que un gran poder conlleva una gran responsabilidad.
Así que, por favor, hacedlo.
Bueno, si os interesa todo el tema de más de usabilidad y así,
Don Norman, que este es este señor.
Este libro tiene 20.000 años y sigue vigente.
Es más, han hecho una versión nueva, creo.
Don Norman es como el padre de la usabilidad y de research y de UX,
¿vale?
Por si os interesa, os he dejado aquí un poco resumido.
Uy, que me he ido al otro lado, perdón.
Os he dejado aquí un poco resumido los puntos de lo que habla en el libro,
¿vale?
Es más tema de UX, ¿sí?
Me voy a centrar ahora en la parte de diseño, de interfaz.
Cositas que la verdad es que siempre veo que pasan y hay un montón de ejemplos
que podéis encontrar también en línea para que no lo repitáis.
Lo de la falta de espacio en blanco, nos suele gustar rellenarlo todo mucho y menos es más.
O sea, quedaos con eso.
Menos es más porque a veces me encuentro cosas que es como, venga, ¿cabía algo más ahí dentro?
No.
O sea, es menos es más.
La página del Homer Simpson, que siempre pongo el ejemplo, no lo hagáis.
O sea, es muy divertida, ¿sí?
Pero eso lo tiene que consumir alguien y se tiene que enterar.
Entonces, no hagamos que todo esté tan ocupado porque al final lo que vamos a conseguir
es que todos los elementos estén luchando entre sí para ver quién tiene más prioridad
y no vemos nada, literal.
O sea, no vemos, no somos capaces de leer ni siquiera que haya ahí.
Consistencia, me refiero a iconos, por ejemplo.
No pongamos diferentes familias de icono.
En Figma, si vais a los plugins que los tenéis aquí en este panel,
podemos buscar, por ejemplo, Iconify y en Iconify, y si lo escribo bien, Carmen, Iconify, vale.
En Iconify podéis encontrar un montón de familias de iconos súper conocidos.
Mira, pone más de 170.000 iconos.
Entonces, si ponemos aquí, por ejemplo, Material, no sé, bueno, pues vamos a ver un montón de iconos.
Vamos a poner User mejor porque lo vamos a ver mejor.
Vale, bien, fijaos, Material Design, Solar, Clarity, Memorize, Create Icon,
hay un montón de fonos, están todos los iconos, todas las familias que podemos encontrar más populares en la web.
Y luego tenéis los elementos, bueno, son SVGs que podéis arrastrar al Canvas y que podéis utilizar directamente.
Entonces, si utilizáis un elemento, por ejemplo, mira, este es súper pixelado,
pues luego no utilicéis un elemento que sea una línea recta.
O si utilizáis líneas que acaban en curva, no utilicéis luego una línea que acaba en pico.
¿Vale? Son como pequeñas cosas, pequeños detalles que mantienen la coherencia, la consistencia en todas las pantallas que hayáis montado
o en todos los componentes que vayáis diseñando.
Es muy importante porque esos detalles parecen que no, pero son los que te hacen decir,
aquí falla algo.
Herarquía, fijaos, hay la misma información en esta card, hay la misma información.
En cambio, la derecha es todo mucho más legible, está haciendo énfasis en lo que más se quiere resaltar,
por ejemplo, es el 60% del progreso total.
Únicamente dando espaciado, dando tamaño de texto diferente y, bueno, algún estilo más conseguimos eso.
¿Vale?
Bueno, el alineamiento ya lo hemos visto.
Ah, esto es muy importante.
Sobre todo, los que estamos trabajando en la parte frontal, los mensajes de error, por favor, que sean entendibles, que no sean para máquinas.
Y no culpéis a vuestros usuarios, no culpéis a la gente.
Dad información de cómo se pueden recuperar de ese error.
Si hay un formulario que no ha funcionado, no digáis, no se ha enviado, no válido, o error 5000.
Es decir, falta el campo, ¿no?
O id directamente que haga foco o aparezcan los mensajes de error en cada campo en los que no se ha validado correctamente.
Y siempre dad una opción de saber cómo se tiene que recuperar de ese error.
O si en este caso es un formulario, pues si el formato de teléfono no es ese,
indicad con un placeholder cuál es el formato del teléfono, porque eso os ayuda al usuario, a la persona que está intentando acceder.
Porque a la que tengamos frustración, no somos muy impacientes, ¿eh?
O sea, a la que tengamos frustración, a la que algo no nos salga, o a la que estemos incómodos, no nos vamos a volver.
Pero también es verdad, Carmen, que algún usuario sí que tiene la culpa.
O sea, algún usuario sí que hay que señalar un poco de...
Pues en el sentido de que rompen todo.
Para eso la gente tendría que ser Cuba.
Total, total.
La gente tendría que dedicar a Cuba, porque sí que es verdad que hay gente que dice,
madre mía, nunca actuamos como pensamos que actuamos.
En el sentido de que además engañamos siempre.
Pero cuando he hecho un montón, he trabajado en un montón de test de usuario,
con cosas que te quedabas loca de decir, madre mía, están haciendo lo contrario de lo que se supone que sabíamos que iban a hacer.
¿Sabes?
Siempre sorprende a la gente.
Eso es verdad.
Pero sí que es verdad que también los errores catastróficos de Windows asustan un poco.
¿No?
Cuando te salía el montallazo, pues...
Sí, sí.
Sobre todo azul.
Exacto, sí.
Y nada, mensajes claros, lo que decía.
Si hay varios campos en un formulario, pues que se sepa cuál es cada campo.
No lo pongáis todo abajo o no pongáis error o nada.
Cosas así, ¿vale?
Ya hemos hablado de contraste.
Vale.
El libro de Every Design of Everything, ¿vale?
Ese es el que he dicho ya.
Y este libro me encanta.
Siempre lo recomiendo.
Soy muy pesada con este libro.
No tengo comisión.
Pero esta persona escribió el libro siendo ingeniero y pasando a diseñar.
Es decir, que tiene el punto de vista bastante guay porque normalmente lo que me encuentro siempre es que de diseño, pues, te acercas más a desarrollo.
Y este es el contrario.
Viene de desarrollo, es ingeniero.
Y ha hecho un poco el cómo le hubiese gustado a él que le explicaran cómo era el diseño digital o el diseño web.
Y te desgrana muy bien cada, digamos, particularidad o cada una de esas leyes de diseño.
Muy bajado a cómo se piensa en el mindset de desarrollo.
Y hace un poco como ingeniería inversa, ¿no?
Por eso se llama Reverse Engineering Beauty.
Porque hace como ingeniería inversa del diseño.
Te plantea ejemplos y te lo desgrana.
Y aparte de que la teoría la explica muy bien.
Así que si tienes oportunidad de tener este libro, está en digital.
Además tiene una newsletter también que te va mandando tips y consejos sobre esto.
La verdad que si tengo que recomendaros un libro, yo os diría esto.
Dadle duro a esto porque os va a ayudar muchísimo.
Ese es otro ejemplo que cuando explico a qué hacemos caso y a qué nos llama la atención.
Si tiene alguien top, lo siento.
Pero bueno, hacemos caso a elementos que se mueven en la página.
A diferencia de otros que pueden estar estáticos.
Hacemos caso también si hay un cambio de tamaño.
Aunque sean todos los elementos iguales, cuadrados grises.
Hacemos caso, nos llama la atención si hay un elemento que sea más grande.
El color, también nos llama la atención si hay un elemento que es un color diferente al resto.
O incluso si hay una rotación o si hay una posición diferente que está alineada diferente.
¿Podemos tener elementos desalineados?
Sí, podemos tener elementos que sean asimétricos.
Pero siempre que el resto tenga una alineación entre sí.
Es decir, no pongamos todo en la página al tuntún.
Ahora vamos a ver que Autorayot nos ayuda a que eso no nos pase.
Y bueno, la forma también nos llama bastante la atención.
Os he dejado aquí un montón de ejemplos de cómo sería trabajar con un texto y cómo iterarlo hasta que veamos el resultado, cómo se modifica.
Os enseño el primero y el último y os explico lo que se ha hecho, ¿vale?
Para que lo tengáis en cuenta.
Se dice que hay un número de carácter máximo que deberíamos tener a nivel de balance y de ritmo.
Se habla de ritmo porque si os fijáis en cualquier escala de tipografía, es una escala que se basa en la regla áurea.
No sé si os suena esto, pero seguro que Da Vinci y el número áureo os suena.
Es un número en el que si tú vas multiplicando o dividiendo, tiene una consistencia y además da un ritmo.
Esto pasa también con el número 8.
Seguro que vais a ver un montón de rejillas, retículas o de sistemas de tamaños que están en base a 8.
Y es por que cuando tú multiplicas 8 por el resto de números, te dan resultados bastante dinámicos.
No es como 10, 20, 30, ¿no?
Que es bastante aburrido.
Y a nivel de posicionamiento, de jerarquía y de poner los elementos en la página, pues es bastante menos atractivo.
Entonces, creo que eran 70 caracteres.
Si lo digo mal, lo siento porque yo y los números nunca me acuerdo bien.
Pero fijaos cómo de un texto que es bastante largo, si lo acortamos un poco, ya gana elegibilidad.
Si dividimos un párrafo con el resto y le damos más importancia con el tamaño porque es la descripción principal, también ganamos elegibilidad.
Es más, si dividimos y rompemos en más trocitos estos párrafos, le damos más aire entre ellos con una coherencia del mismo tamaño entre párrafos.
Y además jugamos con cómo nos posicionamos, ¿vale?
Pues podemos tener, fijaos, el último.
Os voy a traer el primero al lado para que lo veáis.
Es únicamente jugar con tamaño y espaciado.
Esto y esto es el mismo texto.
Yo creo que hay bastante diferencia.
Por eso es importante jugar con retículas y con grids, que veo muchas veces que se trabajan sin estas retículas, ¿no?
Seguro que si habéis trabajado con bústrapos, suenan pues 12 columnas, cuando eres más pequeño pues 6, luego 2, ¿vale?
Trabajad siempre con estas reglas porque os van a ayudar a posicionar los elementos en la página.
No es porque sí, ¿vale?
Es porque, bueno, desde la imprenta se hace y se funciona.
Bueno, Carmen, no te puedes imaginar lo feliz que estoy escuchándote porque la de cuando me pongo aquí con tu web ajuste o a revisar porfolios,
un problema que es muy común es que la gente dice, no, no, yo quiero utilizar toda la pantalla, todo el ancho y ponen un texto de punta a punta.
Y entonces a 1080p, 1920x1080, tienen un texto de 300 palabras, ¿sabes? De lado a lado.
Y les digo, a ver, uno, utiliza párrafos, que me ponéis unos párrafos así, súper largos, pues divídelo en tres.
Y luego pon como máximo que tenga 80 carácteres o 100 carácteres, pero no vayas más allá, que es que esto no se lo lee nadie,
que nadie mueve el cuello de izquierda a derecha.
Es que yo empiezo a leer y digo, me voy de esta página que me va a dar tortículis.
Pensad que nos da mucha pereza leer, siempre nos da mucha pereza y si es algo que es costoso, mucho más.
Ya no es que no leamos, es que es invisible. Para mí es invisible el texto de arriba, es invisible.
Yo solo veo ahí texto negro, pero no veo lo que, ni siquiera sé lo que pone.
En cambio, en el ejemplo de abajo, que es el mismo contenido, es el mismo contenido,
solo que estamos jugando con el layout, cómo le damos esos tamaños, esos márgenes, esos, ya lo veis.
Le estamos dando más importancia a unos elementos que a otros, cosa que ya nos llama la atención.
Lo más importante está más destacado, con lo que, bueno, si no te lees el resto de contenido,
al menos lo más importante sí que te lo llevas, ¿no?
Entonces, sobre todo tened eso en cuenta porque son cosas muy sencillas que las vais a ver repetidas siempre
porque son principios universales de diseño que llevan toda la vida utilizándose
y es porque realmente funcionan.
No son decisiones arbitrarias de, pues, pongo esta tipografía más grande porque más bonita.
Muchas veces, a lo mejor sí que os encontráis que dicen, bueno, pues, me lo he visto así,
he visto un ejemplo, me lo he copiado.
Bueno, pero el, digamos, llegar a esa solución tiene un porqué, ¿vale?
Y el porqué lo podéis ver en estos ejemplos que os he puesto,
cómo se va iterando, haciendo pequeños ajustes, llegamos a esta solución que,
ostras, en la noche y en el día, ¿vale?
Así que tenedlo en cuenta y, sobre todo, lo he pensado mucho esto,
el contenido del texto, sobre todo pensando en los porfolios,
como decía Miguel, que os puede ayudar muchísimo a tener también un poco de,
digamos, criterio a la hora de decidir cómo planteáis la información que queréis enseñar, ¿vale?
Eso es bastante interesante.
Bueno, ahí os dejo los ejemplos.
Os voy a hablar ahora de sistemas de diseño, ¿vale?
Porque para trabajar con componentes, quiero hablaros primero esto,
antes de hablar de librerías, quiero que queden estos conceptos claros
y ya hablamos de estilos, de librerías y de los componentes y de autolayout, ¿vale?
Por si no sabíais qué es el Automate Design, os dejo aquí un resumen muy resumido.
Esta metodología lo que nos ayuda es a ir diseccionando las interfaces para ir de menos complejidad a más complejidad.
Es decir, se basa en el diseño atómico, ¿vale?
Un atomo puede ser un botón.
Si tú juntas un botón con un input, puede ser un search, ¿no?
Pues una barra de búsqueda.
Si le añades una descripción y un texto, ya puede ser un suscríbete a mi newsletter, ¿vale?
Pues una sección de una página y eso vas generando, digamos, templates que puedes ir reutilizando.
Eso es lo interesante, el atómico para poder reutilizar elementos e ir haciendo que sean más complejos
para luego poder reutilizarlos y tener diferentes templates y crear páginas más complejas.
El Atomic Design convive de la mano con los sistemas de diseño, ¿vale?
Ese es un poco cómo lo estructura Brad Frost, que lleva como 10 años o 15 ya diciendo y explicándonos esto
y tiene mucha razón el hombre.
Añadiremos algo más antes del átomo.
Vamos a añadir protones, neutrones, como queráis.
Básicamente van a ser los tokens, ¿sí?
Eso tenedlo, tenedlo, vamos a utilizar tokens.
Bien, teniendo esos elementos podemos llegar a generar páginas, incluso hacer diferentes teamings, ¿vale?
Diferentes temas.
Si, por ejemplo, trabajáis con una empresa donde hay diferentes productos, podéis tener unos componentes que sean globales a todos esos productos
y luego algunos que sean particulares de un producto en concreto, ¿no?
Pues digamos que los estilos globales los podríamos tener por un lado, luego esos teamings y podríamos ir haciendo como una jerarquía de ir cargando librerías y tokens
y sería mucho más fácil manejar todos esos productos y cambios de estilo.
Este es el libro, ¿vale?
Os dejo el link aquí.
Lo tenéis aquí el link.
Lo digo porque está gratuito si lo leéis desde el navegador, desde web.
Luego, si queréis en físico o tener el e-book, pues ya se tiene que pagar.
Pero si lo leéis desde la web es gratuito, ¿vale?
Muchas veces me preguntan qué es un sistema de diseño, ¿vale?
Porque nos confundimos mucho con los UI kits.
Cuando os encontréis un UI kit, es decir, componentes ya creados y tal, no es lo mismo que un sistema de diseño, ¿vale?
Un sistema de diseño lo que nos ayuda es a los equipos a desarrollar productos.
Es decir, es la forma, son las soluciones que el equipo ha decidido para desarrollar productos en esa empresa, ¿sí?
Te ayuda a resolver problemas de manera colaborativa de todos teniendo un lenguaje común.
Lo del lenguaje común es muy importante.
Cuando hablemos de tokens, pensad que tanto desde diseño como desde desarrollo se tienen que llamar igual.
Tenéis que llegar a acuerdos de nomenclatura, de me da igual cómo se llame, siempre pongo el mismo ejemplo,
me da igual que le llames modal, dialog, como si le quieres llamar patata, pero que todo el mundo sepa lo que es patata, ¿vale?
Si todo el mundo sabe lo que es patata, perfecto, da igual el naming, pero tenéis que llegar a acuerdos de esa nomenclatura.
Podéis utilizar BEM, podéis utilizar CAMEL CASE, lo que queráis.
Me da igual la manera de nombrarlos, pero que sean los mismos en diseño de desarrollo.
Y Figma nos ayuda a que eso pase.
Y ahora vamos a ver un ejemplo que no os lo he dicho, esto es la sorpresa.
Si habéis revisado el archivo, lo habréis visto, vamos a ver un ejemplo con Astro de cómo gestionar estos tokens
para que se cambien desde, el cambio desde Figma a que se cambie nuestro proyecto, ¿vale?
Por eso luego necesito cambiar a Visual Studio.
Eso lo vamos a ver.
Bueno, el objetivo principal es, primero, no reinvertar la rueda.
Y que tengas un producto que sea fácil de escalar, que sea coherente, que sea consistente
y que te permita, pues, tener esos elementos de, en vez de tener todo este embrollo así, ¿no?
Y de espagueti, porque también hay deuda técnica en diseño, que hablamos de deuda técnica en desarrollo,
en diseño también la hay.
Para no tener este espagueti coat o espagueti diseño, a tener nuestros bricks, ¿no?
Pensad un poco en Lego, que tenemos elementos pequeñitos de Lego, son piezas que se van uniendo,
se van juntando y van haciendo diferentes elementos, puedes hacer desde una casita a un coche, ¿vale?
Con los mismos componentes.
Entonces, eso es un poco el design system.
¿Cómo podemos aplicar esto a la hora de trabajar con librerías en Figma?
¿Vale?
Seguro que habéis visto un montón de UI kits donde tenéis paletas de colores, tenéis tipografías con escalas, ¿no?
Cuando digo escalas de tipografía me refiero a que tenéis un tamaño y un peso asignado a lo que es el head,
o sea, como el h1, el h2, el h3.
Estos nombres muchas veces me encuentro que se llaman muy parecido a lo que son las etiquetas de HTML,
por ejemplo, párrafo, span, caption.
Eso, como mejor os entendáis, me da igual que se llame Jumbo, Hero, pero lo mismo.
Llegad a acuerdos que sepáis todos ese tamaño a que hace referencia.
Porque eso lo vamos a utilizar ahora después como variables y como estilos,
que es lo que vamos a llevar a CSS.
Por eso es importante que sepamos tanto en los colores, en los tamaños de tipografía,
en los tamaños que hagamos de grids, en los que hagamos también de stacks entre elementos, ¿vale?
Porque ahora vamos a ver cómo se comporta el auto layout, pero es igual que el modelo de caja.
Entonces, tenemos paddings, tenemos márgenes y todo eso convive con el resto de contenedores que vamos diseñando.
Entonces, antes de ver cómo trabajar con una paleta de colores aquí en Figma,
os voy a enseñar varios plugins que tenéis para que os ayuden a poder, digamos,
trabajar o manejar estas librerías o estos tokens o, ¿vale?
Tenéis layer styles, son todos gratuitos.
Lo que pasa que ahora os voy a enseñar el más pepino.
Tienen una parte que es de pago, pero yo no lo pago y puedo tirar.
Y estoy haciendo proyectos con clientes, ¿vale?
Entonces, lo digo para que no os hago bien tampoco.
Si tuviera acceso al Enterprise, pues tendría acceso a la API.
Entonces, no necesitaría estos plugins.
Pero, bueno, tenemos layer styles.
Aquí abajo os dejo el link.
Accederéis al community, ¿vale?
Igual que antes.
Entonces, podéis utilizarlo.
O desde el panel de arriba ya podéis acceder a los plugins y buscar aquí, por ejemplo,
el siguiente que vamos a ver, que es Token Studio, ¿vale?
Lo abréis aquí y ya veréis que se os abre el plugin, se abre un modal.
Y ahora después cuando veamos Astro, pues vamos a trabajar con estos colores, ¿sí?
¿Qué más tenemos?
Uno que me encanta porque a mucha gente le da mucho palo hacer documentación.
A muchísima gente.
Y hay que documentar, lo siento.
Hay que documentar.
No hace falta que sea documentación súper extensa y aburrida, pero Figma, aparte de poder inspeccionar
desde el panel de las developer tools, perdón, desde el panel del modo de desarrollo,
también puede generar estas specs, ¿no?
O estas acotaciones de los elementos con este plugin que es gratuito.
Y os voy a enseñar cómo funciona.
Bueno, fijaos, yo tengo aquí el diseño en Astro, tengo un botón, ¿vale?
Hecho.
Entonces, voy a eliminar esto.
Pac.
Pac.
Tengo un botón que ahora os voy a enseñar.
Yo puedo seleccionar este botón, abro el plugin, ¿vale?
Busco specs, se llama H-Shapes specs, es este de acá.
Lo abro, se carga y entonces me pide, ¿vale?
¿Qué quieres que muestre en las especificaciones?
Pues le voy a decir que todo.
Que quiero que incluya el layout, las propiedades, la anatomía, todo.
Entonces, le das a Create Spec y, pum,
mágicamente te crean las especificaciones de ese componente.
Entonces, tienes aquí que es el botón primario con los colores y el layout con,
ya veis aquí pone que es de 8 y así.
Si trabajamos con variables vais a ver que es mucho más divertido el poder manejar
a todos estos tamaños interiores, ¿vale?
Bien, entonces, volvemos a las librerías y ese es el que vamos a ver con Astro,
Token Studio.
No sé si os suena, pero antes de la config de Figma que fue por junio o así de este año,
se lanzaron un montón de funcionalidades nuevas entre las que estaban el modo de desarrollo,
las variables, etc.
Pensábamos todos que iban a integrar Token Studio de forma nativa y no lo hicieron.
Lo que hicieron fue sacar las variables, que las variables están en beta aún,
ahora las vamos a ver.
Entonces, veréis que hay algunas limitaciones.
Pero, bueno, para poder manejar Token y trabajar con variables y con estilos,
Token Studio es el mejor plugin que podéis tener.
Y vamos a ver el ejemplo cuando veamos Astro, ¿vale?
Cuando veamos el diseño que tengo en Astro y el proyecto que hay en Astro, ¿sí?
Vamos a trabajar con estilos, ¿vale?
Tú puedes guardar estilos de un montón de elementos, ya sea el tamaño de la tipografía,
la pareta de colores, etc.
Actualmente tenemos 2 formas de poder guardar ese contenido y reutilizarlo.
Y en los colores es donde más dudas hay a la hora de, ¿qué hago?
¿Hago estilos o hago variables?
¿De acuerdo?
En las variables hay un pequeño temilla y es que solo, de momento, solo admite un valor.
Es decir, no podemos tener un degradado como variable.
Así que si no tenéis problema en no tener un degradado como variable,
utilizad las variables.
Entonces, fijaos aquí, tenemos paleta 1 y paleta 2, ¿vale?
Yo cuando clico un elemento, a la derecha, en el panel de diseño,
me aparece ese elemento como relleno y aquí me aparecen 4 puntitos.
Esos 4 puntitos que pone Style es donde yo puedo guardar cualquier tipo de estilo en el archivo
y se queda guardado.
Así que si yo en esta paleta le doy aquí al más y digo que es un estilo con nombre,
vamos a poner color, esto aquí de la nomenclatura, tenerlo en cuenta,
por eso decía que es bastante interesante que lo tuvierais en cuenta, ¿vale?
Vamos a poner call primary, ¿no?
O sea, call primary, por ejemplo, y podemos poner a 100, ¿sí?
Entonces, este elemento ahora lo tengo guardado como call primary 100.
Si clico este otro y le doy a los 4 puntos de Style, le doy al más, selecciono Style y pongo call secondary 100,
ya tengo creado 2 estilos.
Esos estilos que me permiten, ahora que los tengo creados, yo puedo guardarlos en la librería
y que el resto de proyectos en el equipo puedan utilizar esos estilos.
Eso es interesante porque si cualquier elemento que yo tenga con el color que acabo de pintar,
el call primary 100, yo ahora ya no necesito tener este elemento aquí, ni este elemento aquí, ¿vale?
No se tiene que guardar, no es necesario, ya está guardado como estilo.
Si yo ahora el call primary 100 lo utilizo en otros objetos, ¿vale?
Como puede ser un círculo, como puede ser, imaginaos, cualquier componente, lo que sea,
puedo ir duplicando, puedo duplicar esto, ¿vale?
Si ahora cambiamos el contenido del call primary 100,
lo que conseguimos es que cualquier elemento que esté utilizando ese estilo se cambie.
Entonces, es una manera de reutilizar estilos como si fuesen,
os iba a decir como si fuese una variable, pero en este caso,
para poner el ejemplo con desarrollo, es como si fuese una variable,
pero en zigpa se llaman estilos porque ahora han añadido variables, ¿vale?
Entonces, por eso es un poco raro ahora el cómo trabajo con estilos o variables.
Bueno, el caso es que nosotros podemos ir a los settings de este call primary 100
y cambiar el hexadecimal al color que queramos.
Entonces, cualquier elemento que tenga asignado el estilo call primary 100
se va a ver afectado y va a cambiar.
Si nosotros tenemos esta librería que yo la publico desde assets en el icono de library,
le doy a publish y publico, fijaos que voy a publicar estos dos colores que acabo de hacer.
Si yo los publico y me creo un archivo nuevo y linko este archivo como librería,
si hay algún cambio en un elemento que yo estoy utilizando del archivo base de librería,
me saldrá un pequeño tooltip, me sale un mensaje diciéndote,
ojo, que ha cambiado un color.
Lo digo porque no os asustéis que no vais a machacar nada del resto del equipo,
porque antes de que ese cambio se produzca, le va a hacer un aviso, ¿sí?
O sea, está guapo porque eso al final hace que trabajemos los estilos como si fuesen componentes también.
Tú tienes un componente master y si haces cualquier instancia de ese componente
a la que cambies el original, ¿vale?
Pues, se te cambian en todas las instancias.
Entonces, si no tenéis la cuenta pro y queréis reutilizar estilos,
podéis hacer eso, podéis tenerlos aquí guardados,
fijaos que ahora tenemos los dos aquí, cuando clicamos en el canvas,
no cliquéis en ningún elemento, os aparecen todos los estilos que estén de forma local.
Entonces, yo puedo seleccionar este elemento y este otro o los que quiera
y le podemos cortar, podemos cortar estos estilos,
me puedo ir a hacer un archivo nuevo de diseño y hago pegar, ¿vale?
Y me aparecen esos estilos aquí.
¿Qué pasa?
Que, claro, si yo los vuelvo a pegar aquí en el original,
cualquier cambio que yo haga en este elemento se va a ver afectado solo en este archivo.
En el otro no se va a ver afectado.
Yo voy a utilizar este, ¿vale?
Y va a dar igual.
Es por eso que las librerías son interesantes que se utilicen.
También tenéis la limitación en la cuenta gratuita,
con lo que, bueno, es un poco más rollo en ese sentido, ¿vale?
Entonces, ya habéis visto que podemos guardar un estilo,
un color como un estilo.
¿Qué haría yo en este punto en el que estamos ahora con las variables?
Yo utilizaría las variables.
Y os voy a explicar por qué.
Porque si hablamos de tokens,
que os estaba comentando antes de los sistemas de diseño,
un token va a tener que ser semántico.
¿A qué me refiero?
No vais a poner color primary para el background del botón.
Vais a poner color primary como alias para el background color botón, por ejemplo.
Eso sería un token.
Eso lo que nos ayuda es que sea todo más escalable a la hora de hacer la arquitectura,
sobre todo en CSS y en las variables, ¿vale?
Entonces, lo que nos permite Figma desde las variables,
que os voy a enseñar dónde están, pero lo voy a quitar.
Si vamos a la parte superior derecha de la sidebar aquí, local variables, ¿lo veis?
Abrimos un modal que es una tabla, ¿vale?
¿Veis esta tabla?
En esta tabla yo tengo creado ya colores que son los que estoy utilizando para el ejemplo de Astro, ¿vale?
Estos son mis colores.
Si queréis crear nuevas variables, tenéis que darle aquí, a este elemento de aquí.
Vamos a ir, ¿ves?
Fijaos que tengo aquí más.
Vale.
Le dais a este elemento, le dais a crear colección y dentro de la colección pueden convivir variables de diferentes tipos, ¿vale?
Os lo voy a enseñar en otro archivo que tengo porque está súper guay.
Fijaos.
Bueno, lo que os decía de los tokens, podemos tener el color pink, pero luego puede ser el accent color, ¿sí?
Recordad que un token lo que hace es almacenar una decisión de diseño, ¿vale?
Y lo que hace la variable es almacenar ese valor.
Entonces, vamos a utilizar variables.
Podemos hacer alias de esos elementos.
Como decía, podemos tener el pink 500, pero a la vez puede ser el accent color.
Y, además, podemos trabajar con variables de diferentes tipos.
De momento, 4 tipos.
De momento, no podemos trabajar con tamaños de tipografía, que eso me molesta mucho.
De momento, no se puede porque podríamos tener tipografía fluida ya en Figma.
Si pudiéramos trabajar con tamaños de tipografía, aún no se puede.
Están en beta, vamos a calmarnos también.
Vamos a dejar un poco de tiempo.
Tenemos, de momento, tipo color, tipo numérico, tipo string, es decir, una cadena de texto.
Y un boleano, pues, si quieres activar o desactivar algún elemento.
Fijaos que podemos hacer muchas cosas.
Ya veréis, es que voy a poner ejemplos que están muy guays.
No solo podemos generar paletas de colores que sean semánticas y trabajar con tokens y reutilizar esos colores,
sino que también podemos trabajar con cadenas de texto.
¿Qué os imagináis poder hacer con un texto con variable?
¿Vale?
Y además con boleanos, que cuando trabajamos con prototipos, los boleanos nos pueden ir muy bien.
Ahora mismo, un prototipado complejo requiere de alguien que sepa de desarrollo.
Así que esa es la mala noticia para los diseñadores.
Si queréis hacer un prototipado complejo, necesitáis al lado a una persona que tenga conocimientos de desarrollo,
porque van a trabajar con variables, con funciones, con ifs, con expresiones regulares.
Entonces, eso ha hecho que se echara para atrás un poco algunos perfiles de diseño.
Se han quejado, no han dicho, hostia, ¿esto qué?
Pero ahora vais a ver el potencial.
Vamos a hacer estas variables.
Ojo, si no tienes Enterprise, tenemos limitación de 4 modos.
Ahora vais a ver lo que quiero decir con los 4 modos.
Entonces, esto es nada, os lo podéis mirar.
Voy a ir directamente al ejemplo que tengo aquí.
¿Qué es lo que he hecho?
Para que podáis ver lo que podemos hacer, también os doy ideas, ¿vale?
Porque al final la teoría está muy bien, pero quiero daros ejemplos con los que podáis toquetear y romper.
Aquí tenéis un ejemplo que se llama budget.
Esto que veis así punteado lila es porque es una variante.
Una variante porque tengo un elemento que es budget, que es de tipo Google Play y que tiene una propiedad color blanco.
En este caso es el Google Play propiedad color negro.
Luego tengo otra variante de ese componente que es Apple Store y blanco y negro, ¿vale?
Esto es muy fácil de hacer si hacemos un botón, ¿vale?
Podemos poner, siempre lo podemos admit, no sé por qué, pero bueno.
Si ponemos un texto y hacemos Shift A, hacemos un autolayout.
Vamos a ponerle un color inchi de fondo para que se vea un poco mejor.
Vamos a poner blanco y negro mejor, que no la líe.
Y esto por acá y esto por acá.
Vale.
Imaginaos, este puede ser nuestro botón, ¿vale?
Primary.
Primary.
Siempre vais a ver el ejemplo con un botón porque es lo más tonto, pero yo os he hecho un bache que es muy guay, ¿vale?
Entonces, el botón secondary y podéis poner los colores al revés, ¿vale?
Podéis poner que el fondo sea así, azulillo, y que esto sea, ¿vale?
¿Sí?
¿Cómo hacemos un componente?
Podemos seleccionar un elemento y a parte superior aparecen estos diamantes, ¿vale?
Y clicamos y se crea un componente.
Podemos seleccionar los dos y, ojo, aparece un selector.
Ahora podemos crear un component set.
Podemos hacerlo a la vez.
Si no lo hacemos a la vez y creáis primero un componente botón primary y luego creáis un componente botón secondary,
ping más listo en ese sentido.
Y si seleccionáis los dos, os va a aparecer en el lateral, aquí, combinar como variantes.
Porque dice, tienes dos elementos que jerárquicamente la estructura es la misma, pues tienen que tener relación, ¿no?
Entonces, podéis darle a combinar como variantes y aparecen estos punteados lilas en los que si clicas al botón,
fijaos que aparece un panel de propiedades.
Esto es interesante en Figma.
Por eso decía que es más complejo de gestionar todo lo que se puede hacer a la vez, como CSS, ¿no?
Que hay mil maneras de hacerlo.
Y eso es bueno y malo a la vez porque te dan muchas opciones, pero depende de cómo las hagas, tienen unas consecuencias.
Entonces, aparece este panel propiedades que si clicamos dos veces en property 1, podemos poner lo que queramos.
Podemos poner tipo, podemos poner status, podemos poner lo que queramos.
Esto es una propiedad de ese componente.
Yo voy a poner type y vamos a tener el tipo primario y el tipo secundario.
Algo interesante para cuando tengáis muchas variantes, muchos tipos, tal.
Fijaos que sale una manita cuando os posicionáis aquí, ¿vale?
Sale una manita.
Esa manita es que lo podéis mover, ¿vale?
Podéis mover el elemento arriba o abajo.
Esto cuando tenéis 10 elementos ayuda mucho porque no hay una organización,
no puedes hacer un sort o un filtrado de los elementos que hayan aquí.
Entonces, si puedes moverlos para arriba y para abajo, pues la verdad es que va guay.
Otra cosa interesante es que si le dais a este puntero, no sé cómo decirlo,
es que me parece una villana así de disparo, selecciona ese elemento, ¿vale?
Lo digo porque esto es interesante.
Esto no os lo he dicho, pero pasa también con los colores.
Si yo pongo patata y elijo un color así, pongo otra y pongo lila,
otra y que sea así.
Yo puedo seleccionar los 3 elementos y fijaos que a la derecha aparece
Selection Colors, ¿vale?
Porque imaginaos que tengo muchos elementos, muchos, muchos, muchos, muchos.
Muchos por aquí en medio, ¿vale?
Y dices, ¿cómo selecciono uno de ellos?
Porque hay un montón.
Quiero el lila.
Entonces, tú seleccionas todos los elementos,
a la derecha aparece este panel y clicando en el puntero este,
seleccionas los 2 elementos o incluso directamente aparecen los 4 puntitos de style
con lo que si clicáis podéis guardar ya directamente este estilo,
o sea, este color como estilo o como variable, ¿vale?
Volvemos a las variantes.
Tenemos ya un elemento button que si yo arrastro vais a ver que aparece
esta instancia, podéis copiar y pegar también, ¿eh?
Si copiáis y pegáis también, ¿vale?
Pero tened en cuenta una cosa, si copiáis y volvéis a pegar en el mismo sitio,
se va a pensar, fijaos, tipo 3, se va a pensar que es otra variante.
Entonces, para quitaros de líos, si queréis copiar, copiáis,
pero pegad en otro lado, ¿vale?
Porque si no, tened en cuenta que os aparecerá esto.
Hará otro componente.
No queremos eso.
Queremos una instancia, ¿vale?
Para arrastrarlo, esto es como el mando de,
esto es como cuando te preguntan cómo se hace un Hadou Ryuken,
que no lo sabes decir, pero que lo haces, ¿no?
Por memoria muscular.
Pues, es, a ver, sí, vale, sí.
En Mac es shift y option y arrastras, ¿vale?
Entonces, esto genera una instancia,
quiere decir que es una copia del elemento original
que está atado a las características y propiedades
de este elemento principal.
Es decir, yo en la instancia no puedo incluirle un icono,
porque el original no lo tiene, ¿vale?
Esto es como un master, ¿no?
O sea, es como el componente original y esta es su instancia.
Entonces, en la instancia podemos decidir con el panel de la
derecha si es primario o secundario y ya te cambia, ¿vale?
Ya te cambia esto, ¿sí?
Es más, los paddings interiores que aquí pone 8,
son los paddings interiores, ¿vale?
Que si yo me posiciono aquí encima, lo vamos a ver,
son los paddings interiores.
Lo que puedo hacer es usar las variables.
Puedo clicar aquí, es muy pequeñito, ¿eh?
Pero fijaos que cuando haces hover aparece un icono.
Ese icono es para poder crear variables.
Entonces, yo podría poner aquí size slash sm, ¿vale?
Y la puedo crear.
O puedo ir a las local variables y decir que la nueva,
bueno, la de spacing, ¿vale?
Mira, space xs, ya la tengo creada.
Si no, podría darle a crear variable y poner de tipo número.
Y pongo space, bueno, voy a poner otra más, ¿eh?
xxl.
Y, ¿sabéis qué?
No he probado si en el panel este puedes multiplicar o sumar.
En el resto de paneles de Figma, todos los inputs,
puedes hacer cálculos matemáticos sencillos.
Sumar, restar, multiplicar, dividir.
¿Vale?
Entonces, si hago enter, sí, pues sí que funciona.
¿Habéis visto que suma?
Entonces, ahora tengo el space xxl como variable.
Entonces, y el space xs.
Podemos escopar estas variables.
Es decir, yo puedo decidir si editando esta variable,
si puede estar escopada a una tipología de uso.
Si quiero que se utilice solo para el texto.
O si quiero que se utilice solo como gap para el autolayout, ¿no?
En este caso.
Así que si luego utilizáis un border radius,
no os aparecerían todas las variables que tengáis,
solo las que hayáis decidido que aplican a ese border radius.
¿Sí?
Entonces, podemos volver al botón.
Yo le voy a hacer los cambios.
Le voy a decir que en vez de 8, que sea la variable, ¿vale?
Space xs.
Porque cuando queramos visionar esto desde el modo de desarrollo
y yo clique el botón, me va a aparecer, fijaos, 0,5 arriba,
0,5 abajo y en los laterales que es donde estoy utilizando en el
padding horizontal, estoy utilizando esa variable,
aparece space xs.
¿Sí?
Si queremos ver más cosas de este botón,
podemos darle al tipo primary y te lo copia.
O abrirlo directamente en el playground.
Aquí fijaos que genera, bueno, ya sabéis cómo son las herramientas,
¿eh?
Que generan cosas.
¿Qué decir?
Te doy lo en cuenta.
Puedo hacer operating playground y podemos ver este tipo de
botón, ¿vale?
Como no tiene ninguna funcionalidad,
no tiene ninguna interacción, no podemos verlo.
Pero si no sería muy parecido a lo que vemos en Storybook.
No sé si conocéis Storybook, la plataforma,
para poder tener componentes y las librerías y que esos
componentes sean funcionales y estén agnósticos fuera del
proyecto.
Pues, bueno, podríamos tener algo parecido a Storybook.
Es más, en los plugins podemos unir y conectar con Storybook.
¿Necesitaríais Chromatic por el medio?
Que sea, Chromatic se paga.
Pero, bueno, tenéis más, tenéis más plugins que, oh, sorpresa,
no sé por qué, antes si teníais el modo de viewer,
no podíais utilizar plugins.
Es como un poco loco, ¿no?
Ahora, desde el modo de desarrollo,
sí que podéis utilizar plugins.
Tienes plugins que están mucho más cercanos a lo que
necesitamos cada día, ¿no?
En desarrollo.
Tenéis la conexión con GitHub, con Anima, bueno,
con un montón de plugins, ¿vale?
Pero, bueno, lo interesante de utilizar las variables en este
sentido es ese, que tenemos una variable con un contenido,
con un valor y la podemos utilizar tanto en diseño como en
desarrollo y nos da igual el valor.
Yo no me tengo que aprender que XS es 8 o que SM es lo que sea.
O sea, me da igual, ¿sabes?
En diseño pone que es SM, pues,
yo voy a utilizar la variable SM en CSS.
Eso es lo interesante.
Lo guapo es eso, ¿vale?
O sea, yo me vengo arriba con estas cosas porque me gustan
mucho.
Pero lo interesante es eso.
Entonces, si yo cambio del botón original,
pasa un poco como los estilos.
Los estilos que reutilizas.
Si cambias el contenido de ese estilo,
va a cambiar donde se esté usando.
Pues, en los componentes igual.
Si yo cambio alguna característica del componente original,
por ejemplo, el fin, pues, lo pongo en otro color,
vais a ver que la instancia también se cambia.
Tiene sentido, ¿no?
O sea, al final es una instancia de ese componente,
entonces, se va a cambiar.
¿Cómo he hecho el badge?
Que todo esto venía para explicaros el badge,
que es el ejemplo interesante.
El badge, lo que he hecho ha sido eso.
Tú tienes un elemento que diseñas y pones que es el badge
tal, ¿no?
O sea, antes era boot on primary, ¿no?
Pues, este es el badge Google Play.
El otro es el App Store.
OK.
Pero he hecho algo más.
Aquí estoy haciendo cosas extra.
He hecho algo más como, por ejemplo, el texto.
Si clicáis en el texto, ¿vale?
Fijaos que aquí, un segundo.
Aquí.
Vale.
El texto este sí que es, digamos, trazado,
pero el de disponible en podemos hacer algo.
Y es que podemos añadirle, fijaos,
una variable con el texto que queramos.
Y podemos indicar que esa variable esté asignada a esa variante.
Es decir, podemos poner, cuando sea Apple,
va a poner descargar en.
Pero si es Google, va a poner disponible en.
Entonces, no solo podemos jugar con los tamaños,
con las variables, sino que también podemos jugar con el texto.
Así que, si nosotros ponemos nuestra pantalla en español,
vamos a tener el badge que pone disponible en.
Si nuestra pantalla le decimos que sea en inglés,
vamos a tener el get it on en Google Play.
Esto es guapísimo.
Guau.
Es muy guapo.
Es muy guapo.
Entonces, además, obviamente,
puedes decirle que sea App Store,
en blanco o en negro,
o en Google Play.
¿Vale?
Entonces, podéis gestionar los copies con esto.
Es un poco rollo gestionarlo desde la tabla,
pero ya hay plugins, ya hay plugins, ¿vale?
Que te permiten, primero,
todos los estilos que tengáis en color y así,
de colores, que os dé palo si ya tenéis un proyecto grande,
hay convertidores de estilos a variables.
Se los hacen de forma automática.
Por ejemplo, Styles to Vireables Converter.
Esto es uno de los que mejor funciona.
También hay algo muy interesante en este plugin que se llama
Link Spacing y es lo siguiente.
Fijaos que en el badge yo tengo puesto que sea 16,
Space SM y Space SM.
Fijaos que cuando está puesta la variable,
tiene como un recuadrito.
Sé que se ve muy pequeño, pero cuando haces hover,
se pinta como un recuadrito por detrás.
Bueno, te indicas que eso es una variable.
Si yo tuviese uno de estos elementos sin el 16 puesto como
variable, si yo lo elimino y ahora tengo puesto que es 16,
pero a palo, así a hardcodeado, en vez de con variable,
con el plugin de Link Spacing Variables,
este de aquí, ¿vale?
Que me lleva a la página, directamente lo puedo abrir.
No hace falta que vaya a la página solo para verlo.
Puedo abrirlo directamente desde el archivo.
Puedo ir aquí a Plugins y lo busco.
Link Spacing Variables.
Este plugin lo que va a hacer es, ojo,
tienes números que corresponden, un segundo, aquí,
que corresponden a, aquí Spacing, tienes números que
corresponden a variables que no estás utilizando.
Es como un lintern.
Te avisa de números que tengas que no tienen asignadas la
variable y que coinciden.
Es decir, ahora tengo un 16 que va a coincidir con ese SM que no
estoy utilizando.
Entonces, cuando le das a Linkin, uh, se ha rayado.
A ver.
Ah, vale, porque tengo que, perdón,
tengo que poner aquí.
Era este.
Ah, claro, tengo que seleccionar toda la página.
Bueno, pues, si se lo doy a Linkin, ¿vale?
Bueno, efecto demo.
Os prometo que funciona.
De verdad.
Te creímos.
No pasan a veces.
Pues, bueno, está guapo porque te hace como un linter,
te ve todos los números que corresponden a variables que no
tengas puesto como variables.
Ya está.
¿Vale?
Y para gestionar todo el tema de, por ejemplo,
si tienes diferentes locales, si tienes español,
inglés, tal.
Por ejemplo, el adven.js que has hecho,
que creo que lo tienes en portugués también, ¿no?
Tienes en inglés, en español y en portugués, me parece.
Pues, si tuvieras el diseño en Figma para poder gestionar esos
copies, ¿no?
Todo lo que es el contenido, el texto,
si no quisieras hacerlo directamente desde la tabla porque
es un poco rollo, puedes utilizar este plugin que te
permite enlazar una hoja de, una sheet sheets de Google,
una hoja de cálculos, te la permite enlazar a la tabla de
las variables en Figma.
Entonces, puedes gestionar esos copies desde ahí.
Es más, podría una persona que se encargue de writing,
del UX, de, o sea, todo lo que son los copies del contenido,
podría poner los copies ahí y tú olvidarte desde Figma.
Te olvidas.
Es como lo que tú pongas allí va a misa y es lo que se va a ver
en el diseño.
Cosa que va muy bien porque si hacemos nuestros diseños con
autolayout que van a ser fluidos, si el copy cambia,
esos elementos van a cambiar y se van a empujar hacia abajo y se
va a ver realmente cómo se vería con esos copies.
Porque si trabajáis con copies como, por ejemplo,
en alemán o con monedas que son currencies de, por ejemplo,
de, siempre me acuerdo de Colombia, tío,
porque es que los colombianos se te van a millones.
Entonces, manejar esos números dentro de botones o de
elementos a veces es complicado y eso es una muy,
muy buena manera de hacerlo, ¿sí?
Entonces, veis la potencia de las variables es mucha, es mucha,
es muy grande.
Bueno, a la gente le está volando la cabeza el tema de las
variables, ¿eh?
O sea, están...
Es muy guapísimo.
Tengo otro ejemplo que esto es un curso que tengo montado.
Un poco para que veáis el proceso también de cuando diseñas,
primero haces unos wireframes.
En este caso son colorinchis porque yo ya sabía que eran colorinchis,
pero trabajad en escala de grises por un tema muy sencillo para que la
gente se fije en lo importante, no en los colores,
sino en el contenido.
Luego ya le pondréis colorinchis.
Entonces, aquí pasa un poco lo mismo, ¿no?
Tienes todos los copies que están en español porque le he dicho en
la capa que el lenguaje sea español.
Pero si yo le digo que sea inglés, se cambia.
Fijaos que ha hecho un salto.
¿Por qué ha hecho un salto?
Porque el contenido en inglés es menor.
En español, si lo pongo un poco más lejos,
se pasa que lo vais a ver muy chiquito.
Pero si yo ahora cambio a español, ¿veis que pega como un salto?
¿Cuál es la línea que cambia?
Ah, la primera línea.
El título.
El título.
Bienvenido al futuro de la banca.
Pues, en vez de bienvenido al futuro de la banca,
se pasan 2 líneas en vez de 3.
Entonces, claro, como hacemos diseños fluidos,
podemos hacer esto.
Y con diseño fluido me refiero a que con autolayout,
que si volvemos al archivo que os he pasado,
vais a ver que si juntamos todos estos elementos dentro de
contenedores y haciendo shift a como un autolayout,
podemos llegar a indicarle cómo queremos que se comporte,
no solo eso, sino que podemos llegar a hacer que este elemento no
actúe así, sino que cuando se haga más pequeño,
salte.
¿Veis que salta?
Esto se consigue porque en el nuevo autolayout han añadido 2 propiedades,
bueno, 3, pero bueno, son 2 cosas.
Uno es el grab, ¿vale?
Tú a este elemento le estás diciendo que cuando se haga pequeñito,
salte.
Y eso se consigue con el grab.
Fijaos que han añadido una flecha que hace así un salto, un grab,
o sea, es que es grab como un flexbox, pues, lo mismo,
pero no lo teníamos, solo teníamos que podíamos diseñar en vertical
o en horizontal.
Aquí, obviamente, hay 2 contenedores, ¿vale?
Está el contenedor del texto, fijaos que pone frame 14,
lo siento, esto no se tiene que trabajar así, ¿vale?
Pero no tendría que poner, tendría que poner,
shame me in a Carmen, tendría que poner info, contenido, body,
imagen, lo que sea, pero bueno, también las cosas a veces salen así.
Entonces, solo teníamos la opción de indicarle a este contenedor que
fuese hacia, o sea, se comportara, upa, hacia abajo, ¿vale?
¿Veis?
Wow.
O que se comportara hacia la derecha.
Pero ahora con el grab, lo que podemos hacer es que no solo haga
eso, sino que también, opa, se rompe enseguida el Toraya,
no os cabréis con él, ¿vale?
Sino que también haga ese salto hacia abajo.
¿Por qué lo podemos conseguir?
Porque hemos podido poner ahora, digamos que podemos indicarle
tamaños máximos y mínimos.
Antes no podíamos.
Yo ahora le puedo indicar que este elemento va a tener un ancho
mínimo de 500.
Es decir, que cuando un contenido empuje,
cuando llega a 500 el texto, va a decir, me quedo aquí,
se queda en bloque.
Entonces, sigue el flujo normal del navegador Figma.
En ese sentido, el contenido sigue el flujo normal del navegador.
Entonces, cuando un elemento ya no cabe,
si hay uno que está en bloque, ¿qué va a hacer?
Saltar.
Entonces, salta abajo.
Y de esta manera podemos tener diseño responsive sin necesidad
de hacer un montón de contenedores que incluyeran otros o sin
necesidad de decir, hazme el mobile, hazme el tablet y hazme el
desktop porque ya no tiene sentido que trabajemos pixel perfect
porque es que tenemos 8% tamaños de pantalla y de densidad de
píxeles y un montón de cosas y de navegadores que cada navegador
renderiza un poco a su manera también.
Entonces, esto sí.
Entonces, es verdad.
Entonces, podemos incluirle ahora mismo no solo el ancho,
sino que un ancho máximo o un ancho mínimo.
Y le podemos indicar con una variable también.
Entonces, sé que es un poco ingeniería de tener que hacer toda
la estructura de tamaños, colores, todos esos tokens.
Os va a llevar un tiempo analizar qué tamaños y qué contenidos
tenéis.
Pero una vez que tengáis eso armado,
es que no sabéis la de tiempo que os quita.
O sea, en el sentido de podéis trabajar mucho más rápido,
no tenéis que estar invirtiendo tiempo.
Y, además, añade lo que digo todo el rato,
coherencia y consistencia en lo que diseñáis y en lo que se
esté trabajando, ¿vale?
Entonces, tenedlo en cuenta.
Bueno, pues, ¿cómo trabajo?
Un poco como lo que decía, ¿no?
O sea, tenemos el wireframe, tenemos luego el diseño,
pero también hago los componentes.
Todos estos elementos que podéis tener aquí,
que podéis ver, incluso lo que viene siendo la tarjeta,
todo eso son componentes.
Y aquí es donde estoy utilizando el descargar o el download,
¿vale?
OK.
Cosas que podemos hacer ahora en Figma con prototipos, ¿vale?
Os voy a enseñar un par de prototipos y vamos a ver la demo
con Astro, ¿vale?
Se pueden hacer cosas muy locas ahora.
Tengo aquí un ejemplo abierto, que esto lo podéis encontrar
en el community.
Que alguien se ha dedicado, este señor.
Dave Williams.
Dave tiene mucho tiempo.
Ya ves.
No, darle un like o algo al archivo, ¿vale?
Flappy Bird with variables.
Vale, lo podéis, vale.
¿Qué ha hecho?
Bueno, hay un scoring, hay físicas, hay colisión.
Lógica, hay colisiones.
Es decir, el pájaro si se choca contra el tubo, pues,
estás muerto.
Y hay 46 variables.
Entonces, este hombre un poco ha venido a abogar por el hecho
de decir, aunque tengáis la cuenta Pro,
aunque Figma solo nos deje 4 modos,
que los 4 modos vienen a ser esto.
Cuando entramos en las variables,
fijaos que si entro en los colores,
dame un segundo, color styles, ¿vale?
Yo puedo tener aquí nombre, ¿vale?
Mira, este era el color de Platzi.
Entonces, puedo añadir más modos aquí.
Puedo poner aquí, imaginaos, dark mode.
Puedo añadir otro que sea, oh, qué mal va esto, macho.
Light, ¿no?
Imaginaos light y ya está.
Y puedo añadir un cuarto.
Si quieres añadir un quinto, te dice paga.
Entonces, no podemos, tenemos que pagar en Enterprise,
que tenemos acceso a 40 modos, no solo 4, 40.
Y esto, que es lo que más me fastidia a mí,
la resta API de variables, que esto yo muero por probarlo.
Pero, bueno.
Entonces, ¿qué ha hecho este señor?
¿Vale? Voy a cerrar esto.
Este señor lo que ha hecho es decir, me da igual,
con un único modo yo puedo gestionar todo esto.
Todo esto.
¿Vale?
Todo esto son, esto es un prototipo en realidad.
Lo que vamos a ver no es que haya desarrollado un juego
dentro de Figma.
Sí, es un juego, pero es un prototipo.
Es un prototipo con lógica, con lógica que nos dan las
variables.
Por eso que os decía antes que podemos hacer prototipos muy
complejos, pero que desde diseño, pues,
no están, no se está la cosa muy contentos.
Porque ahora mismo, únicamente, con este frame,
con estos elementos, con un único componente,
esta variable, lo que podemos hacer es, bueno,
perdón, aquí hay más, lo del numérico y así, ¿vale?
Esto, estos son componentes.
Entonces, lo que podemos hacer es, si le damos a preview,
que antes era present, ahora en preview podemos hacer cambios en
directo a los prototipos y se reflejan al momento.
Es como tener ahí, ¿no?
Cuando tenemos el live server, ¿no?
Que podemos hacer cualquier cambio y se ve ahí el hot reload,
pues, pues, lo hace igual.
Entonces, le damos a preview, se carga el tag.
Soy malísima este juego, aviso.
Entonces, aquí tenéis.
Funciona tanto con el ratón.
Ah, soy malísima.
Bueno, funciona con el ratón y creo recordar que funciona con,
sí, con el espacio también funciona.
A ver si soy más mala.
Ya no lo puedo creer.
Ojo.
Ojo, que ahora se me va a dar bien.
Vale, el tema es que con el espacio se me da mejor.
Bueno, pues, me voy a chocar a posta, ¿vale?
Entonces, te chocas y pam.
Hasta luego.
Está guapísimo.
Entonces, ¿cómo podemos aprovechar esto para hacer prototipos que
sean funcionales y que sean resultones?
Os voy a enseñar dos ejemplos.
Uno, he hecho una calculadora converter currency.
Está work in progress, os aviso, pero os la quiero enseñar.
Vale, entonces, si le damos al preview, es un conversor a dinero que envías
dinero que, ojo, quiero la otra, ¿vale?
Conversor de divisas.
Yo envío un euro y recibes 4.429 pesos colombianos, ¿vale?
Entonces, la calculadora funciona 2 más 2.
Si le doy al igual no me hace caso de momento,
pero si le doy al más me suma 4.
Entonces, ¿cómo se hace esto?
Que está, lo tengo con work in progress, ¿vale?
Si entramos al panel de, en vez de diseño, al panel de prototipado,
fijaos que si habéis prototipado con Figma,
antes eran muchas líneas, eran como un espagueti ahí, muchas líneas.
Ahora ya no.
Ahora ya lo que hacemos es decirle que haga cosas con las variables.
Es decir, estamos diciendo que se te la variable user input que
multiplique por 10 más 1.
Bueno, eso es tema de los cálculos, ¿vale?
Y todo así.
Quiero decir que al final las variables que tenemos aquí,
si nos vamos a currency, ¿vale?
Tenemos euros, pesos, input length, si está activo o no,
cuando ha presionado una key, la conversión en sí.
Y luego textos que, acordaos que podemos hacer que si están en
español o en inglés, pues que esos textos cambien, ¿no?
Porque si lo tengo bien montado, si yo aquí le digo que en vez de
español esté en inglés, debería cambiarse, ¿vale?
Claro que sí converte, se cambia.
Entonces, esto es algo que estoy intentando hacer que sea
funcional, es complejo, pero podemos hacer otros ejemplos que
sean...
Mira, una preguntita, Carmen, porque dice,
pero no entiendo la aplicación posible.
Creo que eso es trabajo del programador.
¿Para qué tiene el diseñador que invertir tiempo en esto?
Pero a ver, yo creo que queda claro el hecho de que puedas
hacer un prototipo que además sea funcional.
Y además, para que vas a perder tiempo, ¿no?
Si el programador más adelante puede dedicarse a cosas que
sean a lo mejor más complicadas y lo puede hacer así
directamente en firma, pero sobre todo pensando en hacer
prototipos.
Lo primero que he dicho cuando hemos hablado de prototipos,
es que si quieres hacer prototipos complejos,
necesitas a alguien que sepa de programación o alguien que sea
técnico, porque si no, un diseñador que no tenga experiencia
en programación es imposible que pueda hacerlo.
Es más, se va a agobiar cuando vea.
Ahora os enseño cómo se comporta este,
que tiene un pequeño fallo, pero estoy también en ello.
¿Qué consigues?
Consigues tener a nivel de expectativas mucho más cercano el
comportamiento de esos prototipos para que quede mucho más
claro el cómo se quiere que se comporte.
Y la ventaja que tenemos en Figma es que es muy cercano
desarrollo.
No puedes inventarte mil microinteracciones súper
complejas, no estás haciendo animación.
Estás realmente animando o añadiendole funcionalidad a
componentes que tú tienes en tu librería.
Entonces, es como, obviamente, no vas a hacer toda una
aplicación así, pero cuando ves este ejemplo,
a nivel de quitar trabajo a diseño con todas las casuísticas
que antes tenías que hacer, porque para que os hagáis una
idea y tengáis contexto, cuando prototipabas antes tenías que
tener hardcodeadas todas las posibles soluciones que podía
tener la navegación del usuario.
Es decir, si tú querías tener como este elemento de tallas,
tenías que decir, cuando entra a esta pantalla,
si le da la S, muestra esto.
Si vuelve aquí, tiene que ir para atrás.
Si le da la M, muestra esto.
Y tenías un montón de pantallas repetidas únicamente
comprobando que todas las casuísticas se podían
ejecutar.
Entonces, tenías hardcodeado todo.
Eso era un follón inmanejable.
¿Qué tenemos ahora?
Que con estos componentes que hay 1, 2, 3, 4, 5, 6,
hay 6 componentes y uno es el logo.
Vale.
O sea, quiero decir, 5 componentes.
Con 5 componentes que este texto lo que hace es una animación por
detrás.
Esto es el selector de talla, el pricing,
el carrito en estado vacío.
Esto no podíamos hacerlo antes.
No podíamos indicar un estado vacío.
Era imposible.
Y tenemos el carrito en sí.
Vamos a verlo funcionando.
¿Vale?
Tenemos aquí las cards con las diferentes camisetas.
Y, bueno, vamos a ver.
Lo voy a dar al preview.
¿Vale?
Entonces, aquí tenemos el preview.
Esto también se puede visionar en el present que te abre todo el
flujo y puedes compartir el enlace y todo.
Eso no ha cambiado.
Eso es igual.
Solo que desde aquí es más rápido porque si yo hiciera cualquier
cambio, cualquier componente, se vería reflejado aquí.
No tengo que volver a cargar el prototipo que eso con el
present sí que pasa.
¿Vale?
El present es la otra opción que veis aquí que pone present.
Que es una present.
Para verlo, podéis poner una carcasa de móvil si queréis o un
tamaño en el que se va a ver.
Un poco para cuando compartáis ese prototipo, por ejemplo,
a, yo no sé, al PO o a cualquier persona de negocio o al
cliente, lo que sea.
Entonces, en cuanto yo clique, haga el tab de iniciar,
va a aparecer la animación.
¿Vale?
Entonces, yo clico y la animación la vas a tener por detrás.
¿Sí?
A lo mejor al compartir pantalla no veis bien la fluidez,
pero queda bastante guapo.
Entonces, puedes elegir entre las tallas y te dice que no hay
stock.
En la S y en la E, pues, la M si que hay stock,
le añado al carrito.
Cuando le dé a añadir al carrito,
lo que va a pasar es que aquí en mi carrito,
en vez de cero, va a poner un item.
Entonces, yo le doy a añadir al carrito, un item.
Entonces, me dice, ¿qué quieres hacer?
¿Quieres ir al pago?
¿Quieres ir al carrito?
Bueno, pues, si vas al carrito, ¿vale?
Lo que va a pasar es que esto no me está funcionando.
No sé por qué estoy en ello, pero fijaos que si yo le doy al
más, sí que funciona.
¿Vale?
Aquí tendría que aparecerme cuando vienes a esta pantalla,
el 1 ya tendría que generar 328 dólares y no lo está haciendo.
Pero, bueno, estoy en ello, ¿vale?
Entonces, si das al más, añades 4 productos,
5 productos.
En mi carrito también hay 5 productos.
6, 7, suma el precio.
Eso es el subtotal.
O sea, si tuviese más artículos, lo que pasa que no los tengo,
pero si tuviese más artículos, sumaría también todos esos
subtotales para hacer el total final.
Y, obviamente, si quito todos o si le doy a eliminar,
pues, aparece el estado del carrito vacío.
Y si salgo aquí, pues, vuelves a la pantalla y se vuelve a
ejecutar la animación.
Claro, está guapísimo esto.
Está muy guapo, está muy guapo.
Está volando a la gente la cabeza.
Ya, no solo el diseño, que a la gente le gusta mucho el diseño,
me encanta el diseño, sino el hecho de que puedas hacer esto
todo en Figma.
O sea, es tremendo.
Vamos a ver lo que le estoy diciendo para que veáis un poco.
Si volvemos a las variables, volvemos al de...
Palette, spacing, device, me parece que era...
No, a ver, paleta, ¿cuál estoy abriendo?
Ah, ya sé lo que ha pasado.
Ya sé lo que ha pasado.
Esto tenedlo en cuenta.
Me acaba de pasar una cosa guay para explicarosla.
Cuando tú creas las variables, por primera vez,
esas variables, la tabla se muestra únicamente en el archivo
original donde se han creado esas variables.
En los otros archivos donde tú tengas publicadas las variables
y las estés utilizando, las puedes utilizar,
pero no las vas a ver en tabla.
¿Qué pasa?
Si estás utilizando un archivo,
si estás trabajando en un archivo que tiene linkado un sistema
de diseño donde hay variables, tú las variables las puedes utilizar,
pero no las puedes ver en el archivo, en esa tabla.
Entonces, hay un plugin que se llama expose my variables,
expose variables, ¿vale?
Que lo que hace es crearte esto, ¿vale?
Y os dice todas las variables que hay en el archivo.
Entonces, ¿qué es lo que yo haría?
Ir al archivo original donde tengo ese prototipo,
porque lo he trabajado en otro archivo,
le daría expose variables, generaría esas variables,
y como parte de la documentación,
yo lo que haría sería ponerlas en el archivo donde esté trabajando,
porque a pesar de que es insignificante al sentido de que no da igual,
puedes llegar a ver un poco, pues en este caso, mira,
mirando el badge, ¿no?
Pues podrías ver qué variables tiene para poder poner en texto o tal,
¿vale?
Aquí se está viendo las de la car en sí,
que eso sí que lo he trabajado aquí, que es la calculadora.
Pero el prototipado este más complejo lo he hecho en otro archivo.
Os enseño un momento a nivel de principio las cosas que podéis ver,
lo que es más complejo y lo que me está, bueno,
eso me está fallando un poco.
Pero, bueno, ¿qué pasa cuando le doy a eliminar?
Mira todo lo que pasa.
Claro, aquí me decís, vale la pena.
Bueno, si tenéis un perfil que se puede pelear con esto y no le da miedo,
pues es genial, a mí no me da miedo.
Bueno, ya sabéis que mi perfil es un poco raro.
Pero para eso estáis, también para ser un cable y poder definir todas
esas variables, esas funcionalidades,
porque de verdad que esto va a ahorraros mucho tiempo luego a la
hora de trabajar.
Es que va a ahorrar cualquier malentendido o cualquier tipo de
funcionalidad que hagáis.
Las expectativas van a estar muy claras y se va a acercar bastante a lo que
va a ser el desarrollo final.
Y no es After Effects, no estáis haciendo animaciones locas que
luego no se pueden implementar, ¿sabes?
Estáis haciendo funcionalidad en componentes que son de vuestra
librería y que vais a tener que picar o que vais a tener ya en
código, ¿vale?
Entonces, sí que es verdad que, bueno,
hay lógica, hay lógica, ¿vale?
Hay cositas de lógica.
Hay unas que son más sencillas, hay otra que no tanto,
pero se pueden hacer cosas muy guapas.
Este prototipo a mí me gusta muchísimo.
Entonces, eso, lo he dicho, que podéis hacer cosas muy,
muy guays.
Vamos a ir a ver lo de Astro en un momentillo, ¿vale?
Porque son las 8, me vas a matar, Miguel.
No, no, lo que me sabe mal es tenerte aquí, que estás dando...
Que si quieres, lo que...
Bueno, si quieres ver lo de Astro, creo que nos queda también lo del
DevMode y todo esto, pero si quieres, ¿sabes lo que podemos
hacer un día?
Te vienes otro día y te vienes y hacemos lo del DevMode.
¿Qué hacemos solo el DevMode?
Bueno, y lo podemos incluso implementar.
Hostia, qué guapo.
Podemos hacerlo y lo podemos desplegar el proyecto y todo.
Lo veo, lo veo, lo veo.
Lo hacemos juntos, si quieres, con Visual Studio Code.
Y lo hacemos con Astro, que ha salido el 4 ahora.
Y así, pues, ya cerramos el círculo para que la gente vea, ¿no?
De Figma a la realidad e intentando exportar y reutilizar lo máximo
posible.
Luego tuneando lo que haga falta y utilizando Astro y llevarlo a
producción para que la gente, pues, flipen.
Me parece guay.
Si quieres, enseño un momento eso.
Sí, sí, enseña lo de Astro y hacemos una segunda parte que la
gente seguro que se ha quedado con ganas.
Y entonces, veremos lo del DevMode y yo creo que cerraremos un
poco ahí.
Genial.
Para que la gente vea también la parte del desarrollo que seguro
que tienen ganas.
Súper.
Pues, vale, os habéis dado cuenta antes que hemos utilizado un
botón, ¿no?
Es este de aquí.
Y aquí tenemos hecho lo de antes.
Tenemos con las variables el modo light o el modo dark y en
español o en inglés y en francés.
Entonces, si yo elimino esto y este elemento lo voy moviendo,
pues, fijaos que va cambiando, ¿no?
En francés, en light y en dark.
Este light y dark están en las variables y son los que he
utilizado aquí.
Que aquí, si queréis, en otro momento ya explico mejor lo que
he hecho, pero esto sería un diseño básico sin autolayout.
Este sería un diseño ya con tokens asignados de variables.
Y este ya sería todo, pum, el completo, ¿no?
En el que me sentiría cómoda trabajando.
En el que si tú traes aquí un botón, ¿vale?
Si tú traes aquí el botón, saltar el contenido y lo pones
aquí dentro, ¿vale?
Oh, salta, ¿vale?
Y se pone acá.
Entonces, en este que le hemos dicho que sea inglés y light,
si yo digo que sea Spanish, el botón, ¿veis?
El resto de contenido no lo tengo hecho,
pero el botón, ¿veis?
Que cambia.
Entonces, y se mantienen espaciados y todo.
¿Veis que está 16 y tal?
Si yo esto mismo lo intento hacer en el primero,
creo recordar que no lo tengo bien montado,
entonces, tendría que, ¿veis?
Se pega ahí en medio.
Le da igual.
Entonces, lo guapo de autolayout es eso,
que puedes definir el layout con los padding,
los márgenes etcétera y haríamos esto.
Con token estudio, acordaos que antes os he dicho lo de token
estudio que era con el que mejor se trabaja.
Token estudio, acá.
Si lo abrís, vamos a ir a la parte de settings,
aquí en el tercer tab, settings.
Y fijaos que aquí tengo un proyecto,
un repositorio de GitHub que se llama Astro Paper,
porque estoy utilizando, lo que he hecho ha sido diseñar la
template que tiene Astro Paper, que es para hacer blogs,
básicamente.
Y lo que tienes que hacer es darle permisos,
si yo he dado estos puntitos a edit,
le tienes que dar permisos y generar un token desde GitHub para
que le des permiso para acceder a ese repositorio.
De esa manera, ya veis aquí un poco el truco,
que pone MyStyleDictionaryToken.json.
Lo que hacemos con token estudio es generar un json.
Voy a borrar este, voy a crear uno nuevo, delete.
¿Vale?
Creamos un set que se llame, bueno,
pongo global o lo que queráis.
Entonces, lo selecciono, lo activo y digo que traiga,
que importe los estilos.
¿Vale?
Pues vamos, un segundo, se me ha quedado esto loco.
Import.
No, no, no.
Un segundo.
Acá.
Ahora, os voy a decir solo de colores para no liarnos mucho,
¿vale?
Pero puedes importar lo que quieras de textos y de todo.
Digo colores import y ya me veis aquí lo que está haciendo es,
mira, el call primary, secondary, astro,
tatatatata, ¿vale?
Con los valores que tiene.
Le digo que sí, que los importe todos.
Y esto es la parte visual preview bonita,
pero también podéis verla cambiando a este icono de las 2
cloud datos a json.
Y veis el objeto, pues, ¿no?
Pues, si es color, si lo que sea.
En este caso solo hay color, pero si tuvierais texto o shadows
o tal, pondría color y gradient, gradient 2,
color primary, tatatata.
¿Qué hacemos con esto?
Lo que queremos es subirlo a nuestro repositorio.
Fijaos que aquí ha aparecido un simbolito, ¿no?
Como una notificación.
Entonces, estoy en la branch mail,
estoy en la rama mail.
Hago push to GitHub.
¿Puedo poner un mensaje de commit?
No sé.
Semantic commit, ¿no?
Lo siento.
Update tokens.
Sí, para mí hoy muchos días, ya verás.
Subo a GitHub.
Entonces, se puede hacer un pull request si quieres incluso,
no hace falta.
¿Qué es lo que tengo que hacer?
Dejo un momento de compartir la pantalla y vuelvo a compartir
con Visual Studio.
Muy rápidamente.
Muy rápidamente.
Compartir pantalla, Windows.
¿Ahora estás?
Ojo.
Está en huelga.
Visual Studio Code está diciendo,
ah, no, has estado aquí con Figma a tope
y ahora me quieres buscar a mí.
A lo mejor está en la otra pantalla.
Lo tengo, lo tengo ahí.
Está escondido.
Ahora, ahora, ahora, ya está.
Se ha rayado, se me había remisado.
Vale, lo tenéis que ver ya.
Sí.
Ahora mismo estoy en el archivo.
Ojo, voy a quitar esto que se ve ahí.
Notificaciones.
Vale.
Ahora mismo estoy en el archivo de Astro.
Fijaos que podemos ver un montón de cosas.
Esto ya lo veremos cuando hagamos lo que comentabas de
hacer la implementación también.
Pero vamos a centrarnos en vez de en lo que es la extensión de
Figma para Visual Studio Code.
Voy a cerrar esto y nos vamos a centrar en lo que tenemos aquí.
Yo lo tengo abierto en el localhost.
Lo tengo aquí, ¿vale?
Entonces, lo que hacemos, voy a parar un momento.
Lo que tenemos que hacer es entrar en, primero,
bajar los cambios.
¿Veis que hay un cambio?
Si nos fijamos en MyStyleDictionary, en los tokens aquí,
que pone global, astro, ta, ta, ta, ta,
esto cuando yo haga el traérmelo, va a cambiar.
¿Vais?
Habéis visto que ha puesto Linear Gradient, otros colores,
color primary, ta, ta, ta.
Esto, lo que yo lo gestiono haciendo una build de Style
Dictionary, que lo tenéis que instalar como dependencia.
Y en esa build lo que se generan son los diferentes estilos
para las plataformas que queráis.
Si entráis en CSS, pues, vais a ver que ha creado las variables,
¿vale?
Estas variables, que yo las tengo aquí, por ejemplo, ¿vale?
Estas variables, lo que yo hago es llevármelas luego a los
estilos, ¿sí?
Si vamos a Styles Base, tenemos que para el modo Light,
tenemos el color sugar cane, que lo que hace es el fill del
botón, estamos haciendo a nivel semántico todos esos tokens.
Y, además, le he dicho que quiero que haya un modo Light y un
modo Dark.
Con lo que cuando yo levanto este proyecto, ¿vale?
Y lo abro en el navegador, dame un segundo, ¿vale?
Vais a ver que es el mismo diseño.
No se ve el navegador.
Ah, porque has compartido la pestaña, o sea, la ventana, me
imagino.
Sorry, un segundo.
No, tranquilo.
Perdón, ¿eh?
Pero es que está guapo que lo veáis, Astro Paper, ¿vale?
Lo que vais a ver es el mismo diseño que tengo en Figma acá, ¿vale?
Y fijarse en el botón.
Y si yo lo cambio de Light a Dark, pues, está utilizando las
mismas variables.
A ver si puedo levantar.
¿Vale?
Está utilizando las mismas variables que vais a ver, ¿ves?
Ebony Clay, Mystic, Camarón, Eb, Phil.
Son las que tenemos.
No se ven las variables.
¿Cómo se ven?
Es que solo se ve la web.
Solo se ve como la web.
Ah, fuck.
No se están viendo las developer tools.
No, no se están viendo las developer tools.
Vale, bueno, pues, me tenéis que creer.
Se están utilizando las variables que tenemos en Figma, ¿vale?
No sé por qué las developer tools no se ven.
¿La verdad?
Supongo que porque lo cuenta como una ventana aparte o algo,
que te sabes.
Sí, ¿eh?
Sí, es raro.
Sí que se ve como que está seleccionando cosas.
Sí.
Pero no se ven las developer tools.
Estoy ahí, estoy ahí.
Bueno, creedme.
Entonces, ¿qué es lo bueno de esto?
Que si yo en Figma cambio la variable del botón, el que el contenido en vez de ser naranja sea verde,
pues, subiría ese cambio al repositorio.
Y se sincronizaría.
Y se sincronizaría con el proyecto.
Todo esto también se puede automatizar.
Quiero decir, vosotros podéis automatizar cosas con la API de Figma.
Porque tiene una API con una documentación muy guapa que además hicieron un update y le dieron un cambio también no solo visual, sino de contenido.
Y es muy accesible.
Entonces, podéis probar también a automatizar cosas e incluso a desarrollar vuestros propios plugins también.
Eso no lo he comentado, pero si sabéis JavaScript o TypeScript, pues, podéis desarrollar vuestros plugins.
Así que es una herramienta muy completa, como podéis ver.
Y todo el mundo puede trabajar y colaborar.
Porque ya veis que hay 20.000 frentes a los que puedes atacar.
Sí, ¿no?
Ya solo con los plugins que has enseñado, que hay 10.000 millones de plugins y que hacen cosas.
Bueno, lo de Flappy Bird también me ha volado la cabeza directamente.
Tengo, bueno, han hecho una de preguntas que sería imposible.
O sea, estaríamos tres horas aquí para todas las preguntas.
Ya lo imagino, lo siento.
No, no, tranquilo.
No, no, lo que no quería pararte el ritmo y tal, porque estabas ahí a full.
Y, mira, sí que te voy a preguntar una que han dicho unas cuantas veces,
como para un programador web hay mucha diferencia entre usar Figma y Penpot,
porque han salido muchos fans de Penpot aquí como diciendo, ah, Figma, ah, Penpot.
Perdón, la primera fan de Penpot aquí soy yo.
Ojo.
Ojo.
¿Quién ha estado en el Penpot Fest?
Yo.
Anda, anda.
Calla la boca.
No, quiero decir, quiero decir, obviamente, obviamente,
y esto justo me ponían un tuit antes de empezar el directo,
no sé si es alguien que está viendo el directo,
me decía que veía que yo he trabajado mucho con Figma
y que él, que esa persona no, que trabajaba con Sketch,
pero que estaba planteando trabajar con Penpot,
que qué opinión tenía sobre Penpot.
Bueno, deciros que Penpot es open source, eso es lo primero.
Así que ya es bien.
O sea, solo ya porque sea open source, ya está genial.
Lo segundo es que son gente que conozco porque el equipo está aquí,
bueno, está trabajando en remoto, pero son de España y les conozco a todos,
son majísimos.
Y lo tercero es que están acercando mucho más la web a la herramienta.
Es decir, tanto por nombres que les dan a las cosas,
no le llaman Flexbox, no le llaman, es Grid, pues es Grid Layout.
En fin, ¿no?
No se inventan nombres, no es Corners Radius, ¿no?
Sabes, Figma ahí, pues ha pinchado un poco.
Y están implementando, por ejemplo, temas de Grid que no hay en Figma
y lo están implementando ya.
O sea, van a tener Grid Layout antes Penpot que Figma.
Entonces, ¿qué pasa?
Que obviamente es un equipo que no se puede comparar,
es injusto compararles, pero ojo, le están pillando los talones.
Le están pillando los talones.
Entonces, yo imparto cosas con Figma porque estoy en la comunidad de Figma.
Pero yo me quedo con Penpot en ese sentido.
Claro, es que a ver, las cosas estas evolucionan.
Figma, la verdad es que ahora está en un momento brutal,
pero también hubo otra época en la que Figma no era el número uno.
¿Quién sabe el día de mañana?
Veremos los cambios.
Al final hay que adaptarse.
Y lo bueno es que muchas cosas que has enseñado, al final,
sí que las veo bastante similares a ideas que tiene Penpot.
Que a lo mejor se puede ayudar, la forma de pensar,
el cómo mover, crear los componentes.
Bueno, y ya los consejos que ha dado de UI, obviamente.
Piensa que lo que viene siendo el paradigma de cómo trabajar
con estas herramientas, Penpot y Figma son iguales.
Son iguales.
Por ejemplo, hay XD, no.
Sketch tampoco.
Sketch sí que tiene la parte de símbolos, trabajar, utilizar,
pero no es el paradigma, no se acerca tanto a desarrollo.
Y en ese sentido, Penpot está haciendo aún más fuerte la
conexión y la relación y colaboración entre diseño y
desarrollo.
Está eliminando el gap.
Entonces, obviamente, por tema manos y equipo y todo,
pues, Figma es un monstruo y ahora con Adobe más,
pues, obviamente tiene mucho más masa de pasta, ¿no?
Para invertir y decir, vamos a hacer cosas.
Pero es que Penpot les está, está pillándoles en ese sentido.
Entonces, si te tengo que decir qué porcentaje dirías que
está de cerca, pues, es que a lo mejor es un 70, un 70%.
Es mucho, ¿eh?
Es mucho para el esfuerzo y el trabajo que está haciendo el
equipazo que tienen detrás.
Es una pasada.
Así que me vais a ver hablando de Figma,
pero yo siempre que hablo de Figma,
es verdad que hoy no he puesto la slide,
siempre comento lo de Penpot porque es que lo pienso así.
Y además es que es open source, la herramienta.
O sea, todo el mundo puede contribuir.
Y, bueno, no sé, había herramientas para hacer otro tipo de
trabajos visuales o de diseño, como puede ser GIMP para
Photoshop, Inkscape para Illustrator.
No teníamos para diseño de interfaces gráficas.
O sea, ahora podemos tener Penpot.
Así que.
Buenísimo.
Pues, mira, por aquí también decía Elliot, decía,
si bien es útil el modo desarrollador,
pero pone muchos estilos que no apoyan respecto a Figma y.
Todas las herramientas que generan código son un poco meh.
Obviamente, si quieres hacer pruebas de concepto,
o si quieres utilizar plugins directamente que son no code,
que, por ejemplo, para trabajar con Webflow o con Framer o
cosas así, puedes trabajar directamente desde Figma y
generar ese código que necesitas la plataforma de terceros,
en este caso Webflow, ¿no?
Para poder desplegarlo en producción.
Todos no son perfectos.
Es que no lo van a ser.
Pero estamos cerca de que empiecen a pensar mucho en HTML.
Por ejemplo, no os he enseñado un plugin,
pero lo tenéis, tenéis la página dentro del archivo,
que se llama Misho.
Misho es de Pablo Stanley, que es un tío que es un crack que
está dentro de hace un montón de cosas para Figma.
Es una IA para poder diseñar pantallas diciéndole un prompt de,
quiero una landing page para, yo qué sé,
para una pizzería, ¿vale?
Y te hace la landing page.
Y si os fijáis en lo que crea, la estructura que crea,
además de estar en autolayout, que está fenomenalmente hecha,
os la podéis fijar bien y copiar la estructura,
empiezan a poner como unos atributos en los nombres de cada
contenedor y ponen section, article.
Y es como, wow, me gusta.
Me gusta porque a lo mejor eso quiere decir que en un futuro
podamos tener también tipología de contenedores dentro
de Figma, que eso ayudaría muchísimo.
Lo hace mucho mejor al revés.
Hay otro plugin que se llama de HTML a Figma o algo así,
ahora no me acuerdo bien del nombre,
que lo que hace es que puedes traerte webs en producción a
Figma y son editables.
Entonces, también para no empezar con la página en blanco os puede
ayudar.
Pero la herramienta hace mucho mejor eso,
el traer código a visual que no el visual hacerlo en código.
Pero creo que estamos cada vez más cerca de que se vaya
ajustando.
O sea, ya estáis viendo la inteligencia artificial,
todas las herramientas que están saliendo.
Y de plugins en Figma os podéis aburrir de todo.
No ha habido infinitas las que has enseñado.
Bueno, Carmen, Carmen, menuda masterclass.
A mí me ha volado la cabeza porque, mira, yo decía,
bueno, yo me defiendo más o menos en Figma,
pero has empezado a sacar una de cosas y yo, Dios mío,
Figma, pero esto no termina.
Es increíble la de cosas que se puedan hacer.
Ya.
Me ha volado la cabeza.
Oye, le voy a dejar aquí a toda la gente,
sobre todo si estás en Twitch,
podéis poner el comando exclamación Carmen para ver todas sus
redes sociales, todos sus enlaces.
Tienen recursos cósmicos,
tiene su cuenta de Twitter,
también podéis ver su CodePen,
que tiene un montón de cositas súper chulas de CSS,
de un montón de cosas increíbles.
Mira, un montón de gente está poniendo ahora la exclamación.
Y así, pues, no le perdéis la pista,
sobre todo cuando se vuelva a venir aquí,
que le vamos a engañar de todas las formas para que nos
enseñe toda la parte de DevMode y vamos a intentar llevar a
producción el desarrollo que haya hecho en Figma.
Y si todo lo que le ha enseñado Carmen,
que es increíble,
que justamente para que veáis la de cosas que se pueden hacer en un
solo proyecto,
porque había muchos comentarios de,
ay, pero yo no quiero usar Figma,
que solo tienes tres proyectos.
Joder,
pero usad un proyecto para lo que queráis.
Puedes tener 10.000 millones de páginas.
Claro, sí,
no os quedéis con la limitación para nada.
Pensad que lo explico para que luego no se lleven a de sorpresas,
deshacen la cuenta y en plan de qué pasa aquí.
Bueno,
que lo sepáis.
Podéis hacer tres páginas,
pero,
y tres proyectos,
pero podéis hacer muchísimas frames dentro de cada página.
Quiero decir,
ahora no recuerdo cuántos nodos aguanta,
pero aguanta millones de nodos.
O sea,
podéis hacer muchos elementos dentro de un mismo archivo.
Así que no os preocupéis,
utilizadla.
El mejor ejemplo lo tenéis en esta URL,
lo que ha mostrado todo,
todo lo que ha mostrado Carmen.
Sí,
ha quedado cosas así.
Todo es un solo proyecto.
O sea,
que entrad,
echadle un vistazo,
así revisáis todos los ejemplos y consejos que ha hecho.
Hay teoría,
hay un montón de cosas que estoy consciente que en dos horas es imposible,
pero también quería que fuese un poco el inicio de decir,
wow,
qué se puede hacer con la herramienta.
Sé que se está utilizando mucho,
pero para que veáis todo el abanico de posibilidades que tenéis en los que se
pueden,
desde mejorar flujos de trabajo,
de colaboración,
de,
es que es una locura.
Podéis que estar todo el día en la herramienta.
Así que os agradezco que hayáis estado ahí porque la verdad es que hay mucha info,
pero me alegro también que haya salido la oportunidad de poder enseñaros el siguiente paso,
que sería toda la parte más a fondo del DevMode y poder implementarlo.
O sea,
que es genial.
Carmen,
muchísimas gracias de corazón por haberte pasado,
muchísimas gracias por la masterclass,
estaba todo el mundo súper agradecido,
la gente está muy agradecida por todo lo que has compartido,
de que estaban flipando,
pero madre mía,
esto no,
dicen que había gente que decía,
yo he pagado cursos que no me han enseñado ni la mitad de lo que he aprendido aquí en dos horas.
Pues mira,
me alegro,
no de que hayan pagado,
sino de que les sirva,
porque la idea es esa,
la idea es esa,
de que veáis todos y todas que no tenéis que tener miedo a una herramienta,
ni a decir,
buah,
si esto es de diseño,
no,
no,
o sea,
meteros,
investigad,
utilizarlo,
porque la verdad que vais a aprender todo cosas que vais a poder aplicar luego en vuestro trabajo siempre,
siempre,
de todo lo que aprendáis,
así que animad.
Vamos a dejar a Carmen que descanse un poco,
y a todos y a todas,
muchas gracias por estar ahí,
espero que hayáis aprendido algo nuevo,
de lo cual estoy bastante convencido que ha sido así,
y mañana seguimos con la charla con Christian van der Hens,
cofundador de Platzi,
donde vamos hablando de cositas chulas,
de salseos tecnológicos y de un montón de cosas,
os cuidáis mucho,
muchas gracias Carmen,
hasta luego a todos,
y hasta mañana amigos,
chao.
chao.