y ahora sí que de verdad nos viene la charla de juan carlos espera que estás bateado para funcionar ahora sí vale ahora sí que te toca a ti como como sí porque me he equivocado al darle al botón su propio white o de wikis de ambos de zoom por si te parece te hago una breve introducción y ya avanza con con la charla pero perfecto juan carlos es también front-end de belo perder a de vintage spain es apasionada de css las buenas prácticas pero también tienes interés por el dubai o ex lo que te ha llevado a meterte en el berenjenal de desarrollar sistemas de diseño siendo la luz estamos ahí en estos en general con lo cual esta charla está muy de moda bueno pero es que es lo que hay que hacer al final pegarse con esto así que nada empieza comparte pantalla y estamos ya estamos y tal bueno pues como ha comentado crisis al principio de la charla del evento design toque el sol es una palabra de moda al igual que los sonará sistemas de diseño para hacer librería así pues hoy vamos a ver un poco que son los diseños toques y cómo trabajar con ellos y sobre todo la mejor forma de trabajar con ellos bien ahora desde desde marte que bueno ya me ha presentado crisis sin quedar los front end en la venta y es mi tercera semana del inta y la verdad es que quería darle las gracias porque tuvo bien bordín ha sido en remoto y la verdad es que se ampliado un q razón y ha sido ha sido maravilloso la verdad muchas gracias soy también co organizador de hace poquito de murcia frontera una comunidad donde hablamos mucho de tecnologías web él organizó con un amigo josé manuel y miriam y esta nueva temporada que estamos preparando vamos vamos a hablar también mucho de diseño y al final el diseño también es parte de es frontera y bueno pues podéis seguirme en redes sociales por por mi usuario closer ahora estudian todos peter facebook linkedin todas en la misma y el trabajo en a de venta somos una familia de marcas digitales en concreto yo trabajo en real state sería inmobiliario fotocasa y hábitat ya que yo en concreto estoy en el equipo de hábitat ya bien vamos a empezar comentando que el concepto que tienen muchas personas es que los distintos que son solo variables y realmente no lo son es decir que los distintos que son variables es como si decir que que responsa y web design son sólo media acuario los distintos que se mandan van más allá y es una metodología como una arquitectura de un proceso independiente o agnóstico de la tecnología para que nuestro producto pueda escalar de forma muy sencilla y al final pues las variables son sólo parte de esta historia bien al final con nuestro disiento que es lo que vamos a conseguir es generar que tanto diseño como desarrollo tengamos un mismo lenguaje de comunicación y al final pues ocurre muchas veces desde diseño desarrollo pues nos piden o se pide que tengamos que cambiar este pequeño botón azul y realmente poder de esta forma se cometen muchos errores debido pues a malentendidos o que sea azul cual el que se esté más oscuro es este más clarito al final ese cambio debería hacer seis que no se cambie ese botón azul sino el botón para amarillo o secundario tengamos un lenguaje de comunicación una nomenclatura para nuestros componentes y a su vez nuestros talentos bien no podemos hablar de diseño toker sin hablar de sistema de diseño design system por lo tanto vamos a ver un poco el proceso de un sistema de diseño un poco destilado no bien pues la parte fundamental de nuestro sistema de diseño aparte de de esas tomas de decisiones de diseño van a ser nuestro diseño en tropea y es que van a está porque compuesto por colores tipografía laia o de espaciado cualquier elemento que con el que podamos construir nuestros nuestros componentes ya partir de ahí vamos a diseñar nuestros componentes ya sea obviamente una metodología uno pueda ser atomic design estoy seguro de que todos aquí o la mayoría la conocéis y a partir de ese diseño pues vamos a desarrollar nuestros componentes lo haremos mediante una pater librería que al final va a ser un catálogo de componentes ya desarrollados con documentación y al estilo que pueda ser consumida por nuestro frontal y os hablo de mí siento bien en este profesor existen al diseño porque al final todos nuestro kaysing toquen van a convivir tanto en la parte de diseño como la de desarrollo y van a estar inyectados en forma de decir o átomos átomos visuales bien pues vamos a comenzar a pintar ya que tenemos visto como el flujo del sistema de diseño y para ello pues tenemos muchas herramientas de diseño actuales dejado eso podemos elegir cualquiera de ellas al final tenemos que adaptarnos a nuestro equipo realmente a nuestras necesidades y si cualquiera de estas herramientas las cubre perfecto al final pues la toma de decisión de una herramienta de diseño me recuerda mucho a qué framework debo librería de from perú utilizar valor apuntar la firma view sketch pero bueno ya estamos en 2020 en este caso si vais a diseñar nuestro sistema de diseño pues no utilicéis photoshop es como hace 10 años fotos que sería lo que el front end is where y existen muchas herramientas que nos van a dar muchas ventajas como como firma que el que particularmente estoy encantado y ahora más adelante veremos todo lo que no nos puede ofrecer y todo eso superpoder que vamos a obtener con nuestros visito que es a través de firma bien una vez que ya tenemos todo pues vamos a comenzar a definir esos design tokens y vamos a empezar pues lo primero pues definiendo nuestra nuestra paleta de colores después nuestros colores primarios que serían los colores de nuestra marca colores neutrales y colores de estado no también tendríamos tipografía toda la tipografía de nuestra marca espaciado por favor siempre utiliza base 8 es una buena práctica y bueno si necesitamos más token podemos generar los como el radio sombras e incluso podemos definir los poderes de nuestra aplicación en diseño así que sí necesitamos unos cuantos más pues los podemos incluir sin problema al final la forma de construir nuestros componentes mediante diseño que es pensar un poco en bloques de lego no esa pequeña especie de citas que a su vez vamos construyendo componentes o piezas más grandes y esto aplicarle un componente sería de esta forma y es que nuestro componente botón en este caso pues está compuesto por por esa especie citas llamadas tokens no ya tendríamos toca ente espaciado para definir el espacio entre el texto y ese rectángulo el color de fondo como un color primario toque el de radio y colores de tipografía y esa tipografía que sería el body normal y a partir de ahí ese componente podría escalar fácilmente incluso podríamos significar lo bien ya tenemos nuestros toques en diseño ahora lo que necesitamos es generar los en desarrollo y para ello como hemos visto que la metodología de sentó que debe de ser agnóstico la tecnología nosotros nos debería de dar igual el frame el front end o el framework lo que necesitamos utilizar ya sea a riad web componentes y tecnologías nativas como a ellos como android nos debería dar igual vale al final desde diseño tenemos que generar esos tokens en variables para que puedan ser consumidas desde cualquier aplicación esa aplicación es la tienen sus estilos propios y necesitamos generar esos estilos esas variables para ser utilizadas en esa plataforma por lo tanto el plataforma web podemos tener como como lenguajes como css utilizarlos con ceses y js o mediante procesadores y en plataforma nativa por utilizaremos con con android y adiós bien el flujo para generar nuestros nuestros token en variables web uso normal y es que nosotros tenemos nuestro fichero de diseño y mediante forma manual o ayuda de algún player exportamos esos toques o bien también podemos utilizar herramientas como os explico en visiones existen managers que están muy bien y nos van a ayudar a generar esos tokens vale pero esta forma lo que hacemos es generar los ya sea copias entregando ayuda de nuestro incluye en general los 11 ya que si estamos trabajando en web y estoy utilizando en este caso pero procesados como esas pues tendría que utilizar lo irme al fichero de diseño exportarlo copiar pegarlo en el fichero de desarrollo y generarlo si estamos utilizando vanilla o es igual 17s igual android y ios de esta forma es un poco pesado es un poco pesada porque tenemos que hacer los cambios de forma manual entonces todavía no convence no entonces el buen flujo para generar los design tokens es que el mismo proceso mediante nuestro fichero diseño exportamos esos tokens vamos a generar una base de datos de esos tokens y mediante una herramienta como ésta el diccionario lo que vamos a hacer es generar en forma de variable para cualquier plataforma esos esos tokens este visionario pues es una herramienta que nos permite definir los artículos una vez mediante esa base de datos de toque y generar los en todas las plataformas a los lenguajes que que vayan a ser consumidos y al final pues es un único lugar donde tendríamos esos toques y pues con un solo comando pues generan los para cualquier plataforma o lee un lenguaje ya no esto está está bastante bien porque ya podríamos tener automatizada esa forma de generar nuestros toques para ser consumidos en nuestra frontera pero tenemos otra forma mucho más chula de generar esos token como variables así que si ya os he comentado que me gusta mucho firma pese a que la exportación de las imágenes no sea la más óptima posible como ha comentado ya tenemos que decirle hola y ver lo que es capaz lo que somos capaces de hacer con confirma y es que tendría nuestro fichero pero esos toques anxo esa base de datos de tokens lo vamos a generar mediante mediante su arte y es que fije menos proporciona una piel la que nos podemos traer todos los datos todos los valores de los elementos que tenemos representados en nuestros ficheros vale en forma de valor entonces lo que hacemos es un final a la api de firma nos traemos esos tokens en forma de variables en en nuestra base de datos de tokens para luego ser usados con esta visionaria y generar esos tokens en forma de variable para todas las plataformas y esto pues está muy bien pero realmente necesitamos ver cómo funciona entonces vamos vamos a ir un momentito nuestro nuestro fichero de firma se me dio toma un segundo aquí este será nuestro fichero de firma con con todos los tokens ya desarrollados lo que hemos visto las slides y aquí tendríamos nuestra water librería alierta un pequeño proyecto que he creado para que podáis ver cómo podemos integrar nuestros nuestros token con firma y poder generar los a través de esta división entonces en esta parte de ley breve necesitamos tener los mismos valores son los mismos toquen tanto en diseño como en desarrollo por ejemplo de colores tendríamos los mismos vale y todos los tomen que teníamos disponiendo a estos valores están generados a través de lápiz de firma y está el visionario esto que no nos va a permitir pues que si realizamos un cambio en el fichero de firma podemos actualizar de forma inmediata esos cambios en nuestro nuestro francés en nuestra aplicación vale para ello pues simplemente tenemos que ejecutar un comando vamos a utilizar este primero marc y lo que ha hecho es traernos todos esos tokens en forma de variable y esta va a ser la base o nuestra base de datos de informar bueno y va a ser la base de datos para poder generar todos nuestros toque en el variable para restructurar forma esto que nos ha generado si nos venimos aquí tenemos un objeto con todos esos valores para poder generar los konex perdition al vale esto con los bloques que configura ahora mismo es generar una app y que desde firma que luego os dejaré toda la documentación para poder hacerlo y el líder de ese árbol vale entonces si nos venimos aquí y tenemos nuestros componentes a modo de prueba vale un botón un componente heading ya su vez pues una molécula que engloba esos componentes que nos interesa aquí es qué podamos modificar nuestros toques desde firma pues no vamos a hacer vamos a cambiar el color a poner unos ojitos bismarck y vamos a cambiar también pues la tipografía de cuerpo y mucho amigo y nuestros jardines [Música] automática vamos a cambiar también la sombra aquí y ahora volvemos a ejecutar el comando y automáticamente ya nos va a cambiar esos toques mediante los valores que hemos que hemos modificado en diseño para poder generar esos tokens en variables para que puedan ser utilizadas en el resto de plataformas tenemos otro comando que se ejecuta con esta del diccionario qué vamos a hacer el día de esos los tokens entonces lo que tenemos es dentro nuestros tokens generados pues esos toques en variables besas todos los que tenemos en formato jason que es el que estamos utilizando cuando lo generamos el de firmat y tenemos tokens para george suites para your heart y c y para android vale de esta forma en un solo comando podemos traernos todos esos toques desde desde firma y generar los para el resto de plataforma y sin tocar una línea de código o sea que me parece maravillosa vale vamos a volver a dejarlo como lo teníamos a ésta y con el pie rapto que lo que hacemos es generar el fichero base y ejecutar este el visionario y no lo hace de forma automática entonces también para cambiar pequeños componentes pero esta forma donde nos permite crear temas y es que si podemos dignificar nuestro sistema de diseño por al final sí si tú construyes tu sistema de diseño para producto para producto propio ese producto es consumible por un tercero al final ese tercero tiene su propia paleta de colores no entonces vamos a ver aquí porque esta es la web del evento lo que pasa que no está muy bien como debería de verse no está con nuestros demás entonces vamos a modificarla un poquito para no tener que estar cambiando todos los valores lo que es así o duplicar este fichero con los mismos mismos nombres de tokens y generar el fin de zapatillas from mars entonces aquí tendríamos los colores de la web del evento la tipografía y todo lo relacionado con ella entonces aquí tenemos el de firma de este documento que lo único que vamos a hacer es y copiarlo y pegarlo en nuestro fichero de configuración y volvemos a ejecutar el comando y automáticamente puedes dar así que sí que se ve como debería de verse la web del evento aquí está vale pues todo este código y toda la integración con confirma he creado un repositorio en pixar para que podáis poder descargarlo y crear vuestro fichero de design tokens y que podáis cambiar o comenzar a mostrar vuestro propio sistema de diseño pues lo dejó también documentado en las slides y bueno pues al final todo poder con una gran responsabilidad y es que debemos que ser consecuentes con lo que estamos haciendo y sobre todo si vamos a comenzar a construir nuestro sistema de diseño y colaborar a una buena comunicación una buena simbiosis entre diseño y desarrollo que debe ser debe ser necesaria al final tanto diseño como desarrollo somos productos y debemos de trabajar de esa forma así que si podemos tener una forma para mejorar nuestro nuestro flujo de trabajo debemos de hacerlo así que para comenzar lo que os he comentado tenéis vuestro fichero de firma para copiarlo y trabajar con él y el repositorio con la para tener la librería para que podáis probar los recuersos son bienvenidos bien así que nada agradecer a from mars que es como agradecer a akrid busquets y agradecer también no sé si ponerlo pero bueno o sea no nos han baneado todavía así que yo creo que sí gracias también a la luz por patrocinar el evento así que nada más muchas muchas gracias nos dejó las slides de la presentación final me ha llevado a la charla un poco menos de tiempo así que si tenéis alguna pregunta podemos podemos verla gracias y bueno juan carlos gracias a ti y me acabas de recordarlo del paneo pero bueno creo que estamos ya los tres horas casi veinte minutos salió creo que ya podemos ponerlo no si quería podía pararme toda la pared detrás del problema que no fallaría nada nada muchas gracias por por la charla a mí me ha apretado la cabeza y a unos cuantos que estaban por aquí en en tweets también sí que hay algunas preguntas que si quieres te las voy de librado bueno la de subida es el repositorio ya quedado claro que sí está por aquí había una idea ayer público aparecer su genial había alguna por aquí que no estoy encontrando pero bueno apuntado es porque base 8 que es la eterna pregunta que va y vuelve y porque siempre todo con 8m me gustan los pares base 8 yo creo que está guay porque puedes construir al ser múltiplos de queda como todo mucho más uniforme de tomos creo que es una pregunta que mucha gente construye en base 4 base 8 o directamente se lo salta vale a mí personalmente me gusta de todos modos yo yo no soy diseñador vale aún así que prefiero base 8 porque creo que te genera bastante consistencia a la hora de diseñar incluso de desarrollar yo creo que le damos por contestada porque es como la es esta pregunta y la de deben programar los diseñadores creo que es un estándar de los últimos años que van como van volviéndose meses pese al final pues yo soy en mi perfil es más desarrollador pero así que me atrae bastante el diseño y bueno tal como he comentado antes considero que diseñó también es frontal escrito has hecho el camino al revés es aquí roto los esquemas y creo que es convencido a mucha gente para que se pase de sketch afirma pero sí que hay preguntas de si hay es posible hacer esto con el sketch o con zeppelin o algo que más o menos voy a servir creo que ese plan no tiene no tiene nadie dice existen managers nosotros he probado un vicio sí que sí que tiene incluso que generar esos token en el formato que tú quieras un objeto de deseo para ellos no lo conozco ahora mismo si es que tiene tiene abril es cuestión de que ya no lo sé tendría que verlo vale aún así pues si no tienes aquí ya está muy acoplado a sketch lo que puedes hacer es obviamente no se va actualizar de forma automática y se lo chulo sí pero bueno puedes comenzar a integrar esta división ar y automatizar un poco todo el proceso de generación de toques pero es que la pide firmas para está muy chulo es total que más o menos se puede pero mejor sigma ahí están viviendo si algún día podrías hacer una demo de sketch masterplan + react sketch pepín real ahora no evidentemente podemos hacer la confirma también o al final creo que daría un poco igual incluso voy a investigar un poco a ver si podíamos hacer esto con este que es nadie pues encontrar una manera porque hay una herramienta de terceros pues si encuentras la manera montamos otro zapatilla derrumbarse no de siete horas creo yo y yo creo que está guay esa forma de poder generar esos toques sin tener que tocar código y al final que la única fuente de la verdad sea sea tu fichero porque al final ocurre mucho que tú puedes tener tus valores de distinto cree en diseño pero no están actualizados en la web pues al final es ese proceso de actualización es esa sin crono no sea tú esperas que hagas el cambio que el programador lo cambie y no sabes cuándo cuando lo hace si esto rompe un poco esa pequeña sincronía que tenemos con este tipo de cambios y un par de preguntas más que creo que da tiempo bueno primero es una pregunta que es que yo han estado diciendo que tienes la presentación privada puede ser o puede ser algo cambió cuando puedas ir y la otra es que preguntan cómo funciona todo esto que has explicado con entornos de preproducción y producción y si se puede meter en un proceso de entrega continua podría hacerse podría hacerse pero o sea la forma correcta y esto creo que da para otra charla es que tú cuando cuando planteas esto que al final estás alterando el aspecto de sus componentes entonces o bien creas un entorno en este link para poder verificar que esos que esos cambios están correctos o bien podrías integrarlo con herramientas como chromatic es un es visual de componentes en el que compara los el componente que tenías antes de ese cambio con el nuevo vale pero compara de forma visual es como el snap se operó de forma visual y está súper chulo entonces una vez que aceptas que esos cambios se han realizado pues digamos que haría emerge harías ss curry pues pero creo que si se podría meter en algún juego de fe y ceder vale pues me ha tenido lo mismo que antes si te da para otra charla contaba es otra y pues no si tienes algo más que añadir si después puedes compartir todas estas webs reales en el chat o en twitter y les vamos les vamos dando difusión así es más fácil de acceder y pues creo que vale te voy a lanzar otra pregunta ya que es terminado antes y ya está publica la presentación gracias por aquí preguntan que en lo que se refiere a un test ha de ser como se podrían aislar los experimentos en una página determinada modificando un elemento sin que afecte al resto de instancias un elemento sí entiendo que es sería probar por ejemplo un color un cambio de tamaño pero en un componente en concreto no se vale por eso al final entiendo que usted sabe vas a tener como dos versiones de su aplicación vale pero esto es solo podrías hacer como igual que hemos planificado la web del evento tú podrías generarte de esos toques con él con esa variante y tener como dos despliegues que al final es lo que vas a tener aún así si necesitas ir más en concreto al al tope del componente pues sí que tendría que generar como sub token para ese componente pero no creo que un t sabe lo puedes hacer a modo de tecnificación si ver que al final como necesita estas urls por eso modifica no sería ningún problema vale pues creo que podemos darla por contestada y dad por mi parte poco más muchas gracias por la pgjem por estar aquí y perdón otra vez por haberte metido la otra tablas sin querer al final se me ha quedado más cortita las charlas esta música dándole a volver tan sobrado 10 minutos creo más o menos nos pregunta si pues nada en el repositorio tenéis todo antes de irme tenéis toda la guía para poder integrar la parte libre con sigma y también tenéis mogollón de recursos para trabajar con this existen y siento que está muy bien también me han ayudado mucho pues aquí está todo las webs reales medio que ya están circulando por el chat y nada lo ha dicho muchas gracias juan cardona pie adiós chau chau