Construcción de pantallas

Clase 13 de 19 • Curso de Figma Avanzado

Contenido del curso

Introducción y community

AutoLayout y Variants

Design Systems

Prototipado

Plugins

Despedida

Tomar examen

Comentarios

Tania Hernández Martínez

student•

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" :)

Sebastian Garzon

student•

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"

Jimmy Caicedo

student•

Todal

Alejandro Díaz

student•

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:

Noelieth Mariana Lanza Longart

student•

Muy buena lectura

Leiver Choconta Gomez

student•

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!

Alexis Acosta

student•

Comparto mis avances de la parte superior de la landing de Platzi 😃

Valdrie Hernán Ducón Cardona

student•

Comparto mis avances para la sección de Landing Page/ Registro free de Figma.

Yeraldine Ladino Figueroa

student•

Mi landing :3

Laura Mujica

student•

Uh wow, felicitaciones por el esfuerzo. Te quedó muy bien!

Camilo Sacanamboy

student•

Mi progreso 😄

Leiver Choconta Gomez

student•

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!

Víctor Hugo Zulaica Maldonado

student•

¿Por qué todo lo hicimos sin retícula? En el curso anterior de Figma nos sugirieron siempre utilizar retícula

Giuseppe Ramirez

student•

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. :)

Daniel Torres Burriel

student•

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.

Violeta María Pugliese

student•

Todo está super claro!!

Creo que hay un problema de edición y se repiten algunas partes del video, por el minuto 9

Alexis Acosta

student•

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?

Yusting Andrés Mora González

student•

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.

Daniel Torres Burriel

student•

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.

María Luisa Barboza Restrepo

student•

Les comparto mi avance de la clase, es de mi emprendimiento de joyas

Carlos Martínez

student•

Carlos Martínez

student•

Hola Profe quiero compartrte mi progreso y preguntarte como se si mi proceso hasta el momento va bien

Dani Landa

student•

¡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 👾

Jimena Haran

student•

Buenas, que bonita clase!, les comparto mi progreso (no es de platzi, es una página que inventé)

Jeisson Espinosa

student•

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

Camilo Jiménez

student•

Hola comparto el avance

Iván Mejía

student•

*Profesional

Ibañez Laura

student•

Buen truco el del degradado. Tomo nota!!!

Pedro Isaac Aguilar

student•

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.

Cielo Díaz Díaz

student•

Tengo una duda, cómo hago para que el degradado me aparezca en un solo lado? no entendí muy bien ese proceso ...

Nidia Liz Alvarez

student•

Mi avance...

Gabriela De la Torre

student•

Hola! comparto lo que llevo de mi proyecto :)

Anayet Aranda

student•

Construcción de pantallas

Introducción y community

Hemos actualizado el curso de Figma Avanzado

Introducción y bienvenida

Figma community: conoce, comparte y remixea

Platzi Card Community

Proyecto Landing Page Multi-idioma

AutoLayout y Variants

¿Qué es y por qué es importante el AutoLayout?

AutoLayout: dirección, paddings, resizing y constraints

AutoLayout dentro de AutoLayout

Variants de 0 a 100

Variants: complejos

Design Systems

Introducción a los sistemas de diseño

Sistemas de diseño en Figma

Prototipado