Figma Tutorial - ¿Qué es Atomic Design?

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 103

  • @gracielalopezcardena6930
    @gracielalopezcardena6930 Рік тому +15

    ¿Por qué ya no tienes los links a los enlaces que mencionas en tus videos?

  • @nicolascuevas7881
    @nicolascuevas7881 7 місяців тому

    vi en un comentario tuyo que dice que tenes un video más actual porque este ya tiene 2 años pero... igual yo miraba más tus videos actuales pero al querer mirar desde tu primer video y no los últimos como ahora ( que hice desde que te comencé a seguir hace unos pocos meses) igual aprendí muchísimo mirando tus videos de hace 4 años atrás al igual que lo más nuevo tuyo porque son pura base los primeros y los ultimos lo que hay en el mercado y la verdad mejore mucho más este mes como UX/UI Designer. La verdad mil gracias!!!

  • @PamelaAulita
    @PamelaAulita 3 роки тому +3

    Hola Christopher te sigo desde Buenos Aires Argentina, gracias por compartir tus conocimientos, soy diseñadora gráfica, e hice algunos cursos de web pero quedé un poco atrás y con esto me ayudas a interiorizar me en nuevos programas. Tenes una nueva seguidora en tus redes! Nuevamente gracias! Y muy buenos videos!

    • @uxcristopher
      @uxcristopher  3 роки тому +1

      Hola Pamela y bienvenida ☺️
      Muchísimas gracias por tu apoyo, espero poder ayudarte mucho con mí contenido. Un abrazo hasta Argentina. 😁

    • @PamelaAulita
      @PamelaAulita 3 роки тому

      @@uxcristopher gracias voy a seguir viendo todo tú contenido. Y ayudándote recomendandote!

  • @vanessachicchonvasquez9961
    @vanessachicchonvasquez9961 3 роки тому +9

    Un espectáculo Cris! Tenía en vista la teoría... pero ahora al verlo aplicado lo entendí de 10! Ya aplicándolo en mis proyectos. Graacias!!!

  • @GrisPlace
    @GrisPlace 3 роки тому +1

    Estos videos merecen likes, y este canal merece la suscripción y la campanita! gracias por compartir con la comunidad!

    • @uxcristopher
      @uxcristopher  3 роки тому

      Muchísimas gracias por el apoyo 🤩

  • @davidzavala6858
    @davidzavala6858 4 роки тому +2

    Buenísimo el video. Gracias por tanto.

  • @yiyohiro
    @yiyohiro 2 роки тому

    ¡Esta clase es oro!
    La explicación es buena y con el ejemplo lo entendí mejor. ¡Gracias!

  • @PoliMartin
    @PoliMartin 4 роки тому +1

    Gracias Cristopher por tu tranquilidad y claridad para explicar.

    • @uxcristopher
      @uxcristopher  4 роки тому

      Al contrario, gracias por ver los vídeos 🙌🏼
      También comparto mucho contenido de UX en mi instagram, el Link está en la descripción 😉

  • @federicopaganini4464
    @federicopaganini4464 3 роки тому

    Genio de genios! Me quedó todo mas que claro. Gracias!

  • @ticmanuelbenr
    @ticmanuelbenr 3 роки тому +2

    Me encanta la frase final
    Es preferible sudar en tiempos de paz que sangrar en tiempos de guerra
    Gran video

  • @julireynoso5043
    @julireynoso5043 4 роки тому +3

    gracias!! estoy aprendiendo un montón! vi muchos videos de tu canal ya que me encanta como explicas con tanta paciencia y detalle :)

  • @dra.mariadelrosariofernand5262
    @dra.mariadelrosariofernand5262 3 роки тому

    Excelente!!!!super claro!Muchas gracias!

  • @manuelcardenas89
    @manuelcardenas89 3 роки тому +1

    Brutal!!! Me encanto. Gracias por este video. Saludos desde Colombia. :)

    • @uxcristopher
      @uxcristopher  3 роки тому

      Saludos 🇨🇴
      Gracias por ver mi contenido 🤩

  • @valerypalacios7136
    @valerypalacios7136 4 місяці тому +1

    me encantó, entendí todo

  • @neyzavargas6402
    @neyzavargas6402 3 роки тому +1

    Hola, muchas gracias por compartir tus conocimientos.

  • @brandovidal2729
    @brandovidal2729 4 роки тому +3

    Gracias infinitas por tan excelente contenido y compartir tus conocimientos :)

  • @normansilva1097
    @normansilva1097 2 роки тому

    El video PERFECTO para aprender Atomic Design!! gracias Cris!

  • @pilarmoto
    @pilarmoto 3 роки тому +3

    Wow! Gracias por compartir este video, acabo de descubrirte y me encantó la forma tan profesional y sencilla en que explicas todo, eres excelente maestro! Este video me ha ayudado mucho porque ya habia leido y visto otros videos acerca del atomic design y no lo entendía, y aquí lo haces con ejemplos fáciles de seguir! Gracias por iluminarme!!!! Saludos desde Guadalajara, México!

    • @uxcristopher
      @uxcristopher  3 роки тому

      Un abrazo hasta Guadalajara, muchísimas gracias por tú comentario lo aprecio mucho y lo guardaré con cariño ☺️

  • @FraxGuttemberg
    @FraxGuttemberg 3 роки тому +1

    Gracias , sigo Aprendiendo este 2021.

  • @JuliGomex
    @JuliGomex 2 роки тому

    Maravilloso este tutorial miles de gracias!

  • @matiasgabrielgordillo
    @matiasgabrielgordillo 4 роки тому +10

    Excelente Cristopher! No me canso de agradecerte toda esta información y lo valioso de tu detalla explicación. Creo que la frase "Es mejor sudar en tiempos de paz que sangrar en tiempos de guerra" resume muy bien todo ese proceso, porque también creo en lo valioso del orden en el trabajo, lo importante de tomarse el tiempo y organizar y renombrar a medida que vamos avanzando con el proyecto. Atomic Design es eso!

    • @uxcristopher
      @uxcristopher  4 роки тому +1

      Muchísimas gracias, me pone muy feliz que lo valoren y el hecho que te quedes con la frase que comente en verdad lo aprecio muchísimo.
      Al contrario Gracias por estar ahí y dándome fuerzas para seguir generando contenido.
      Saludos 😁

  • @milu_moon
    @milu_moon 3 роки тому +1

    Me encantó el video!!

  • @joseidarraga1588
    @joseidarraga1588 4 роки тому +4

    Gracias Cristopher, you are giving away so much value, es muy esta cultura en el internet. Keep it going!

  • @marcialambriz190
    @marcialambriz190 3 роки тому

    Que hermosa metodologia!!!

  • @placidop
    @placidop 3 роки тому +1

    Genial Cristopher, muy bien explicado!

  • @albertobustamante6954
    @albertobustamante6954 4 роки тому +4

    Muy interesante tu clase gracias Cristopher, como siempre muy claro en tus conceptos . Saludos

  • @Korekomusica
    @Korekomusica 3 роки тому +1

    Muy buen trabajo! Gracias!

  • @gabrielcarrizo1310
    @gabrielcarrizo1310 2 роки тому

    Excelente material. Tu explicación es muy precisa y clara hasta para mi que soy un frontend engineer. Muchas gracias por tu aporte!

  • @angelcortesignacio7789
    @angelcortesignacio7789 3 роки тому

    Muchas gracias por el tuto, no solo teórica, sino práctica :D Me sirvió mucho :D :D :D

  • @gisellyromero9391
    @gisellyromero9391 3 роки тому

    Excelente Aporte, muy bien explicado gracias

  • @joseantoniomorgadoberruezo6918
    @joseantoniomorgadoberruezo6918 3 місяці тому

    Podrías poner el link del Figma de ejemplo. El video y la explicación es espectacular !!

  • @yesseniaerraez4302
    @yesseniaerraez4302 4 роки тому +1

    Gran aportee !! gracias :)

  • @nicolasmarrone8568
    @nicolasmarrone8568 4 роки тому +1

    Buenísima clase, super útil Chris sobre todo para algunos desorganizados como yo jajaja. Muchas gracias.

  • @marianakirby7721
    @marianakirby7721 3 роки тому

    Me encantan tus cursos, muy didáctico, muhas gracias!

  • @patriciaserra8460
    @patriciaserra8460 4 роки тому +1

    Gracias Cristopher!!! :) Super video :)

  • @nativoluis
    @nativoluis 3 роки тому +2

    Los colores y los estilos de texto de un sistema se pueden considerar átomos o son un tipo de propiedad diferente y externa al atomic?

  • @inma_fc
    @inma_fc 2 роки тому +1

    gracias!! no me canso de ver y aprender con todos tus videos!!buenisimo el metodo de atomic design para tener todo bien organizado. me creo la duda si una vez creado los assets como componentes habria que exportarlos para tenerlos guardados antes de iniciar con el diseño del template? gracias! dentro de nada iniciare con tus cursos de pago para seguir aprendiendo! :)

    • @uxcristopher
      @uxcristopher  2 роки тому

      Muchísimas gracias por tu apoyo 🥳 lo aprecio mucho.
      No hay necesidad de exportarlos, puedes utilizarlos cómo una librería de componentes y trabajar de esta manera con ellos. 😉

  • @samuelalvarez3946
    @samuelalvarez3946 4 роки тому +2

    Gracias bro me salvaste :,)

  • @christiangomez6653
    @christiangomez6653 3 роки тому +2

    Gracias

  • @anllyclarizacorreacueva7378
    @anllyclarizacorreacueva7378 4 роки тому +1

    Gracias!! 🙋🏾‍♀️

  • @manuelfernando4778
    @manuelfernando4778 4 роки тому +2

    Excelente la forma que propones para organizar los componentes, pero aun mejor es la facilidad con la que puedes reemplazarlo en caso de que pidan un cambio.

    • @uxcristopher
      @uxcristopher  4 роки тому

      Muchísimas gracias 🙌🏼, la verdad que aporta mucha velocidad en la construcción de las vistas y es mejor comenzar organizando tus componentes desde un principio;)

    • @marcoantoniovalencia8694
      @marcoantoniovalencia8694 3 роки тому

      @@uxcristopher ¿cómo puedo agregar a mi perfil el link de Notion que dejaste? o siempre debo acceder desde tu enlace?

  • @valerypalacios7136
    @valerypalacios7136 4 місяці тому

    Como se hace la caja contenedora? Los únicos componentes maestros son los atomos?

  • @josechirino5168
    @josechirino5168 3 роки тому

    Excelente video, muy bien explicado. Siempre es importante aprender metodologias en cualquier area de trabajo

  • @lserranoit
    @lserranoit 3 роки тому +3

    Saludos Cristopher, hubiese sido excelente si mostrabas el prototipo corriendo, donde pudiésemos ver al botón funcionando.

  • @YoshRodriguez
    @YoshRodriguez 4 роки тому +2

    Excelente vídeo, se me ocurre que con vista a un futuro proyecto se podrían almacenar todos los objetos en carpetas de acuerdo a la estructura que se implementara por ejemplo dentro del body: header, nav, aside, section, footer o seria muy mala idea?

    • @uxcristopher
      @uxcristopher  4 роки тому +2

      Claro es una opción que se podría probar, aún que casos como ese nos ayuda mucho Atomic design.
      Pero no hay nada mejor que probar e intentar, al final es mejor utilizar lo que te funcione😉

    • @fernandamiranda4402
      @fernandamiranda4402 4 роки тому

      Saludos tengo una pregunta actualmente no me aparece el plugin 😅😭

  • @josefinapiaggio6211
    @josefinapiaggio6211 4 роки тому +1

    Sos un genio, mil gracias! me despejaste dudas que me costo un monton encontrar, como lo de los botones que no sabia como hacerlo. Consulta, las palabras Headline 6 y body 2 de las cards, serian atomos el texto de cada una o nada?

    • @uxcristopher
      @uxcristopher  4 роки тому +2

      Muchísimas gracias 😃
      Serían átomos pero no es necesario el crearlos como componentes, al ser textos es mejor agregarlos a tu librería de tipografías y listo;)

    • @josefinapiaggio6211
      @josefinapiaggio6211 4 роки тому

      @@uxcristopher gracias!

  • @edisonsanchez5041
    @edisonsanchez5041 4 роки тому +1

    Hola, gracias por compartir tus conocimientos. Me podrías recomendar algún video o articulo para entender las unidades de medidas en UI, se me hace un poco confuso las unidades 1X, dp, pt, PT, etc.

    • @uxcristopher
      @uxcristopher  4 роки тому +2

      Te recomiendo el libro: diseñando apps para móviles de javier cuello, ahi te explica muy bien eso;)
      Saludos 🖖

  • @emilianozam762
    @emilianozam762 2 роки тому

    Gracias Cristopher, eres un verdadero crack. Te hago una consulta: ¿Dónde puedo ver todos los términos utilizados para android? Gracias!!!

  • @omarherrera.digmaster
    @omarherrera.digmaster 3 роки тому

    Tú programas?

  • @paolacastillootoya8904
    @paolacastillootoya8904 2 роки тому

    le darías autolayout a todos los elementos desde átomo hasta template? o desde qué momento?

  • @sirbirre
    @sirbirre 2 роки тому

    Hola, gracias por el video. ¿Qué hago entonces con las variantes? ¿Cómo trabajas las instancias en los átomos, como naming o como variantes? Me confundo, gracias por todo.

  • @nichankaderyan5424
    @nichankaderyan5424 2 роки тому

    Ya hoy en día no se presenta ese problema de las sombras con el auto layout, estoy haciendo el curso y precisamente voy por esa parte y al hacer auto layout todo quedó bien, al parecer figma corrigió ese pequeño fallo.

  • @ivonnetovar109
    @ivonnetovar109 4 роки тому +2

    Hola!!! Sera que Figma no tiene el mismo atributo de XD en donde se puede hace un grupo grid con un solo componente y este atributo lo que hace es replicar este componente las veces que uno quiera al expandir ese grupo grid para cualquier lado? sin necesidad de hacer copy paste de los componentes.???

    • @uxcristopher
      @uxcristopher  4 роки тому +1

      Desconozco esa funcionalidad de XD pero investigaré al respecto 😉

  • @benjaminko7812
    @benjaminko7812 4 роки тому

    Hi, what software did you use in the presentation of your tutorial? Many thanks! And great tutorial you make!

  • @lavendernova1072
    @lavendernova1072 3 роки тому

    Pregunto: si yo tengo varios iconos de ejemplo en un wireframe y quiero cambiarlos por los iconos reales como sustituyo los iconos desde mi componente?

  • @robot_game385
    @robot_game385 2 роки тому

    Me encantan tus videos gracias por enseñar, disculpa puedes poner el link del proyecto de nuevo es que no me deja modificarlo

  • @a8aCOLPLAYa8a
    @a8aCOLPLAYa8a 2 роки тому

    Hola cristopher excelenes videos. una preguntita, este naming que se crea automaticamente en el listado al buscar nuestros elementos... también funciona en XD? XD tambien permite esto? gracias saludos.

  • @diegohalcon
    @diegohalcon 3 роки тому +1

    Saludos, Cristopher.
    ¿Crees que puedas volver a subir el archivo? Entro a hacer la práctica y todo está resuelto.
    Gracias.

    • @uxcristopher
      @uxcristopher  3 роки тому +1

      Hola😃. En la descripción del video ya se encuentran los links funcionando;)

  • @elgato6078
    @elgato6078 3 роки тому

    Una pregunta, como puedo meter las imagenes? ;c como es componente no me deja meter una imagen

  • @Greenblueandred
    @Greenblueandred Рік тому +2

    Hola!! no consigo el link :S

  • @JoséHuallpa-y2p
    @JoséHuallpa-y2p 3 місяці тому

    esto es lo que llaman tokens?

  • @antonellazambon2551
    @antonellazambon2551 2 роки тому

    Tengo una duda que me ha surgido en el trabajo mismo. Cuando genero un organismo, en este caso una card que tiene un ícono y un texto, el cual debe utilizarse con diferentes íconos, me sucede que no puedo meter a esa card otros íconos. Es pertinente aclarar que lo he convertido a componente previamente y he realizado copias posteriores para cambiar los íconos, además todos se realizaron con autolayout. Me encantaría saber que hago mal, muchas gracias de antemano.

  • @maxi8833
    @maxi8833 4 роки тому

    Christopher cuanto cobraste x el trabajo de las tablas de surf? ( es actual?)Como para tener uma idea.

  • @GeraJara
    @GeraJara 4 роки тому +1

    Cristopher, te consulto. Como se hace para habilitar la edicion de los archivos Figma que nos dejas en el video? Los puedo abrir pero no editar.
    Saludos!

    • @uxcristopher
      @uxcristopher  4 роки тому

      Saludos, bastaría con duplicarlos y listo;)

  • @jotamena
    @jotamena 3 роки тому +1

    Si la card es una molecule por tener un atom dentro ¿por qué el botón es un atom si tiene un atom/icon dentro?

    • @uxcristopher
      @uxcristopher  3 роки тому +1

      Por ser un elemento en la interfaz muy común, en ocasiones es más sencillo manejarlo cómo atom;)

    • @jotamena
      @jotamena 3 роки тому

      @@uxcristopher gracias!

  • @rodrigocaldentey8745
    @rodrigocaldentey8745 3 роки тому

    Hola, tengo una consulta: como copio y pego los archivos en un documento nuevo? estos no me deja. Ademas los exporte, y luego los subi a un documento nuevo pero se suben todos como png...y no tienen nombre..?? gracias!

    • @uxcristopher
      @uxcristopher  3 роки тому

      En teoría podrías copiar frames y componentes sin problemas en otro archivo de figma. Yo lo hago habitualmente.

  • @wandarosario
    @wandarosario 4 роки тому +1

    No pude realizar esta práctica.. será porque no tengo la version de pago de figma?

    • @uxcristopher
      @uxcristopher  4 роки тому

      Sí deberías poder crear tu librería local, lo único que no podrías es compartirla en otro proyecto;)

  • @nativoluis
    @nativoluis 3 роки тому

    Los botones son átomos o moléculas?

    • @uxcristopher
      @uxcristopher  3 роки тому +1

      Se pueden representar cómo átomos sin problemas;)

  • @emmaf4708
    @emmaf4708 Рік тому

    Muy útil el curso pero en cada video dices que pones la documentación en la descripción y no está, por lo que es difícil seguir la lección.

    • @uxcristopher
      @uxcristopher  Рік тому

      Hola este video ya tiene 2 años, muchas cosas ya cambiaron en Figma. Te invito a ver los videos actualizados de mi canal. 😄

  • @agustingonzalez5643
    @agustingonzalez5643 3 роки тому

    Una lastima que en el archivo ya estén todos resueltos :/

  • @guapisimopro4780
    @guapisimopro4780 4 роки тому +1

    Lo malo de figma es que no puedes insertar texto o contraseñas D:

    • @uxcristopher
      @uxcristopher  4 роки тому

      Si te refieres a el prototipo, no actualmente, pero se pude comunicar esos escenarios sin problemas 😉