Construcción de pantallas
Clase 13 de 19 • Curso de Figma Avanzado
Contenido del curso
Tania Hernández Martínez
student•
hace 4 años
Sebastian Garzon
student•
hace 4 años
Jimmy Caicedo
student•
hace 4 años
Clase 13 de 19 • Curso de Figma Avanzado
Contenido del curso
Tania Hernández Martínez
Sebastian Garzon
Jimmy Caicedo
Alejandro Díaz
Noelieth Mariana Lanza Longart
Leiver Choconta Gomez
Alexis Acosta
Valdrie Hernán Ducón Cardona
Yeraldine Ladino Figueroa
Laura Mujica
Camilo Sacanamboy
Leiver Choconta Gomez
Víctor Hugo Zulaica Maldonado
Giuseppe Ramirez
Daniel Torres Burriel
Violeta María Pugliese
Alexis Acosta
Yusting Andrés Mora González
Daniel Torres Burriel
María Luisa Barboza Restrepo
Carlos Martínez
Carlos Martínez
Dani Landa
Jimena Haran
Jeisson Espinosa
Camilo Jiménez
Iván Mejía
Ibañez Laura
Pedro Isaac Aguilar
Cielo Díaz Díaz
Nidia Liz Alvarez
Gabriela De la Torre
Anayet Aranda
Un consejo que a muchos nos funciona y nos regimos en el campo de trabajo usando figma: Acostumbrarse a nombrar los estilos cargados de tipografias y colores de forma correcta y jerarquica. Que cuando uno va construyendo un Design System este evoluciona (como dice el marco teorico), por ende crece y crece y es clave poder identificar con nomenclaturas rápidas, nombres relacionados, cortos, etc., de ahi surge un vocabulario conocido como "Headline", "H1, H2...", "primary color", etc, lo ideal es irnos acostumbrando y cuando se trabaja con mas personas sobre un design system, todos se manejen con los mismos nombres. Al momento de trabajar y localizar todo ayudara relacionar e identificar de forma profesional que una linea de texto, es un "Heading 2" con "Primary o Secondary Color" :)
Añadiendo algo a tu comentario es necesario incluir a Tech con las nomenclaturas, para hacer el trabajo más rápido y más eficiente en cuanto a Design Sytems, llegar a un acuerdo sobre como llamar los componentes, algunos les dicen "Inputs" otros "Text Fields"
Todal
Una muy buena práctica a la hora de diseñar es nombrar los elementos de forma correcta, les recomiendo leerse la documentación de goodpractices
Un ejemplo de nombrado es que sea corto pero significativo como en este ejemplo
He incluso para los tamaños hay estandares cómo estos:
Muy buena lectura
Hola Iván, excelente artículo. Hay que tener muy en cuenta el renombrado porque podemos confundir el nombrado de componentes para su creación (propiedad en variants) y el nombrado para documentación (ejemplo en imagen).
Un saludo!
Comparto mis avances de la parte superior de la landing de Platzi 😃
Comparto mis avances para la sección de Landing Page/ Registro free de Figma.
Mi landing :3
Uh wow, felicitaciones por el esfuerzo. Te quedó muy bien!
Mi progreso 😄
Hola Camilo, excelente progreso! Ten muy en cuenta siempre que elementos como logos corporativos, deben tener propiedades de uso para fondos claros y oscuros, aqui veo que tienes el logo de Platzi para fondos claros y por eso no luce bien en fondos oscuros.
Un saludo!
¿Por qué todo lo hicimos sin retícula? En el curso anterior de Figma nos sugirieron siempre utilizar retícula
Hola, sí la retícula es un componente importantísimo a la hora de crear nuestro proyecto, sin embargo, al ser un curso avanzado esperamos que sea un uso común luego de haber visto el básico. :)
Tienes razón Víctor, lo más recomendable es utilizar siempre la retícula para asegurarnos de diseñar los elementos y las pantallas de la forma más correcta posible. En este caso puede ser que no las utilice ya que está creando este diseño como ejemplo para la clase. Sin embargo, te recomiendo que las utilices en los diseños que crees a nivel profesional o para practicar con Figma, ya que es una buena práctica.
Todo está super claro!!
Creo que hay un problema de edición y se repiten algunas partes del video, por el minuto 9
Si un componente ya tiene asignado el autolayout y lo quiero hacer más grande... ¿Qué recomiendas utilizar la selección tipo Scale o la tipo Move?
Usa la tecla "K" mientras sostienes una de las esquinas y podrás redimensionar cualquier cosa sin miedo a que se pierdan las proporciones originales.
Hola, Alexis. El tipo de selección o de restricciones de crecimiento siempre va a depender de los elementos que contenga el componente. No será lo mismo si contiene textos que queremos que se adapten que sí, si contiene los elementos que queremos en tamaño fijo cómo iconos, o tampoco si es mixto.
Mi recomendación es que hagas pruebas con instancias de tu componente, comprobando que tus elementos no se rompen o crecen de forma inadecuada. Creo que puede resultarte interesante este artículo sobre redimensión con Auto Layout de Figma.
No dudes en consultarnos si te surgen más dudas sobre este tema o sobre otros temas tratados en el curso.
Les comparto mi avance de la clase, es de mi emprendimiento de joyas
Hola Profe quiero compartrte mi progreso y preguntarte como se si mi proceso hasta el momento va bien
¡Hola Carlitos! compartenos tu progreso aquí en los comentarios para que todos podamos ver tu progreso y darte nuestro feedback :D
¡Saludos! Nunca dejes de aprender 💚 ni de practicar 👾
Buenas, que bonita clase!, les comparto mi progreso (no es de platzi, es una página que inventé)
Información resumida de esta clase #EstudiantesDePlatzi
Los componentes nos van a facilitar mucho el trabajo al momento de crear las pantallas
Tenemos que tener organizado los átomos, moléculas y los organismos de nuestro sistema de diseño
Para escritorio podemos trabajar con un frame de Mackbook
El AutoLayout hace que todo se ajuste a la perfección
Los estilos también nos agilizan mucho el trabajo
Importante que los componentes ya tenga listas las propiedades que yo desee editar rápidamente
Es importante practicar
Hola comparto el avance
*Profesional
Buen truco el del degradado. Tomo nota!!!
No sabía cómo degradar fotografías, pero ya me lo suponía que se hacía así, degradando el color de fondo de una forma sobrepuesta a la imagen. Con esta clase me quedó esto más claro, así como los grandes beneficios de tener un Design System, para ya sólo ir arrastrando los elementos en la construcción de interfaces.
Tengo una duda, cómo hago para que el degradado me aparezca en un solo lado? no entendí muy bien ese proceso ...
Mi avance...
Hola! comparto lo que llevo de mi proyecto :)
