{ida Workshop

Herramientas para elaborar un Sistema de Diseño

Ya conocemos qué es un Sistema de Diseño y cuál es su valor estratégico, tanto para quienes diseñamos y trabajamos en la implementación de proyectos, como para clientes y usuarios. Esto, ya que permite la creación de productos y servicios que son coherentes y que entregan experiencias significativas a quienes los utilizan.

Para crear un sistema de diseño debemos considerar el trabajo con al menos dos tipos de herramientas, una destinada al diseño y otra para documentar.

Herramientas para diseñar

Sketch

Gran parte de quienes prefieren trabajar en Sketch, lo hacen debido a su comunidad de desarrolladores de plugins que siempre está generando nuevos complementos; los que permiten diseñar de manera más rápida y eficiente.

Para facilitar el trabajo con plugins, Sketch cuenta con un Plugin Manager, el que permite buscar y administrar los complementos de forma fácil y rápida; ya sea para agregar texto simulado, corregir palabras en varias pantallas, crear grillas, administrar assets, etc.

Junto a la administración de plugins, en su documentación no solo podemos ver secciones de ayuda para entender cómo funciona Sketch, sino que también enlista una serie de librerías de recursos open source para facilitar el trabajo y no tener que comenzar todo desde cero.

Figma

Lanzado el 2015, esta herramienta trajo consigo la posibilidad de trabajar colaborativamente y de manera simultánea. De esta forma, los diseñadores pueden crear wireframes, interfaces y prototipos de una manera más ágil.

Otra de sus particularidades es que Figma trae integrada una librería de plantillas y recursos, para así hacer más expedita la etapa de diseño.

Adobe XD

Como Adobe no podía quedarse atrás, anunció en 2015 su nueva herramienta de diseño, Adobe XD, pensada para la creación de prototipos e interfaces de alta fidelidad. Su versión Beta dejaba bastante que desear, pero actualmente se encuentra entre los mejores softwares de edición vectorial para el diseño web.

Adobe XD es valorado por sus usuarios gracias a la posibilidad de generar auto animaciones dentro del mismo programa, sin la necesidad de instalar un plugin o exportar los archivos a terceros.

Framer X

Framer lleva en el mercado desde 2015 y su principal objetivo era simplificar el puente existente entre diseño y código. Con los años fue ganando funcionalidades, como la creación de prototipos interactivos, herramienta de colaboración entre equipos, etc.

Con Framer X es más fácil crear un prototipo completamente interactivo sin tener que tocar o conocer cómo escribir código.

Herramientas para documentar

GitBook

Es una plataforma para la publicación de libros, documentos, manuales y trabajos de investigación en Internet. Permite que tanto usuarios individuales como organizaciones puedan crear publicaciones digitales en línea, empleando el sistema de control de versiones Git.

Dentro de sus características más reconocibles está el desarrollo de los contenidos mediante el uso de la sintaxis en Markdown o AsciiDoc, exportar como un sitio web o en formatos pdf, epub o mobi y la posibilidad de añadir plugins.

VuePress

VuePress es un generador de sitios estáticos alimentado por Vue.js, un framework progresivo para construir interfaces de usuario, que genera páginas HTML a partir de archivos de Markdown. Esto permite centrarse en escribir la documentación en lugar de trabajar en perfeccionar el sitio web.

En VuePress, cada página tiene su propio HTML estático pre-renderizado, por lo que proporciona un gran rendimiento de carga y también es realmente compatible con SEO.

VuePress se caracteriza por contar con un editor de markdown optimizado para escribir documentación técnica, además de ofrecer la posibilidad de utilizar Vue dentro de archivos markdown. También cuenta con un sistema de temas basado en Vue, soporte para Progressive Web App y la integración con Google Analytics.

El tema por defecto de VuePress incluye un diseño adaptable, un sistema de búsqueda, una barra de navegación y sidebar personalizable. Además se pueden incluir enlaces de GitHub y links de edición generados automáticamente.

Confluence

Se trata de un conjunto de sistemas de gestión documental que soportan los procesos de negocio y la toma de decisiones. Están organizados de tal manera, que toda la información esté fácilmente accesible y organizada; con la finalidad de que sea más fácil su utilización.

La información siempre debe estar conectada y organizada. Esto significa que no podemos añadir nueva información donde queramos, debemos seguir y respetar un orden y estructura; siempre agregando el mismo tipo de información en el mismo sitio.

Confluence es un gestor de contenido empresarial que nos proporciona las herramientas para tener siempre todo en perfecto orden y saber dónde encontrar, en el momento adecuado, la información requerida.

Herramientas para diseñar y documentar

Frontify

La guía de estilo de Frontify ayuda a los usuarios a crear manuales de marca personalizados para representar su negocio, las que se pueden compartir con accionistas internos y externos.

Ofrece más de 30 bloques de contenido inteligente dentro de la guía de estilo, donde las empresas pueden cargar logotipos e imágenes, agregar archivos adjuntos, cargar videos, paletas de colores exportables y fuentes de Google Web Fonts, Typekit y mucho más.

Los usuarios de Frontify pueden elegir entre la selección de plantillas incorporadas de guías de estilo o comenzar desde cero con una guía en blanco, y todas las guías son completamente adaptables a tu marca con diseño personalizado, página de inicio de sesión y correos electrónicos de marca blanca y un dominio personalizado.

Zeroheight

Zeroheight es una plataforma que permite crear fácilmente guías de estilo o la documentación de un sistema de diseño. Con esta herramienta podemos crear guías de estilo en horas, documentar recursos, inspeccionar componentes, entre otros.

Esta plataforma además se puede sincronizar con las principales herramientas de diseño (Sketch, Figma y XD) facilitando el acceso y la sincronización a nuestras bibliotecas de componentes.

DSM InVision

DSM InVision es una plataforma pensada para el desarrollo de sistemas de diseño en equipos colaborativos, reuniendo a diseñadores, desarrolladores e interesados en un flujo de trabajo unificado.

Con DSM, puedes mantener a los equipos en la misma página con documentación personalizada. Dejando el acceso a los principios de diseño, componentes activos, estándares de accesibilidad y más en un lugar centralizado.

Con la integración DSM Sketch, se pueden cargar los archivos de Sketch Library para obtener documentación y mantener sincronizados a los compañeros de equipo.

Además ofrece las integraciones de Inspección y Storybook, las que permiten incrustar y vincular directamente al código listo para dar paso a producción.

Más de una oportunidad

Todas estas herramientas, nos entregan opciones para trabajar ordenadamente cada uno de nuestros proyectos. Poniendo atención en nuestras guías de estilo y sistemas de diseño. Recuerda que la elección de herramientas o plataformas debes hacerla de acuerdo a los requerimientos del proyecto, las necesidades de tu equipo de trabajo o de la organización.