Plugin de Figma

Instala el plugin de transjt, inicia sesión y envía tus componentes de Figma a un proyecto de transjt.

De un vistazo

Precio: el plugin es gratuito. Las importaciones consumen tokens de tu plan de transjt, y el plan Starter es gratuito.
Dónde: en la Figma Community, o en Figma, en Plugins & Widgets (busca «transjt»).
Necesitas: una cuenta de Figma con un archivo de diseño que puedas editar, y una cuenta de transjt.
Exporta a: HubSpot CMS y WordPress, a través de la app de transjt.

Qué hace el plugin

El plugin de transjt conecta Figma con la app de transjt. Seleccionas capas en tu archivo de Figma y las envías a un proyecto de transjt. Allí se convierten en componentes, que revisas en la vista previa y después exportas a HubSpot o WordPress.

La conversión es exacta al píxel. Los componentes que crea transjt coinciden con tu diseño de Figma: maquetación, espaciado, tipografía y colores. Se incluyen los diseños para escritorio, tablet y móvil.

A section with four statistics and a photo of a holiday house, with the transjt result laid over the Figma design: the red outlines of the design sit on the numbers, labels, icons and photo of the result — El resultado de transjt superpuesto al diseño de Figma (en rojo): los números, el texto, los iconos y la imagen coinciden.

Conseguir el plugin

Opción 1: desde la Figma Community

Abre la página del plugin de transjt en la Figma Community.
Desde ahí, ábrelo en tu archivo de Figma.

Opción 2: dentro de Figma

Abre el archivo de diseño que quieres convertir.
Abre el menú de acciones (Cmd + K en Mac, Ctrl + K en Windows) y cambia a Plugins & widgets.
Busca «transjt» y haz clic en el plugin para ejecutarlo.

Una vez que lo hayas usado, Figma muestra el plugin entre tus plugins usados recientemente, así que puedes volver a abrirlo con un clic. También encontrarás el enlace en la app de transjt, en Plugins.

¿Aún no tienes un diseño? Prueba el plugin con el archivo gratuito transjt Figma Playground. Está preparado tal como transjt lo espera.

Iniciar sesión

El plugin usa la misma cuenta que la app de transjt. Inicia sesión con Figma, Google, HubSpot, GitHub o con tu correo electrónico y contraseña. ¿Aún no tienes cuenta? Haz clic en Sign Up en el plugin.

En la parte inferior del plugin ves la versión del plugin y la cuenta con la que iniciaste sesión, y desde ahí puedes cerrar sesión.

Importar un diseño

En Select type, elige lo que vas a importar:
- Component para una sección de una página, como una sección hero, una cuadrícula de características o un pie de página.
- Blog para el diseño del listado del blog.
- Blog Detail para el diseño de una entrada individual.
En Projects, elige el proyecto al que quieres importar, o haz clic en Create Project y ponle un nombre.
En Figma, selecciona las capas que quieres convertir.
Haz clic en Import to transjt.

The transjt Figma plugin with Select type (Component, Blog, Blog Detail), the project list with Create Project, and the Import to transjt button — Indica el tipo en Select type, elige un proyecto y haz clic en Import to transjt.

Los componentes seleccionados se transfieren a tu proyecto en la app de transjt. Continúa allí con Preview y Export.

Selecciona capas en Figma y haz clic en Import to transjt.

Volver a importar tras cambios en el diseño

¿Cambiaste un componente en Figma? Vuelve a importarlo de la misma forma. Si el componente ya existe en HubSpot, transjt te pregunta en Tasks si quieres reemplazarlo o conservar el existente. Haz clic en Continue para seguir.

Tokens

Cada importación consume tokens de tu suscripción, según lo complejo que sea el diseño. Las exportaciones no consumen ninguno. Más información en Tokens.

Consejos para obtener mejores resultados

Importa componentes, no páginas enteras. Una página completa no se divide en secciones.
Usa Auto Layout, y agrupa y nombra tus capas.

Más información en Diseñar para transjt.

El plugin y tu CMS juntos: Plugin de Figma a HubSpot y Plugin de Figma a WordPress.