You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
17 Hrs
46 Min
39 Seg

Creación de Componentes

13/26
Resources

How to identify and organize the components in a design project?

In the world of digital design, understanding how to identify and organize the components of a project is critical to creating effective and efficient interfaces. Through the correct classification of these elements, you can ensure that the design is consistent and easy to maintain. Here we will discuss key techniques and concepts for managing components using terms such as atoms, molecules and organisms.

How to identify key components in a design?

Identifying components in a design is a crucial step in building a solid structure. Here are tips on how to do it effectively:

  • Icons and buttons: These elements are usually the easiest to identify, as they are individual components that can be quickly classified as atoms, we only need to determine if they have variants such as with or without icons.
  • Repetitive patterns: Notice elements or patterns that repeat in your design. These are good candidates for becoming components.
  • Breaking down complex elements: Break down complex elements into smaller parts. For example, a profile card could be broken down into labels and buttons.

How to use atoms, molecules and organisms in design?

The atomic model, derived from Brad Frost's atomic methodology, helps organize the elements of a design by complexity:

  • Atoms: These are the simplest components, such as icons, buttons or labels. They must be unique and replicable to maintain consistency in the design.
  • Molecules: These are combinations of atoms that form more complex elements, such as a search field that includes an icon and a button.
  • Organisms: These are groups of molecules and atoms that work together to form an autonomous and functional part of a design, such as a navigation bar that includes several molecules.

Using this methodology ensures that your design is scalable and easy to update or modify.

How to create and manage components?

Once you have identified components, the next step is to create and manage them properly:

  • Component Creation: Select all the desired elements and use the "create component" option in your design software. This helps establish a master instance of a component that you can replicate and modify.
  • Name Components: Give them clear, descriptive names that define their primary function, such as "primary button" or "form label".
  • Replicate Components: Use copy or drag commands to create copies of your components. If you need to modify features such as text or icons, you can do so without affecting the master component.
  • Update Components: When you modify the master component, all of its duplicates will be updated automatically, ensuring consistency throughout the project.

This management strategy not only improves efficiency, but also provides a foundation for advanced use of features and properties, allowing your design to evolve with ease.

What are the best practices for component usage?

Adopting best practices in the use of components ensures that your design is flexible and easy to maintain. Here are some recommendations:

  • Flexibility and adaptability: Design components that can be used in multiple ways, ensuring that they are flexible enough to adapt to different contexts without the need to create multiple variants.
  • Consistency: Maintain a consistent style throughout the project. The use of master components helps maintain this consistency by synchronizing all their duplicates.
  • Proper documentation: Document your components and their use. This not only facilitates collaboration with other designers and developers, but also serves as a reference for future editions.

The organization and intelligent use of components is indispensable for any digital design project. By applying these practices, you will not only improve the quality and consistency of your designs, but also increase the efficiency of the design process itself. So go ahead, explore, experiment and optimize your designs with confidence!

Contributions 22

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

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









En la nueva versión de Figma puedes presionar shift + a para agregar auto-layout para mantener las proporciones del componente.

💡**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

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

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 mi caso, descubrí por mi cuenta que agruparlos de esta forma resula más comodo y organizado.

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.

Recomiendo realizar los cursos de Figma. Hay de varios niveles y son muy recomendables.

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.

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