Figma Tutorial - ¿Qué es Atomic Design?

🤓 Conoce mis cursos:
www.uxcristoph...
Hola 👋🏼 mi nombre es Cristopher y aquí te ayudaré a mejorar tus habilidades en UX/UI Design, Figma, prototipado, animación y mucho más. ¡Suscríbete y comienza tu carrera profesional hoy mismo!
📱 Instagram:
www.instagram....
📱 TikTok:
www.tiktok.com...
📱 Facebook:
/ uxcristopher
#ux #ui #figma #autolayout #webdesign #code #nocode #webflow #freelance #uxcristopher

[@gracielalopezcardena6930]

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

[@nicolascuevas7881]

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!!!

[@vanessachicchonvasquez9961]

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!!!

[@uxcristopher]

Me alegra montones 🤩

[@PamelaAulita]

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]

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

[@PamelaAulita]

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

[@GrisPlace]

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

[@uxcristopher]

Muchísimas gracias por el apoyo 🤩

[@PoliMartin]

Gracias Cristopher por tu tranquilidad y claridad para explicar.

[@uxcristopher]

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 😉

[@matiasgordillo5141]

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]

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 😁

[@pilarmoto]

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]

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

[@julireynoso5043]

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

[@uxcristopher]

Muchísimas gracias 😊

[@yiyohiro]

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

[@valerypalacios7136]

me encantó, entendí todo

[@uxcristopher]

🫶🏼🫶🏼

[@davidzavala6858]

Buenísimo el video. Gracias por tanto.

[@normansilva1097]

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

[@albertobustamante6954]

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

[@manuelcardenas89]

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

[@uxcristopher]

Saludos 🇨🇴 Gracias por ver mi contenido 🤩

[@lserranoit]

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

[@brandovidal2729]

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

[@joseidarraga1588]

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

[@nicolasmarrone8568]

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

[@placidop]

Genial Cristopher, muy bien explicado!

[@FraxGuttemberg]

Gracias , sigo Aprendiendo este 2021.

[@gabrielcarrizo1310]

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

[@neyzavargas6402]

Hola, muchas gracias por compartir tus conocimientos.

[@uxcristopher]

Gracias 🙏🏽

[@angelcortesignacio7789]

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

[@federicopaganini4464]

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

[@patriciaserra8460]

Gracias Cristopher!!! :) Super video :)

[@uxcristopher]

Muchísimas gracias 😊

[@christiangomez6653]

Gracias

[@milu_moon]

Me encantó el video!!

[@Korekomusica]

Muy buen trabajo! Gracias!

[@uxcristopher]

Muchísimas gracias 😊

[@dra.mariadelrosariofernand5262]

Excelente!!!!super claro!Muchas gracias!

[@marianakirby7721]

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

[@inma_fc]

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]

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. 😉

[@ticmanuelbenr]

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

[@JuliGomex]

Maravilloso este tutorial miles de gracias!

[@anllyclarizacorreacueva7378]

Gracias!! 🙋🏾‍♀️

[@uxcristopher]

Un gusto el compartir 🙌🏽

[@marcialambriz190]

Que hermosa metodologia!!!

[@emilianozam762]

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

[@gisellyromero9391]

Excelente Aporte, muy bien explicado gracias

[@josechirino5168]

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

[@samuelalvarez3946]

Gracias bro me salvaste :,)

[@yesseniaerraez4302]

Gran aportee !! gracias :)

[@YoshRodriguez]

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]

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]

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

[@valerypalacios7136]

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

[@nativoluis]

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?

[@Greenblueandred]

Hola!! no consigo el link :S

[@sirbirre]

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.

[@manuelfernando4778]

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]

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]

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

[@nichankaderyan5424]

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.

[@josefinapiaggio6211]

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]

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]

@@uxcristopher gracias!

[@edisonsanchez5041]

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]

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

[@diegohalcon]

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

[@uxcristopher]

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

[@benjaminko7812]

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

[@omarherrera.digmaster]

Tú programas?

[@ivonnetovar109]

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]

Desconozco esa funcionalidad de XD pero investigaré al respecto 😉

[@paolacastillootoya8904]

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

[@antonellazambon2551]

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.

[@a8aCOLPLAYa8a]

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.

[@maxi8833]

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

[@lavendernova1072]

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?

[@elgato6078]

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

[@robot_game385]

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

[@jotamena]

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]

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

[@jotamena]

@@uxcristopher gracias!

[@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]

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

[@GeraJara]

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]

Saludos, bastaría con duplicarlos y listo;)

[@agustingonzalez5643]

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

[@wandarosario]

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

[@uxcristopher]

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

[@rodrigocaldentey8745]

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]

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

[@nativoluis]

Los botones son átomos o moléculas?

[@uxcristopher]

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

[@guapisimopro4780]

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

[@uxcristopher]

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