En SI2 usamos Sketch para diseñar interfaces.
Una de las razones es la flexibilidad que te aporta trabajar con los plugins disponibles, ya sean gratutitos o de pago, existe bastante comunidad de usuarios y empresas desarrollando plugins para infinidad de utilidades. Otra de las razones es que el diseño «se traduce» de forma considerablemente fiel a los estándares HTML/CSS u otros estilos para plataformas móviles.
https://medium.com/sketch-app-sources/how-to-export-sketch-to-html-65c427b3aa3a
El problema
El cliente nos pedía simular una página de negocio de Facebook, para medir con test de usuarios una serie de parámetros, alcance y reacciones ante diferentes publicaciones en la misma. No necesitábamos una página real, ya que según el test que se quería pasar y el idioma del usuario objetivo debemos cargar unos contenidos u otros.
Maquetar una página similar en HTML/CSS suponía bastante esfuerzo, tampoco nos valía trabajar con imágenes ya que el control sobre el contenido y algunos botones como el «like» y otras mediciones nos suponía trabajo extra.
El procedimiento es bien sencillo. Stack de Anima App lo que hace por detrás es generar un código css con la propiedad display: flexbox. Ahora se trata de tener paciencia e ir «stackeando grupos» para que al eliminar un div en el html, se reubiquen los contenidos.
La otra parte a la que tenemos que prestar atención es centrar los contenedores con el mismo plugin, para que al redimensionar el navegador queden centrados.
Vamos exportando a HTML hasta que tenemos un resultado medianamente aceptable para que por maquetación clásica y desarrollo web php introducimos los elementos de código que desarrollen la tarea que necesitemos. Si bien no tte soluciona todo el trabajo de programación, si que proporciona un «apaño» para ciertos problemas o incluso prototipados interactivos.
Launchpad de Anima App que incluye la funcionalidad Autolayout, con el que podemos usar la funcionalidad stack (flexbox) mencionada en el post.
https://animaapp.github.io/
