Cómo diseño webs con Figma

Antes: Aquí tienes el PNG del diseño, apáñatelas.

Ahora: No queremos handoff. Queremos trabajar en equipo entre diseño y desarrollo gracias a #figma

Vídeo analizando el CASO REAL de cómo hemos colaborado con Soluble para el Design System y nueva imagen de marca de Codely, y recogido esas bases y llevarlas a nuevas features como el backoffice para empresas.

Además publicamos el repositorio de código abierto del plugin que hemos desarrollado para homogeneizar la estructura de los distintos proyectos de Figma y, por si fuera poco y con esto nos hemos pegado un CURRAZO, un template para desarrollar tus propios plugins. Ambos repositorios 100% OPEN SOURCE 🤟

Todo esto derivado de la publicación del nuevo curso para desarrollar tus propios plugins de Figma en TypeScript. Como siempre, llevándonos las buenas prácticas a otro ecosistema más 😊

🪆 Desarrolla plugins de Figma mantenibles con TypeScript: https://pro.codely.com/library/desarr...

🍍 Maqueta la web de Codely: https://pro.codely.com/library/maquet...

🎨 Design System de Codely en Storybook: https://design-system.codely.com/?pat...

🐙 Repositorio de código del plugin Structurer: https://github.com/CodelyTV/figma-plu...

🪆 Figma Plugin Skeleton: https://github.com/CodelyTV/figma-plu...

﹤🍍﹥ CodelyTV
├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_co...
├ 🐦 Twitter CodelyTV:   / codelytv  
├ 🎸 Twitter Carmen:   / carmenansio  
├ 🧔🏻 Twitter Javi:   / javiercane  
├ 📸 Instagram:   / codelytv  
├ ℹ️ LinkedIn:   / codelytv  
├ 🟦 Facebook:   / codelytv  
└ 📕 Catálogo cursos: https://bit.ly/cursos-codely

00:00 Introducción
00:28 Estructura básica de Figma
01:13 Ejemplo de Figma de Codely
05:13 Diseño del backoffice para empresas
05:39 Graveyard: Homogeneizando la estructura de nuestros proyectos
08:57 Desarrollo de plugins para Figma
09:41 Ejemplo de plugin Structurer
11:13 Plantilla de Codely para desarrollar plugins
12:48 Demo de Figma Plugins Skeleton
13:29 Automatizar el pintado del avatar de la usuaria
14:03 Conclusiones