CursosWorkshop IAEmpresasPreciosBlogNewsletter
  • Cursos
  • Workshop IA
  • Empresas
  • Precios
  • Blog
  • Newsletter
Suscríbete
  • Cursos
  • Empresas
  • Comunidades
  • Blog
  • Tarjeta regalo
  • Newsletter
  • Soporte
  • Tienda
  • ConfAiBot
  • Contacta
  • Aviso legal
  • Condiciones generales
  • Política de privacidad
  • Política de cookies

Curso de Desarrolla plugins de Figma con TypeScript

Standard
Carmen AnsioJavier Ferrer

Por Carmen Ansio y Javier Ferrer – Frontend

Ves un paso más allá y desarrolla plugins mantenibles, escalables y testables para figma con TypeScript. Diseño y desarrollo se dan la mano.

Ir al curso

💸 Primera lección disponible sin registro 💸

Con la llegada de Figma al mundo del diseño de interfaz el marco colaborativo entre diseño y desarrollo tiene infinitas posibilidades, una de ellas es poder extender la funcionalidad nativa de la aplicación con tus propias necesidades.Con este curso descubrirás las herramientas que Figma pone a nuestra disposición paradesarrollar plugins para su plataforma.

  • Con este curso aprenderás a:
    • 🚀 Implementar tu propio plugin de Figma
    • 👌 Aplicar buenas prácticas a la hora de utilizarTypeScript
    • 🧪 Añadir testing con casos de uso

Durante el curso vamos a ver:

  1. 👶 Descubre el potencial de los plugins de Figma
    • 🎨 Cómo trabajo con Figma para diseñar y programar webs
    • 🥰 Mis 5 plugins de Figma preferidos
    • 🪄 La forma más FÁCIL y RÁPIDA de desarrollar Plugins para FIGMA: ¡¡Empezamos a desarrollar!!
  2. ⚙️ Automatiza tu workflow: Acelera el scaffolding de tus proyectos
    • 🏗️ Crea elementos de Figma automáticamente con la API: Estructura de páginas
    • 👩‍🎨 Crea contenido de las páginas de Figma con la API: Diseño programático de la Cover
    • 🌍 Descubre la API de Figma y aprovecha todo su potencial
  3. 🎨 Añade UI a tu plugin: Formulario para preguntar qué páginas crear
    • 🤏 Añade funcionalidades a través de menús personalizados sin necesidad de UI
    • 🖌️ Formulario para introducir los nombres de las páginas a crear
    • 🧰 Lógica en TypeScript para guardar estado entre ejecuciones: Recuerda la última estructura de páginas
  4. 🚀 Puesta a punto y publicación del plugin en Figma Community
    • 💅 Diseño de Plugins de Figma
    • 🌈 Publicando tu plugin: Figma Community
  5. 🤟 Conclusiones y siguientes pasos
    • 🤏 Cosas que los plugins no pueden hacer en Figma
    • 🔮 Conclusión y siguientes pasos

Vídeos del curso

  • 🎨 Cómo trabajo con Figma para diseñar y programar webs
  • 🥰 Mis 5 plugins de Figma favoritos
  • 🪄 ¡¡Empezamos a desarrollar!!
  • 🛠 ¡A practicar! Piscolabis de plugins a descubrir

  • 🏗️ Crea elementos de Figma automáticamente con la API: Estructura de páginas
  • 👩‍🎨 Crea contenido de las páginas de Figma con la API Diseño programático de la Cover
  • 🌍 Descubre la API de Figma y aprovecha todo su potencial
  • 🛠 ¡A practicar! Clona el repo de Structurer e importalo en Figma

  • 🧪 La magia y fantasía de los tests: Código robusto y validado automáticamente
  • ⚠️ Tests para plugins complejos: Desacoplándonos del SDK de Figma
  • - 🛠 ¡A practicar! Ve al repo de Skeleton y configura tu propio plugin

  • 👤 Interaccionar con APIs HTTP externas: Obtener el avatar del usuario
  • 💥 Cuando nos flipamos desacoplando
  • 🛠 ¡A practicar! Haz los tests de tu plugin

  • 🧚 Validación automágica del manifest
  • 🤏 Añade funcionalidades a través de menús personalizados sin necesidad de UI
  • 🖌️ Añadir UI a tu plugin
  • 💫 Diseño de la UI integrada en Figma
  • 🛠 ¡A practicar! Añádele una interfaz a tu plugin

  • 💅 Assets necesarios para publicar tu plugin
  • 🌈 Publica tu plugin: Figma Community
  • 🛠 ¡A practicar! Utiliza nuestra template para la publicación de tu plugin

  • 🤏 Limitaciones de los plugins
  • 🛠 ¡A practicar! Publica tu plugin y linka la URL
  • 🔮 Conclusión y siguientes pasos
Ir al curso

Cursos relacionados

Standard
Tailwind CSS: Arquitectura y buenas prácticas

🚤 Tailwind CSS: Arquitectura y buenas prácticas

Paco CastellóRafa Gómez

Aprende a estructurar tus proyectos con Tailwind CSS siguiendo buenas prácticas.

Ver curso
Standard
Ofertas de empleo

📄 Ofertas de empleo

Javier FerrerRafa Gómez

Ofertas de empleo verificadas por Codely

Ver curso
Standard
Next.js: Open Graph Images

🖼️ Next.js: Open Graph Images

Javier FerrerRafa Gómez

Genera imágenes dinámicas en tus proyectos Next.js para compartir en redes sociales.

Ver curso
Ver catálogo completo

Paga según tus necesidades

lite (sólo mensual)

19 €
al mes
  • Cursos esenciales de programación para construir una base sólida
Popular

standard

24,92 €
Descuento vs mensual de 49 €
Pago anual de 299 €
al mes
  • Catálogo principal para dominar cómo escribir un código mantenible, escalable y testable
  • Recibir ofertas de empleo verificadas por Codely
  • Factura de empresa
  • Acumular descuentos al renovar

premium

41,58 €
Descuento vs mensual de 89 €
Pago anual de 499 €
al mes
  • Cursos exclusivos de IA para mantenerte siempre actualizado
  • Acceso anticipado a nuevos cursos
  • Descuento en workshops
  • Recibir ofertas de empleo verificadas por Codely
  • Factura de empresa
  • Acumular descuentos al renovar

No subiremos el precio mientras mantengas tu suscripción activa

SuscríbeteInicia sesión