Figma es una herramienta de trabajo colaborativo que sirve para diseñar interfaces de usuario.
La aplicación ofrece la posibilidad de instalar extensiones para agilizar algunas tareas.
Mediante el uso del plugin html.to.design podemos convertir de forma automática una página web a un archivo de diseño de Figma.
¿Cómo utilizar la extensión html to design de Figma?
Archivo de diseño
Creamos un nuevo archivo de diseño de Figma haciendo clic sobre el botón que muestra la siguiente captura.
Panel de Recursos
Desde la barra de herramientas superior hacemos clic sobre la séptima opción que corresponde al icono de Recursos y mediante el cual desplegaremos un submenú desde el que podremos acceder a la búsqueda de plugins.
En éste caso si escribimos en el cuadro de búsqueda html se nos irán listando las diferentes opciones que correspondan al criterio de búsqueda.
Hacemos clic en Run de la extensión a ejecutar.
Importar Sitio Web
El plugin nos ofrece varias opciones de importación pero partiendo del supuesto de que muchas veces no contamos más que con la dirección pública del sitio recurriremos a esta opción.
Introducimos la dirección del sitio web y hacemos clic en Importar.
Diseño Figma Importado
La fidelidad del resultado dependerá de la cantidad de elementos bloqueantes que existan en la página aunque incluso siendo así ahorraremos tiempo de trabajo.
Github Pages nos permite generar sitios web estáticos o serverless de proyectos a partir de nuestros repositorios publicados en Github de forma fácil y gratuita.
Para empezar es necesario tener una cuenta de usuario en la plataforma de Github y tener instalado Git en nuestra máquina.
Crear repositorio
Para el ejemplo crearemos un nuevo repositorio desde github.com/new.
Podemos hacer un clonado del proyecto o irnos a nuestro editor de código, crear un directorio, añadir contenido y subir los cambios al nuevo repositorio. Vamos a hacer lo segundo.
Creamos un nuevo directorio para nuestro proyecto y accedemos al mismo.
Incluir contenido al proyecto
> mkdir desplegar-en-githubpages
> cd desplegar-en-githubpages
Para el ejemplo crearemos un archivo index.html desde nuestro editor de código en el cual incluiremos una estructura de html5 básica rápidamente mediante Emmet.
Obtenemos la siguiente estructura a la que añadiremos un mensaje de Hola Mundo que se pintará por pantalla.
Volvemos a la página de GitHub y accedemos a la sección Pages de los Settings del repositorio. Seleccionamos una rama para habilitar GitHub Pages.
En la barra lateral de nuestro repositorio ahora podemos ver la sección de Enviroments y github-pages desplegando.
Si hacemos clic sobre la opción del entorno de GitHub Pages accedemos al historial desde donde podemos verificar si el despliegue se ha realizado y ver el proyecto desplegado en [usuario].github.io/[repositorio]
Cuando trabajamos con Git, no siempre tenemos los cambios listos para hacer un commit. A veces estamos en mitad de una tarea, aparece una urgencia, necesitamos cambiar de rama o simplemente queremos probar algo sin perder lo que ya hemos avanzado.
Para esos casos existe git stash, un comando que permite guardar temporalmente los cambios en curso y dejar el directorio de trabajo limpio, sin tener que crear un commit provisional. Es como poner tu trabajo “en pausa” para recuperarlo más tarde justo donde lo dejaste.
En esta guía veremos cómo usar git stash para guardar cambios, listar los stashes creados, recuperarlos, revisar diferencias y eliminar los que ya no necesitas.
Guardar cambios en un stash
<pre>git stash</pre>
Un stash es algo similar a un borrador, se trata de una forma rápida o sucia de preservar cambios en un espacio provisional de forma local con los que posteriormente podremos seguir trabajando.
Podemos tener varios borradores de nuestros cambios que podemos listar con el comando git stash list.
Listar stashes creados
git stash list
También podemos guardar un stash incluyendo un mensaje y poder diferenciarlo en el caso de que tengamos varios elementos en la lista de stashes.
Diferenciar stash con mensaje descriptivo
git stash save "mensaje descriptivo"
Para recuperar cambios de un stash tenemos varias opciones.
Recuperar cambios de un stash
Si lo que queremos es recuperar los últimos cambios desde el stash utilizaremos el siguiente comando:
git stash pop
O también podemos utilizar el siguiente comando:
git stash apply
Con ambos comandos podemos recuperar cambios de un stash específico.
git stash pop stash@{}
git stash apply stash@{}
Mostrar diferencias en un stash
Podemos ver las diferencias de un stash de forma resumida mediante el comando:
git stash show
O utilizar la opción -p (o –patch) para ver todas las diferencias de un stash:
git stash show -p
Al recuperar cambios de un stash éste no se elimina automáticamente por lo que es recomendable hacerlo de forma manual.
Para eliminar cambios tenemos varias opciones.
Eliminar cambios recientes
git stash drop
También podemos hacerlo especificando el índice de un stash en concreto.
git stash drop stash@{}
Eliminar todos los cambios
git stash clear
Para ampliar información, puedes consultar la documentación oficial de git stash, donde se detallan las opciones disponibles para guardar, listar, aplicar y eliminar stashes.
También puedes revisar el capítulo Stashing and Cleaning del libro oficial de Git, especialmente si quieres entender mejor cómo encaja el stash dentro del flujo de trabajo diario.
Preguntas frecuentes sobre git stash
¿Cuál es la diferencia entre git stash pop y git stash apply?
git stash pop recupera los cambios guardados y, si se aplican correctamente, elimina ese stash de la lista. En cambio, git stash apply recupera los cambios pero mantiene el stash guardado, por si quieres volver a utilizarlo más adelante.
¿Git stash guarda también archivos nuevos?
Por defecto, git stash guarda cambios en archivos que Git ya está siguiendo, pero no incluye archivos nuevos no trackeados. Para guardar también esos archivos, puedes usar git stash -u o git stash push -u.
¿Cuándo conviene usar git stash en lugar de hacer un commit?
Conviene usar git stash cuando los cambios todavía están incompletos, no quieres ensuciar el historial con un commit provisional o necesitas cambiar de rama rápidamente. Si el cambio ya está terminado, probado y tiene sentido dentro del historial del proyecto, lo más recomendable es hacer un commit.