Sistemas de diseño en Figma
Clase 12 de 19 • Curso de Figma Avanzado
Contenido del curso
Rafael Alvarez Cardona
student•
hace 5 años
Guzman Geraldine
student•
hace 5 años
Felipe Agudelo Vélez
student•
hace 5 años
Clase 12 de 19 • Curso de Figma Avanzado
Contenido del curso
Rafael Alvarez Cardona
Guzman Geraldine
Felipe Agudelo Vélez
Gabriela Urbano
Ivan Camilo Martinez Mendieta
Diego Vanegas
Dario Espinosa
Laura Mujica
Diego Vanegas
Laura Naranjo Sánchez
Diego Reyes Cabrera
Dario Espinosa
Kamilo Stevan Alomías Correa
Juan Carlos Wilches Niño
Leiver Choconta Gomez
Micaela Girado
Alejandro Daniel Calderón Prin
Mónica Contreras Pazo
María Valentina Reyes Leon
Valentina Monsalve Ortiz
Luis Aguirre
Pedro Isaac Aguilar
Paolo Carrion
Aideé Granados
Jimmy Caicedo
María Luisa Barboza Restrepo
Luis Aguirre
María Luisa Barboza Restrepo
Jimena Haran
Jimena Haran
Laura Altamiranda
Una buena practica para replicar los tamaños exactos de algún elemento en la web es usar el inspector, ahí ves el color, tamaño y espaciado!
buen apunte
También se pueden usar extensiones como Fonts Ninja que lo hacen automáticamente y te dicen donde conseguir la fuente
Para esta sección recomiendo ahondar sobre los UI Kits, que es en realidad lo que está armando el profesor. El sistema de diseño es una documentación, mientras que el UI Kit es el que realmente empleamos para construir nuestros productos 👍
Y también habría que hacer la distinción con la guía de estilo.
Excelente aporte! 🤟🏻
Otra buena practica es crear primero los tonos Dark , white y el color de body, después los colores primarios, secundarios, success, warning, etc y luego los neutrales, combianlo con un plugin como "Foundation: Color Generator" y terminaras en 5 min
Wow excelente aporte! :D Muchas gracias!!!
Muy buena herramienta Dario.
Holi! Recomendación: antes de empezar a realizar un proyecto, landing page, prototipo, etc; primero empieza por la definición de los estilos de color, tipografía, íconos; para que luego después de haber creado ya varias cosas no hagas doble tarea de volver a poner todo si no que empieces por definir lo básico para el diseño.
¡Hola! Estoy aprendiendo las bases del diseño para diseñar mis propias páginas, no soy diseñador sino programador. ¿Qué me recomendarías a mí? No sé con qué colores o estilos poder empezar antes de empezar a crear, pensaba hacerlo sobre la marcha
En lugar de colocar color por color de tu style guide, a lo que lo necesite, Existe un plugin llamado "Match fills to local styles" lo hará en un parpadeo
Hay una gran confusión con un Sistema de Diseño vs un UI Kit, el primero hace referencia a un archivo de documentación el cual facilita el entendimiento entre diseñadores, desarrolladores, personas de marketing, comunicación C-levels, etc. Este documento proporciona el manual de procesos para cada uno de los departamentos, desde el equipo de UX lo más relevante es el pilar de Componentes, que es ahí donde ponemos ver los componentes visuales el cual será utilizado también por el equipo de desarrollo. Un UI Kit es simplemente una parte del sistema de diseño.
Pienso que los botones no son moléculas, porque los botones no se pueden reducir a menos de su forma básica
Hola Juan, estoy de acuerdo con tu observación y debe tomarse en cuenta.
El valor mínimo que llega un átomo es asociado a nuestro capitulo de foundations, sin embargo estos no están considerados como tal, dentro del esquema atómico.
mmm para mi si que se pueden reducir.. si vamos al caso la información del boton, es decir el texto seria un átomo y el frame del boton seria otro. Bueno asi lo entendí yo jejej
Extensión WhatFont para tomar las tipografías .
Esto me ahorraráun montón de tiempo al hacer el trabajo. Bueno, también me evitará un dolor de cabeza jajajaja. Gracias por el aporte
Me encanto mucho
Pueden optimizar tiempo al copiar las propiedades de los componentes, por ejemplo sirve mucho en la tipografía.
seleccionan el texto que quieren copiar y dan clic derecho- copiar - copiar propiedades o el comando (ctrl -alt-c)
seleccionan el texto al que quieren pegar la apariencia u propiedades, dan clic derecho- copiar - pegar propiedades o el comando (ctrl - alt-v)
eso ayuda a optimizar tiempo c:
Sí funciona, esto es magia.
Es muy útil tener nuestro UI Kit y posteriormente un Design System completo a la hora de armar y gestionar una interfaz. Gracias, ya me quedó claro cómo hacerlo.
Estos sistemas de diseño de los que habla el profesor son también conocidos como Style-Guides. Les recomiendo investiguen más acerca de ellos.
Aquí dejo mi aporte. Sencillo pero me siento feliz de ir entendiendo todo este proceso.
https://www.headway.io/download/shipwright Para tener una guía complejamente sencilla de entender y trabajar los UI Kits
Para los Design Tokens es este https://www.youtube.com/watch?v=Ka1I5TphDb0&t=2047s&ab_channel=IntoDesignSystems
¿Es necesario tener un buscador con el espacio de texto en una landing page? Gracias
¿Es necesario tener un buscador con la barra para agregar texto en todos los landing page? Gracias
Bien, va quedando
Me gustó lo de nombrar como se llama cada tipografía porque poniendole "header" y nombres así me confundía mucho
un botón es un átomo, no una molécula.