No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

√öltima oportunidad para asegurar tu aprendizaje por 1 a√Īo a precio especial

Antes: $249

Currency
$189/a√Īo

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

0D
18H
0M
7S

Estilos de Componentes

15/26
Recursos

Aportes 23

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.

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

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

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

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-14%20194313-b204fc5f-d2f7-4c04-86eb-6ec32e596d34.jpg)

Mi librería de estilos:

Tipografía

Paleta de colores

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.