Uso de plugins en Figma

Clase 23 de 25 • Curso Básico de Figma - 2022

Clase anteriorSiguiente clase

Ana Rocio Martínez

student•

Comparto un plugins que me sirvió mucho para un proyecto

Content Reel: Genera información automática sobre usuarios, como números de teléfonos, direcciones, nombres, emails, etc. Permite crear diseños como el siguiente de forma mucho más rápida

Cindy Milena Fontalvo Jiménez

student•

Hola Ana! como estas? se ve genial. Gracias por compartir. pero una pregunta como funciona? no me aparece Run por ningún lado.

German Pinilla

student•

++Uso de plugins en Figma++

Los plugins son basicamente, pequeños segmentos de codigo que cualquier persona puede desarrollar y publicar para la comunidad de Figma, y que nos permiten extender las habilidades de diseño y prototipado para obtener resultados mas profesionales y/o diseñar de forma mas eficiente.

++Tipos de plugins++

Eficiencia
Organizacion
Manipulacion de vectores
Animacion
& muchas mas ...

++5 plugins recondados++:

++Autoflow++: Es un plugin que permite conectar mis frames con flechas para mostrarle a otras personas donde empieza mi flujo y donde termina.
++Magial graphics++: Es un plugin que permite crear diferentes figuras y diseñar casi que ilustraciones desde cero.
++Feather Icons++: Es una libreria de Iconos y es un repositorio de iconos minimalistas
++Mapsicle++: Es un generador de mapas en linea en la cual podemos tomar un mapa de un lugar en especial y agregarlo a nuestro diseño
++Stark++: Es una plugin que nos ayuda a la accesibilidad y las reglas de diseño para crear parametros de accesibilidad.

Nico Levy

student•

Algo que me sirvió mucho fue guardar mis plugins favoritos para tener acceso más rapido a los mismos Les dejo algunos que use y me resultan utiles

Fontpreview (para pre visualizar fonts)
Iconify (libreria de iconos)
Morph: para efectos mas complejos predeterminados sobre objetos

Hrach Kaderyan Midence

student•

Habrá algún otro plugin parecido a stark para ver si se puede usar desde Venezuela?

Leiver Choconta Gomez

student•

Hola Hrach!

Puedes usar el plugin A11y - Color Contrast Checker, es uno de lo más alternativos a Stark.

Agustina Díaz

student•

Holaa! También podés usar una página que funciona igual y no necesitas cuenta, se llama WhoCanUse es súper completa

Pedro Isaac Aguilar

student•

Una de las grandes ventajas que Figma ofrece es su potente comunidad de usuarios y sus Plugins, es decir, funcionalidades adicionales que ayudan en el trabajo del diseñador haciéndole la vida más fácil, automatizando procesos, diseños o actividades, como por ejemplo: crear iconos rápidos, colocar avatares o imágenes para las pantallas, crear mapas, crear flechas de flujo en las interacciones, etc. Además de los miles y miles de Plugins que ya existen y que puedes mandar llamar para facilitar tu trabajo de diseño, puedes proponer la creación de nuevos que veas que faltan o que ayudarían de mejor manera al diseñador.

Sebas Calle

student•

Creo que ya no esta el plugin de Mapsicle, o es solo a mi? no he encontrado algun otro que se vea tan bueno como ese, si alguno sabe de otro plugin parecido y lo puede compartir sería genial y Gracias de antemano :D

Wilmer Hilarion

student•

No, no está.

Cindy Milena Fontalvo Jiménez

student•

Correcto. a mi tampoco me salió? Qué otros nos sirve?

Brenda Sutara

student•

Me encantó el plugin autoflow, justamente empecé a estudiar figma porque como desarrolladora frontend, me costaba mostrar prototipos simples para que todo el equipo entendiera. Están fascinados con figma, estamos teniendo una comunicación mucho más clara

Gracias Santiago!

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

Los plugins son bloques de código que aumentan el alcance en figma, son como extensiones
Autoflow me ayuda a mostrar como están conectados mis frames por medio de una línea
Feather Icons es un repositorio de iconos
Con el plugin mapsicle puedo traer vistas de mapas de los lugares que necesite
Stark nos ayuda a evaluar los parámetros de accesibilidad que tiene nuestra interfaz
Magical Graphics me permite crear figuras geometricas
El plugin de los iconos es una grandiosa ayuda
Podemos crear un scroll hacia cualquier dirección
Existen plugins por los cuales podemos pagar

JAIRO SALAZAR CASTAÑO

student•

Lecturas recomendadas

Autoflow | Figma Community

https://www.figma.com/community/plugin/733902567457592893

Magical Graphics | Figma Community

https://www.figma.com/community/plugin/1134718403981449347

Feather Icons | Figma Community

https://www.figma.com/community/plugin/744047966581015514

Mapsicle | Figma Community

https://www.figma.com/community/plugin/736458162635847353/Mapsicle

Stark | Figma Community

https://www.figma.com/community/plugin/732603254453395948/Stark

Newest Plugins | Figma Community

https://www.figma.com/community/plugins/new

Feather – Simply beautiful open source icons

https://feathericons.com/

Hrach Kaderyan Midence

student•

Al parecer para usar el plugin stark necesitas crearte una cuenta, pero al darle click al enlace que me lleva a crear la cuenta me sale una pantalla con un aviso de bloqueo, seguramente esta bloqueado su uso para Venezuela.

Mario Sanchez Jaramillo

student•

Porqué no pruebas con una VPN? o están prohibidas?

Johanna Bermúdez Ortiz

student•

A mi me aparecía que era una red insegura. Pero haces clic en el enlace gris y te deja continuar de todos modos.

PAULO CESAR GALARZA

student•

Se llama el señor Stark jaja este plugin esta increíble me servirá muchísimo, gracias.

Enrique Isasi

student•

Como podría crear un plugin?

Santiago Camargo

teacher•

https://help.figma.com/hc/en-us/articles/360042786733-Create-a-plugin-for-development

Alejandra Espinosa

student•

Hay algun plugin parecido a mapsicle? es que el plugin de mapsicle ya no esta.😥

Santiago Camargo

teacher•

Ahora existe uno mejor! Se llama Figmap: https://www.figma.com/community/plugin/937760472566581732/figmap-map-maker

María Luisa Barboza Restrepo

student•

Este fue mi ejercicio con Plugins

Luis Gonzalez

student•

En 2024 no encontré el plugin Mapsicle. En ese caso usé FigMap, el cuál tiene casi las mismas funciones

JAIRO SALAZAR CASTAÑO

student•

Los 5 Plugin favoritos Auatoflow, Magical Graphics, Feather Icons, Stark, Mapsicle.

Walkiria Arteaga

student•

Para ser más eficiente, organizado, manipular vectores, animaciones, 3D and more.

Autoflow: visualmente conectar diferentes frames con flechas que se van a mantener actualizados mientras se mueven los frames.

Selec selec

Magical Graphics: para artistas, crea diferentes figuras geométricas e ilustra desde cero de una manera muy coherente.

Formas

Feather Icons: libreria de iconos, creada por un diseñador de Github.

Los iconos cuando son seleccionados aparecen dentro del frame pero realmente no lo estan, hay que llevarlos afuera del frame y luego volverlos a incorporar.

Son editables.

Mapsicle: mapas en línea.

Hay que ponerle a los mapas ambos scrolls (derecho e izquierdo) y se incorpora todo.

Stark: cura los constrastes para ser más accesible junto con otros parametros de la misma que evalua.

Miguel Rendón

student•

Hay algún plugin que genere teclados mobile?

Joel Subiabre Aravena

student•

puedes buscar en la sección de comunidad el "Android & iOS Keyboards Kit" y copiarlo a tu cuenta para usarlo en los proyectos que necesites!

Juliana Ordoñez

student•

Lo único que me resulta incómodo de esta clase es que nos prometieron una suscripción gratuita de Figma al comprar Platzi. Incluso envié un correo con la referencia del profesor que lo mencionó en el primer curso, pero prácticamente me dijeron que era falso. Además, ahora resulta que todos los complementos que muestra son de pago.

Alejandro García

student•

Juliana, no todos los plugins son de pago. Para solicitar tu suscripción libre tienes que llenar el formulario en este enlace. https://www.figma.com/education/apply

Alejandro García

student•

Color Contrast es otra opción para asegurar accesibilidad. https://www.figma.com/community/plugin/937465522075454889

Uso de plugins en Figma

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma