Sistemas de diseño en Figma

Clase 12 de 20 • Curso de Figma Avanzado

Rafael Alvarez Cardona

student•

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!

Guzman Geraldine

student•

buen apunte

Felipe Agudelo Vélez

student•

También se pueden usar extensiones como Fonts Ninja que lo hacen automáticamente y te dicen donde conseguir la fuente

Gabriela Urbano

student•

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 👍

Ivan Camilo Martinez Mendieta

student•

Y también habría que hacer la distinción con la guía de estilo.

Diego Vanegas

student•

Excelente aporte! 🤟🏻

Dario Espinosa

student•

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

Laura Mujica

student•

Wow excelente aporte! :D Muchas gracias!!!

Diego Vanegas

student•

Muy buena herramienta Dario.

Laura Naranjo Sánchez

student•

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.

Diego Reyes Cabrera

student•

¡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

Dario Espinosa

student•

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

Kamilo Stevan Alomías Correa

student•

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.

Juan Carlos Wilches Niño

student•

Pienso que los botones no son moléculas, porque los botones no se pueden reducir a menos de su forma básica

Leiver Choconta Gomez

student•

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.

Micaela Girado

student•

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

Alejandro Daniel Calderón Prin

student•

Extensión WhatFont para tomar las tipografías .

Mónica Contreras Pazo

student•

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

María Valentina Reyes Leon

student•

Me encanto mucho

Valentina Monsalve Ortiz

student•

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:

Luis Aguirre

student•

Sí funciona, esto es magia.

Pedro Isaac Aguilar

student•

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.

Paolo Carrion

student•

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.

Aideé Granados

student•

Aquí dejo mi aporte. Sencillo pero me siento feliz de ir entendiendo todo este proceso.

Jimmy Caicedo

student•

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

María Luisa Barboza Restrepo

student•

¿Es necesario tener un buscador con el espacio de texto en una landing page? Gracias

Luis Aguirre

student•

María Luisa Barboza Restrepo

student•

¿Es necesario tener un buscador con la barra para agregar texto en todos los landing page? Gracias

Jimena Haran

student•

Bien, va quedando

Jimena Haran

student•

Me gustó lo de nombrar como se llama cada tipografía porque poniendole "header" y nombres así me confundía mucho

Laura Altamiranda

student•

un botón es un átomo, no una molécula.

Sistemas de diseño en Figma

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

Construcción de pantallas

¿Qué son los Interactive Components?

Interactive Components avanzados

Plugins

Mejores Plugins

Plugins: multi-lenguaje y diseño dinámico

Despedida

Despedida

Autoevaluación del Curso de Figma Avanzado