Hello Abstract!

Adios al Casi-final, Final, Final-final

Migue
hellosketch

--

Seguro que desde que estabas en la escuela (o si aún estás), o si trabajas de manera freelance e incluso si eres director de producto en un estudio/agencia estarás familiarizado con estas frases:

Aquí esta mi archivo (o carpeta) final final listo

Si!, así era el sistema control de versiones (VCS) del pasado.

¿Realmente son nuevos los sistemas de control de versiones (VCS por sus siglas en inglés) en diseño?: No, porque en el proceso de diseño de un producto se ha llevado a cabo la práctica de crear copias de un archivo (o copias de la carpeta de un proyecto completo) siempre que se quiere exportar una alternativa de diseño o simplemente al compartir el proyecto con otros diseñadores, o al menos eso se ha realizado hasta hace muy poco como sistema de control de versiones, pero todo esto está cambiando (o lo hará muy pronto).

Anuncio del nuevo formato en Sketch

Recientemente Bohemian Coding cambio el formato de Sketch y aunque no le dio mucha relevancia en su publicación realmente ha sido una actualización muy importante, ya que con ésta, el juego cambia y el flujo de diseño mejora (y por mucho), porque ahora es posible tener un sistema de control de versiones que se ajusta a nuestro flujo de diseño, donde tienes hacer iteraciones o designar tareas entre diseñadores para agilizar el proceso y así tener más tiempo en la parte creativa y pasar menos tiempo haciendo las copias necesarias de tus archivos/proyectos.

Probablemente te estarás preguntando (si eres un diseñador Jr en el diseño de productos digitales) ¿Y qué es un VCS?, la respuesta corta es:

Un sistema de control de versiones (VCS) registra los cambios realizados en un archivo (o archivos), generando un historial de cambios que permite regresar a estos cambios/estados cuando se necesite.

Sistema de guardado automático en Mac

¿Para qué se usar un VCS?: Para colaborar, éstos están pensados principalmente para que equipos (Design Team) trabajen sobre un mismo archivo y así mezclar automáticamente los cambios, aunque también los puedes usar de manera individual (Designer), los VCS se han usado los Developers (Devs) por mucho tiempo para colaborar con otros Devs y estoy seguro que ningún deja pasar una línea de código fuera del VCS (o amenos eso espero) sino me crees, ve y pregúntale a cualquier Dev.

Bienvenido Abstract :)

https://www.goabstract.com/

Una imagen vale más que mil palabras

En verdad no podría tener un nombre más a doc esta app que te resuelve muchas acciones de desarrollador desde una interfaz agradable y muy fácil de usar.

¿Qué es o qué hace Abstract?

Interfaz inicial de Abstract con tus proyectos.

Resuelve muchos de los problemas que se tenían al colaborar con otros diseñadores como: compartir archivos, realizar cambios sobre un sólo archivo y mezclar archivos sin tener que saber términos (comandos para los devs) como: repositorio, add, commit, pull, o push, y eso es lo que hace Abstract, te muestra con una interfaz linda el estado de tus proyectos personales y de equipo sin pasar por los comandos de git, pero preservando todas estas acciones.

Es importante mencionar que desde que integras Abstract a tu stack de herramientas de diseño te debes olvidar del Finder y desde ahora, siempre debes abrir/editar tus archivos desde la aplicación.

1 - Organización de archivos en Abstract

El sistema de archivos de Abstract es heredado directamente de Git

En Abstract los archivos se organizan por Proyectos > Master > Ramas > archivos > artboards, este sistema lo heredo directamente de Git. Donde cada proyecto cuenta con una rama master dónde estarán los archivos actualizados y de donde se partirá para crear ramas (o sub-ramas) y hacer modificaciones de los archivos o específicamente de algún artboard.

2 - Crear un proyecto (Repositorio para los Devs)

Cuando creas un proyecto nuevo en Abstract, automáticamente se sube a la nueve (al repositorio remoto) que te proporciona con un límite de 10GB en tu plan inicial.

3 - Crear/Agregar archivos (Add)

Cuando creas un proyecto tienes la posibilidad de agregar archivos ya existentes o crear directamente nuevos archivos, incluso cuando un proyecto ya esta avanzado y se requieren nuevos archivos se pueden agregar muy fácilmente.

4 - Crear una rama y editar (New branch)

Siempre que editas un archivo desde el Master se crea una nueva rama para poder registrar estos nuevos cambios sin afectar el diseño “final” (Versión estable para los devs).

5 - Agregar la primera versión (Commit)

Puedes trabajar, guardar y cerrar un archivo siempre y cuando lo hagas desde la rama en la que te encuentras trabajando dentro de Abstract, para que registre todos los cambios y puedas agregarlos (hacer tu commit).

6 - Crear una rama nueva + editar y guardar + agregar esta versión (New branch + Add + Commit)

Cuando trabajas como Designer las ramas te funcionan para explorar nuevos features (lo que antes se hacia creando copias del archivo) y cuando trabajas en Design Team las ramas pueden ser usadas por otros miembros y trabajar sobre el mismo archivo sin tener que pasarse el archivo por dropbox o drive.

7 - Mezclar la primer rama al master (Merge + Push)

(aqui viene lo bueno)

Después de hacer todos los cambios dentro de una rama puedes mezclarla con la rama master y así actualizar el estado del archivo (este es tu archivo final-final) para que otros miembros puedan obtener estos cambios.

8 - Descargar cambios (Pull)

Siempre que quieres mandar tus cambios a la rama master, primero te solicitará que descargues los cambios (si es que los hay) de la rama master para poder agregarlos a la versión más reciente.

9 - Mezclar la segunda rama a la rama master (Merge + Push)

Después de tener la versión actual del master, podrás compartir tus cambios (mezclar tu rama) con el master y así todos puedan tener el final-final-listo.

10 - Revisar la mezcla de ramas (Conflict git merge)

Al igual que en Git, Abstract te muestra si existen conflictos a la hora de mezclar tus ramas, de lo contrario podrás acceder a los archivos y encontraras todos los cambios agregados (sólo que los artboards pueden aparecer uno encima de otro, tranquilos por algo es que esta en BETA).

11 - Volvemos a empezar el ciclo (Iteración de diseño)

Nuevamente cuando tenemos la versión más actual del proyecto se puede seguir editando en nuevas ramas y básicamente el ciclo anterior vuelve a empezar (y este sería tu archivo final-final-listo-ahora-si).

12 - Comentarios

¿Les dije que va súper para trabajar en equipo?, pues si, Abstract tiene un sistema de comentarios (no es un chat 😡) a nivel de los artboards e incluso a nivel del proyecto, donde puedes especificar a que elemento/área se refiere tu comentario.

Listo, ¿Qué sigue?

Ahora si, salir a pasear sin preocuparse por las copias del archivo del design team.

Aunque no lo creas esto es un mini resumen de lo que es Abstract y los VCS, pero al parecer Abstract es la forma correcta de llevar un VCS para diseño y a pesar de estar en versión BETA lo esta haciendo muy bien, ya veremos como evoluciona y que mejoras le agregan, lo que seguro me hará que escriba sobre el tema.

Así que si eres un diseñador UI que te gusta probar herramientas nuevas en tu stack de diseño en definitiva deberías probar esta app.

Si te gusta esta app (como a mi) seguro podrías compartir el post o pasar a saludar, tus comentarios son bienvenidos.

Migue @elnodos

--

--

Migue
hellosketch

Interaction & Interface Designer based in Mexico city. migue.design