Designing for transjt
How to set up your Figma file so transjt turns it into clean, editable CMS blocks.
Design components, not pages
Import single components, such as a hero, a feature grid or a footer, rather than a whole page. A full page is imported as one block and is not split into sections. Separate components become separate modules in HubSpot or blocks in WordPress, which your team can then combine into any page.
Use Auto Layout
transjt reads Figma's Auto Layout and constraints and turns them into responsive CSS (Flexbox and Grid). The cleaner your Auto Layout, the better the result on tablet and mobile. You do not need to design separate mobile and tablet layouts.
Group and name your layers
Group elements that belong together, such as a card's image, title and text. A logical, consistent structure helps transjt recognize what each part is and export it as a clean component.
Add instructions for the AI
You can tell the AI what you want directly in the design. Write the instruction into a text field of the component, and the AI applies it.
Multi-step forms
Put every step of the form into your design and label them "Step 1", "Step 2" and so on. The AI combines them into one multi-step form and connects it to your CMS.
Blogs
In the Figma plugin, choose the type before you import:
- Blog for the blog listing layout.
- Blog Detail for the layout of a single post.
transjt turns them into real blog templates with posts, listings, tags and pagination.
Designs from Relume and UX Pilot
Designs made with Relume or UX Pilot work the same way: bring them into Figma, then import the components with the transjt plugin.