CursosEmpresasBlogLiveConfPrecios

Uso de plugins en Figma

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

Clase anteriorSiguiente clase

Contenido del curso

Introducción
  • 1
    ¿Para qué sirve Figma y por qué elegirlo?

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

    04:39
  • 2
    Interfaz en Figma

    Interfaz en Figma

    09:34
  • Introducción

Básicos
  • 3
    Configuración de guías y retículas

    Configuración de guías y retículas

    05:17
  • 4
    Creación de textos y estilos

    Creación de textos y estilos

    15:18
  • 5
    Figuras e imágenes en Figma

    Figuras e imágenes en Figma

    13:22
  • 6
    Efectos en Figma

    Efectos en Figma

    07:02
  • 7
    Redes de Vectores

    Redes de Vectores

    15:20
  • 8
    Colores en Figma

    Colores en Figma

    09:50
  • Básicos

Combo
  • 9
    Importar y exportar

    Importar y exportar

    08:14
  • 10
    Cómo crear guías de estilo

    Cómo crear guías de estilo

    07:33
  • 11
    Auto-Layout

    Auto-Layout

    12:39
  • 12
    Los 15 mejores atajos para trabajar en Figma

    Los 15 mejores atajos para trabajar en Figma

    11:20
  • 13
    Creación de componentes reutilizables: clase teórica

    Creación de componentes reutilizables: clase teórica

    08:29
  • 14
    Creación de componentes reutilizables: clase práctica

    Creación de componentes reutilizables: clase práctica

    11:37
  • 15

    Playground: Practica la creación de componentes reutilizables

    00:00
  • Combo

Prototipado
  • 16
    Prototipado simple: interacción de scroll

    Prototipado simple: interacción de scroll

    07:44
  • 17
    Prototipado simple: conexión de diferentes frames

    Prototipado simple: conexión de diferentes frames

    10:44
  • 18
    Prototipado avanzado: smart animate y componentes Interactivos

    Prototipado avanzado: smart animate y componentes Interactivos

    07:19
  • Prototipado

Co-Creando
  • 19
    Cómo agregar comentarios a los diseños

    Cómo agregar comentarios a los diseños

    05:53
  • 20
    Historial de versiones en Figma

    Historial de versiones en Figma

    05:48
  • 21
    Librerías de estilos y componentes

    Librerías de estilos y componentes

    05:21
  • Co-Creando

Superpoderes
  • 22
    FigJam

    FigJam

    06:40
  • 23
    Uso de plugins en Figma

    Uso de plugins en Figma

    14:02
  • 24
    Community: proyectos open-source y perfiles

    Community: proyectos open-source y perfiles

    05:36
  • Superpoderes

Cierre
  • 25
    Proyecto final del curso de Figma

    Proyecto final del curso de Figma

    02:01
    Ana Rocio Martínez

    Ana Rocio Martínez

    student•
    hace 3 años

    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
    Screenshot 2023-01-25 213217.jpg
      Cindy Milena Fontalvo Jiménez

      Cindy Milena Fontalvo Jiménez

      student•
      hace 2 años

      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

    German Pinilla

    student•
    hace 3 años

    ++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

    Nico Levy

    student•
    hace 3 años

    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

    Hrach Kaderyan Midence

    student•
    hace 3 años

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

      Leiver Choconta Gomez

      Leiver Choconta Gomez

      student•
      hace 3 años

      Hola Hrach!

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

      Agustina Díaz

      Agustina Díaz

      student•
      hace 3 años

      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

    Pedro Isaac Aguilar

    student•
    hace 3 años

    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

    Sebas Calle

    student•
    hace 2 años

    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

      Wilmer Hilarion

      student•
      hace 2 años

      No, no está.

      Cindy Milena Fontalvo Jiménez

      Cindy Milena Fontalvo Jiménez

      student•
      hace 2 años

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

    Brenda Sutara

    Brenda Sutara

    student•
    hace 2 años

    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

    auflow.png

    Gracias Santiago!

    Jeisson Espinosa

    Jeisson Espinosa

    student•
    hace 3 años

    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

    JAIRO SALAZAR CASTAÑO

    student•
    hace 3 años

    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

    Hrach Kaderyan Midence

    student•
    hace 3 años

    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

      Mario Sanchez Jaramillo

      student•
      hace 3 años

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

      Johanna Bermúdez Ortiz

      Johanna Bermúdez Ortiz

      student•
      hace 3 años

      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

    PAULO CESAR GALARZA

    student•
    hace 3 años

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

    Enrique Isasi

    Enrique Isasi

    student•
    hace 2 años

    Como podría crear un plugin?

      Santiago Camargo

      Santiago Camargo

      teacher•
      hace un año

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

    Alejandra Espinosa

    Alejandra Espinosa

    student•
    hace 2 años

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

      Santiago Camargo

      Santiago Camargo

      teacher•
      hace un año

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

    María Luisa Barboza Restrepo

    María Luisa Barboza Restrepo

    student•
    hace 3 años

    Este fue mi ejercicio con Plugins

    13. CTG Plugins.png

    Luis Gonzalez

    Luis Gonzalez

    student•
    hace 2 años

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

    JAIRO SALAZAR CASTAÑO

    JAIRO SALAZAR CASTAÑO

    student•
    hace 3 años

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

    clase22.png

    Walkiria Arteaga

    Walkiria Arteaga

    student•
    hace 2 años

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

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

    Selec selec

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

    Formas

    1. 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.

    1. Mapsicle: mapas en línea.

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

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

    Miguel Rendón

    student•
    hace 3 años

    Hay algún plugin que genere teclados mobile?

      Joel Subiabre Aravena

      Joel Subiabre Aravena

      student•
      hace 2 años

      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

    Juliana Ordoñez

    student•
    hace 2 años

    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

      Alejandro García

      student•
      hace un año

      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

    Alejandro García

    student•
    hace un año

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

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads