Headless, ¿El futuro de los design systems? Cómo hacerlo en Figma

Поделиться
HTML-код
  • Опубликовано: 11 дек 2024

Комментарии • 23

  • @janfranco6671
    @janfranco6671 8 месяцев назад +1

    Que ilusión me ha hecho ver las insignias que diseñamos. El nuevo concepto "headless" tendré que probarlo y verme el video varias veces para entenderlo e interiorizarlo. Un abrazote, como siempre.

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад +1

      A tope Jan, esas insignias han estado siempre ahí, en las Refresh dando nivel ;)

  • @tanyacequi6556
    @tanyacequi6556 8 месяцев назад +1

    Buenísimo Raúl, muchas gracias por mostrar el paso a paso. Me parece que si, por temas de peso de archivos, será conveniente que vayamos migrando a esas librerías de componentes independientes :(
    Yo al final hice algo parecido pero usando una sola librería de componentes que ya estaba creada. Hice colecciones por marca con sus propios light and dark mode, y colecciones de grupos de marcas (como nos habías mostrado en algunos otros videos) para manejar más de 3 marcas. Además uso el plugin Themer para swipear estilos de texto y gradientes, que como mencionas quizá no es la mejor opción pues no se ha actualizado pero funciona. Esperemos Figma YA nos de las variables de tipografía y gradientes que nos faltan, y la posibilidad de swipear variables en librerías. Gracias nuevamente por compartir tus aprendizajes!

    • @tanyacequi6556
      @tanyacequi6556 8 месяцев назад

      Y con éste método, si quisieras documentar/ocupar los componentes ya brandeados de cierta manera, optarías por publicar librerías por marca ya con los componentes dentro? O sería mas bien siempre empezar con los componentes headless y siempre tener que aplicar las librerías que necesites? 🤔

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад +1

      Gracias a ti Tanya! Se agradecen siempre un montón tus mensajitos por aquí. A ver si esta semana aparecen ya las nuevas variables y podemos seguir experimentando hacia soluciones mejores y más productivas. 💪

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад +1

      Buena pregunta, yo creo que en estos casos la idea sería buscar una documentación externa que sirviera para poder verlo todo sin tener que aplicarlo primero...

  • @tonifornesramis
    @tonifornesramis 8 месяцев назад +1

    Pero bueno, estaba buscando headless para aplicarlo a un proyecto con CMS y me he encontrado con esta bomba. Gracias infinitas como siempre por compartir Raúl 😉

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад

      Genial Toni, a tope con ese retazoo!!!

  • @JulietaOjea
    @JulietaOjea 7 месяцев назад +1

    Espectacular, Raul. Muchísimas gracias por compartir tu sabiduría con nosotros.

  • @osvaldomatos9533
    @osvaldomatos9533 Месяц назад +1

    Grande Raúl, muy buena explicación. Una duda, las librerías de Foundations Primitivos y Base podrían ir unidas? O es necesario que estén separadas. En caso de Unirlas, los estilos y las Variables tendrían que ir juntas, cierto? mil gracias

    • @RaulMarin_Figma
      @RaulMarin_Figma  Месяц назад +1

      Hola, la verdad es que puede ir todo separado para evitar redundancias o coincidencias de tokens semánticos... Lo que resulte mas comodo para el equipo, la verdad. 👍

    • @osvaldomatos9533
      @osvaldomatos9533 Месяц назад

      @@RaulMarin_Figma jajajjaja, perdona Raúl, me he liado. Querrías decir que puede ir todo junto¿ Mil gracias

  • @alfonso_alvarez
    @alfonso_alvarez 5 месяцев назад +1

    Hola Raul, me intereso mucho este video, pero tengo una duda que diferencia hay entre hacer design system bajo el modelo atomic design y el headless?

    • @RaulMarin_Figma
      @RaulMarin_Figma  5 месяцев назад +1

      Hola! Gracias por comentar. En principio son cosas diferntes... Atomic Design es una metodología de diseño y Headless es una arquitectura de desarrollo (una manera de conectar librerías) . Todo así resumido...

    • @alfonso_alvarez
      @alfonso_alvarez 5 месяцев назад

      @@RaulMarin_Figma Gracias me queda ahora mas claro, voy a investigar más sobre el Headless, se ve super interesante el tema y el uso claramente, gracias Raul.

  • @gbadma
    @gbadma 8 месяцев назад +1

    Muchas gracias Raul! Soy bastante nueva en esto y todos tus videos me ayudan muchisimo. Todo esto que mostraste se puede utilizar en version gratuita?

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад +1

      Holaa, gracias por ver los vídeos me hace mucha ilusión. Estás opciones de variables y librerías se tienen que usar con la versión de pago o con la de Educación.

  • @leandrosalemme4599
    @leandrosalemme4599 8 месяцев назад +1

    Hola Raúl! muchas gracias! estamos viendo con nuestro equipo un gran problema que estamos teniendo a la hora de compartir los files .fig enlazados a librerías con variables. Al exportar el foundations con variables obviamente se deslinkea del file de componentes, luego al tratar de volver a linkear las librerías en el nuevo Team no se relinkean las variables. El plugin de Swap variables soluciona en parte, primero que es engorroso para el cliente tener que hacer swap seleccionando los componentes padres por cada página, y segundo que si un componente tiene instancias dentro se va a cometer override al hacer swipe, es un trabajo poco limpio, sabes de alguna solución mejor para tratar estos casos?

    • @fattymessiah
      @fattymessiah 8 месяцев назад +2

      Hola! No soy Raúl 😅, pero leyendo tu comentario me ha recordado que, en un caso similar, optamos por hacer un plugin que migre/sobreescriba las variables del documento y los elementos que hay en el archivo. El tiempo de ejecución depende mucho del tamaño del archivo así que tampoco lo recomendaría mucho.
      Creo que si es un cliente final el que recibirá los archivos, lo mejor es hacer un plugin que "normalice" el archivo y lo exporte de esa manera.
      De igual manera, este tipo de flujos está hecho para que se preserven los documentos en el server.
      Saludos!

    • @RaulMarin_Figma
      @RaulMarin_Figma  8 месяцев назад +1

      Jaja, gracias por responder! Como comenta el compañero exportar o duplicar files en Figma nunca es la mejor solución. ¿Habéis probado a cambiar la autoría del creador del file, y solo transferir el archivo...Todo lo demás es bastante lío y defectuoso.

  • @pedromrgluum2322
    @pedromrgluum2322 8 месяцев назад +1

    Me viene de perlas ahora que estoy haciendo un DS desde cero