El pasado junio se celebró la Figma Config 2023 y en ella se presentaron las novedades de la aplicación. Ua de las que más revuelo ha causado es el nuevo Dev mode que permite a los desarrolladores una mayor integración dentro del proceso de diseño.
Qué es el Dev Mode de Figma
Dev mode es un nuevo espacio en Figma que facilita el trabajo de desarrollo. Permite inspeccionar los bocetos, ver cambios en el diseño, copiar fragmentos de código y trabajar con las herramientas habituales.
Con este nuevo modo podemos cambiar la interfaz de figma para ver la ventana de código. Esto es, ni más ni menos, que la antigua pestaña Inspect con un aspecto mejorado. La información que podremos sacar son las propiedades de cada elemento (ancho, alto, tipografía, color...) y su traducción a código CSS.
Trabajando con el Dev Mode
Antes de empezar a trabajar con este nuevo modo de desarrollo hay que iniciarlo. Para ello existe un pequeño asistente con cuatro pasos:
- Seleccionar el lenguaje (CSS, IOS o Android) y las unidades
- Escoger el modo de color (ligh, dark o intercambiable
- Seleccionar los plugins que se utilizan para obtener el código
- Posibilita escoger alguna extensión para conectar con VS Code o Slack, por ejemplo
Son los plugins y las extensiones lo que resulta una verdadera novedad ya que se instalarán unos u otros en función de las necesidades del proyecto. En nuestro caso estamos utilizando el plugin Figma to Code, en concreto la opción de Tailwind, puesto que devuelve snippets de html con las clases de Tailwind más adecuadas. Aunque no es todo lo limpio que nos gustaría, facilita mucho el trabajo del desarrollador y simplifica la documentación que el diseñador tiene que aportar para una correcta interpretación del diseño.
<div class="w-full bg-white relative rounded border border-gray-300 p-4">
<div class="mb-4 text-sky-950 text-2xl font-semibold leading-7">Lorem ipsum dolor sit amet</div>
<div class="text-gray-500 text-lg font-normal leading-normal">Fusce blandit, ex non lacinia porttitor, quam est pulvinar lectus, ac posuere ex odio sed tellus.</div>
<div class="w-fit px-8 py-2 rounded-full border-2 border-sky-950 text-sky-950 text-2xl font-black">Praesent/div>
</div>Sin duda, el Dev Mode es una herramienta muy útil que amplia verdaderamente la información que ya aportaba Figma con versiones anteriores. Además esta es solo una de las novedades que se presentaron en la Figma Config, hay muchas otras como la introducción de variables o la creación avanzada de prototipos, de la que hablaremos en próximos artículos.
Más información: Dev Mode: Design to development
