Hola mundo, les escribe Alex. Soy diseñador UI en Punto Commerce y en este pequeño artículo les quiero compartir los que probablemente sean los mejores plugins de apoyo para usar con Figma. Antes de comenzar les diré que considero que Figma es una de las mejores herramientas de trabajo para diseñadores alrededor del mundo. Para ser honesto, yo comencé trabajando con InVision y Adobe XD, pero desde que empecé a usar Figma he mejorado la productividad de mi trabajo y eso me encanta.
Para aquellos que no conocen Figma, les daré algunos detalles de esta herramienta. Figma es una aplicación web para la edición de gráficos y diseño UI. Una gran ventaja de esta app es que te da la posibilidad de instalar distintos plugins que agilizan tu experiencia de trabajo. Con el apoyo de estas extensiones el flujo de trabajo es rápido y eficiente. Un punto a favor es que la mayoría de estas extensiones son GRATUITAS. Ahora entremos en detalle con los diez plugins indispensables que recomiendo si trabajas con Figma.
Unsplash
Para aquellos que no conocen el sitio de Unsplash, deben saber que es un gran apoyo para los diseñadores gráficos, pues se trata de una página web que contiene un amplio stock de increíbles fotos en alta resolución. Lo mejor es que ya puedes instalar el plugin de Unsplash para Figma. Este plugin te da la posibilidad de buscar fotos para tu diseño sin abandonar Figma.
Autoflow
Cuando creas un sistema de diseño es necesario trazar el recorrido del cliente en tu e-commerce. Con este plugin tu vida será más sencilla, ya que Autoflow te ayudará a mostrar el flujo del usuario en tu página. Así es como funciona: vas a los plugins de Figma, abres Autoflow, mantienes presionando Shift para seleccionar los objetos que quieras y el plugin los conectará en el flujo.
Remove.BG
Este plugin es útil cuando necesitas agregar una foto de producto en tu diseño sin el fondo de la imagen. Como lo dice el nombre, automáticamente elimina el fondo de la foto. Todo lo que necesitas es tener una cuenta en Remove.BG e instalar la extensión en Figma. Esta herramienta te ahorrará tiempo y ni siquiera tendrás que recurrir a Photoshop.
Figmotion
Este es otro increíble plugin para Figma, pues teniéndolo no necesitarás de otras aplicaciones para crear pequeñas animaciones. Figmotion te da la posibilidad de crear animaciones cortas dentro de Figma. Para lograr esto debes abrir el plugin en Figma, seleccionar los elementos y después el plugin exportará el video a tu diseño UI. Esta herramienta será muy útil para tu equipo de desarrolladores pues fue creada pensando en las tecnologías web.
Pitchdeck Presentation Studio
¿Alguna vez tuviste problemas presentando tu diseño UI al cliente o a tu equipo? Con este plugin podrás exportar tu diseño a PowerPoint/ Keynote/ Google Slides con formatos editables. Te da la posibilidad de exportarlo a formato PDF y además podrás controlar la presentación desde tu teléfono móvil o tableta escaneando un código QR. Adicionalmente el plugin cuenta con un corrector ortográfico para distintas lenguas, puedes insertar gifs y videos.
Lorem Ipsum
Este es un plugin muy práctico que te ayudará a generar texto de relleno dentro de tu capa en Figma. Es usual que como diseñador UI no cuentes con el copy final para agregar, por lo que necesitas utilizar un texto de simulación para llenar las capas de texto. Una vez que has instalado el plugin, selecciona las capas de texto en las cuales quieras generar “Lorem Ipsum”, da click en Generate y listo. Esta extensión puede crear frases y párrafos, adicionalmente puedes cambiar el número de frases y párrafos que quieras usar. Es una herramienta genial.
Spellchecker
Spellchecker es un plugin súper útil cuando quieres revisar errores en un texto. Por ahora solo se encuentra disponible para los idiomas inglés, ruso y ucraniano. Este complemento revisará tus errores ortográficos y gramaticales en el texto que selecciones y además te ofrecerá correcciones. Para que sea más preciso, lo recomendable es trabajar con pequeñas partes de texto.
Dark Mode Magic
Como puedes intuir a partir de su nombre, esta herramienta creará tu diseño en modo oscuro. El plugin genera automáticamente colores para una presentación en modo oscuro desde una paleta de colores claros y los aplica a los elementos de tu trabajo. Para usarlo simplemente debes seleccionar el marco, aplicar el plugin, ¡y listo! tendrás una versión oscura de tu presentación.
Iconify
Aunque prefiero hacer el diseño de mis iconos en Adobe Illustrator, Iconify es un plugin práctico si estás apresurado o si trabajas en un proyecto en el que no necesitas iconos personalizados. Se trata de una enorme biblioteca desde la cual puedes importar elementos de: Material Design Icons, Font Awesome, Jam Icons, EmojiOne o Twitter Emoji. Esta biblioteca ofrece más de 1,000,000 de opciones que puedes agregar a tu proyecto en formato SVG. Lo mejor de todo es que se trata de una herramienta fácil de usar. Iconify es otro plugin que será muy útil para tu equipo de desarrolladores.
Wireframe
Este es un plugin muy conveniente cuando quieres crear wireframes, flujos de usuario, prototipos y estructuras básicas. Simplemente arrastra y coloca los archivos dentro de Figma. Cuenta con más de 350 gráficos y tarjetas personalizadas listas para usar, además cubre la mayoría de los elementos, interacciones y casos de uso web y móvil.
Como puedes ver existen innumerables plugins y cada día surgen nuevas opciones. Si te interesa puedes buscar otras extensiones en la sección plugins de la comunidad Figma. De la lista que acabo de compartir ¿cuál es tu herramienta favorita?, ¿cuáles otros plugins que no he mencionado te ayudan en tu trabajo de diseño UI?