Estilos de Componentes

Es muy útil seguir a la par el curso de Sistemas de diseño https://platzi.com/clases/1420-sistemas-diseno/15003-introduccion-y-presentacion/ para ir documentando lo que se está trabajando en el ejemplo del portal

Mi primer design system, aún queda bastante por practicar y mejorar pero que interesante poder haber empezado uno desde 0.

![](https://i.imgur.com/yqo0Ujq.png![]

uff! me tomó más de lo que esperaba estas pantallas pero todo con practica mejora!!
Podrán ver que en la ultima pantalla ya quería terminar 😛

parece un trabajo super tedioso, pero resulta sr divertido y muy practico a la hora de armar todo

Veo que menciona en múltiples ocasiones el curso de UI de Platzi, pero ese curso es solo de fundamentos y no abarca detalles como distancias entre elementos y cosas más minuciosas. Estaría bien un curso de UI pero que sea avanzado, no solo de fundamentos.

Un plugin interesante para crear temas desde Figma
https://www.figma.com/c/plugin/731176732337510831/Themer

Este curso me sirvio mas a entender figma que el propio curso de figma basico

Mi librería de estilos:

Tipografía

Paleta de colores

Es muy bueno para elegir paletas de colores https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Puedo recomendar este kit para tomar como ejemplo para proyectos más grandes:
https://www.figma.com/community/file/1035203688168086460

La razón de crear frames con estilos de componentes al lado de nuestras interfaces dentro del mismo archivo Figma es ligar las características visuales de esos componentes maestros para que al hacerles alguna modificación a los átomos, ese cambio se refleje automáticamente en todas las interfaces (frames) donde esté ese elemento (instancias).

Darle estilo al prototipo de alta fidelidad con los colores de los iconos

He notado que el profesor va agregando gradualmente el atomic desing, estilos, componentes, etc…pero en la práctica, considero que antes de empezar a diseñar lo que se desea, es mucho más práctico crear esa estructura y tomarse el tiempo para tomar ciertas decisiones de acuerdo a lo que se habla con el cliente, con el grupo de trabajo y teniendo en cuenta los estilos propios de diseñador. Sí, esto lleva un poco más de tiempo, pero el resultado al final es mucho más gratificante, facilita los procesos y da una claridad de lo que se quiere hacer. Y si bien es cierto que se pueden presentar cambios, tener algo definido desde un principio, siempre y cuando se puedan establecer estas cosas, es mejor método que hacerlo gradualmente.

por cierto! después de esta practica creo que ayudaría mucho hacer la filtración de átomos, moléculas y organismos por pantallas, no tener el X de frames, que en el mismo frame hacer un | separador | para tener todo más organizado por que puedes usar el mismo átomo varias veces pero con diferentes tamaños o texturas 💡

Object Oriented Styles :sw

Para la selección de colores conviene crear un moodboard

Este es mi avance del proyecto, hasta ahora solo he avanzado 2 pantallas pero traté de usar la metodología de Atomic design y algunos tips de los que nos platicó Misaello para crear componentes aunque me resulta complicado redimensionarlos.
Para alguien que inició trabajando pensando en pantallas y no en crear elementos es algo complicado dejar ese hábito.