Creación de Componentes

Me tomó bastantes días hacer este ejercicio pero valió la pena totalmente. Ahora si a seguir practicando con más confianza. Gracias Misaello

crear el ui kit a partir de átomos, moléculas y organismos es una gran practica que no he visto en ninguna parte

💡**Recordatorio**
Átomos: Por si mismos no hace nada. Son la constitución mas básica de una interfaz.

• Input (Text Field)
• Etiquetas
• Botones
• Text

Moléculas: Es la unión de dos o más átomos. Aún no tiene un uso por que no está dentro de un contexto donde podamos entender qué hace exactamente.

• Avatar + Text
• Input + botón + text
• Icon + Text

Organismos: Al juntar varias moléculas conformamos una forma más compleja que se convierte en una pieza coherente y con más sentido.

• Header
• Carrousel
• Card
• Table

Templetes: Combinando varios organismos en una sola pantalla conseguimos obtener un contexto mucho mayor.

• Low Fidelity wireframe o esqueleto del sitio web o aplicación

Página: Contiene color, imágenes y detalles que hacen que ese archivo ya esté listo para el desarrollo o en su defecto, test con usuarios o el equipo.

• Hight Fidelity wireframe o diseño final

yo le hice a mi novia su pagina de su consultorio dental

Truco rápido. Para subir o bajar la opacidad solo necesitan jugar con las teclas numerales de su teclado. Si presionan 1 se cambiará al 10%, si presionan 2 se cambiará al 20% y así sucesivamente. Si tienen varios frames deben seleccionar el deseado.

• En esta pagina https://material.io/ pueden encontrar muchos recursos y material para sus diseños:

• Y en estos links pueden encontrar stock de icons gratis! https://fonts.google.com/icons
  https://icons8.com/

falla demasiado la pagina, se traba, da error, desespera, y no, no es ni mi pc, ni mi internet

Entonces después de los wireframe creamos los componentes, o primero creamos los componentes y después terminamos de diseñar el wireframe?

Yo no conocia los componentes, hasta que vi que me pasaba mucho tiempo diseñando las cosas. Ahora me ayudan mucho desde el sistema de diseño

Excelente consejo de colocar componentes dentro de componentes. Increíble clase Misaello, ando aprendiendo bastante 😄

Los componentes se crean señalando todo los elementos damos clic en la parte superior donde dice crear componentes. Es importante tomar en cuenta que cada cambio que se haga en el componente maestro se va a reflejar en su instancia; pero no los cambios que se hagan en los componentes instancias.

Tengan en cuenta que si editan la instancia, y luego cambian el componente maestro, la intancia previamente modificada no cambiará, se quedará así. Es mejor saber esto antes de cometer errores a futuro.

En mi caso, descubrí por mi cuenta que agruparlos de esta forma resula más comodo y organizado.

Tambien se pueden usar en Figma ahora muchos plugins. por ejemplo pueden usar Iconify. Cuando tengo un cliente que quiere iconos muy personalizados lo vo haciendo en Illustrator, pero este plugin te ayuda bastante para los iconos tradicionales
https://www.figma.com/community/plugin/735098390272716381/Iconify

El uso de componentes e instancias facilita mucho el trabajo de UI, porque te ahorra tiempo y te facilita el trabajar de manera colaborativa. Las instancias dependen de su componente maestro, así que cualquier modificación a éste, afectará también a sus instancias, aunque en ciertas ocasiones también es posible deslindarlas de la influencia del componente.

Pensando a largo plazo tomamos medidas que nos van a ahorrar tiempo y ser mas eficientes en el futuro

Que magia la de los componentes

genial, trate de hacerlo para una app y quedo genial