New Improvements & Fixes

Importing designs from Figma made easier!

Kajoo is proud to announce the release of our new canvas and importing designs from Figma directly into Kajoo has been made more user friendly! Within the +Add tab, you will be provided the option to import a Figma design directly into Kajoo. All you have to do is click the Import a Figma Design button, this will bring up the AI Design to Code from Figma model in Kajoo. Then by simply right clicking on your Figma design and selecting the Kajoo Design - AI to Code option from the plugins menu, you will be provided with the ability to import your design. Not only that, when importing your design, the images from Figma will not only be imported onto your Kajoo canvas, but also sent and rendered into your corresponding data source!

Importing a new component:

Importing a nesting component:

The right click menu for the Explorer tab has arrived!

Kajoo is now offers a user friendly right click feature, with easy access on the Explorer tab! Leverage the right click menu on Kajoo pages and components to delete, rename, and even make component dynamic. Check it out!
Make a component dynamic (authorable):

Make a component static (non authorable):

Drag and drop your reusable components!

Leverage the new drag an drop feature to add components to your canvas directly from your component list. All you have to do is open you component list, select the component that you would like to leverage, then drag and drop it directly onto your canvas on its own, within a page, or a component, and with just a few steps your component will be rendered just as you designed it!

Component edits that reflect your project globally

Finally, a way to save time when making changes to one component that is reflected in every instance of your project! Kajoo offers the component edit screen, just double click the edit button or access your component directly from your component list. Make your change, and that is all it takes!

New and improved Design tab

The Kajoo enhanced styling feature has is like a little video studio editor! From building out the responsive states like hovering and focused interactions, being able to select the style variant, to adjusting the padding, layout, typography, and background styling, you can create a user friendly component, page, or widget directly from Kajoo. Kajoo has also provides you with the ability to set up your designs with flex properties and even allows you to select from accessibility options. Get this! Not only can you adjust your designs with Kajoo’s new design tab, but you can also directly import all specs from Figma, when leveraging the Figma import feature! And for our more technical users, we have provided you with the ability to access an Advanced CSS Editor to see how you renderings are coded in backend. Give it a try!

Styling your fonts

Great news! Kajoo has it made it easy to style fonts. All you have to do is click on your text component and via the Design tab navigate to the Typography section. Select your font family, weight, size and height to make your component or page look and feel exactly how you like it!

Styling your background image

Kajoo is now proud to offer you the ability to style your background images! All you have to do is click on the container, go to the Design tab and scroll to the Background section and by selecting the Enable BG Image checkbox you can select your styling options.

Component and page list

Kajoo has made it super easy to organize your components and pages! Leverage the Components and Pages Lists to easily access your components. All you have to do navigate to the Explorer tab, and you will see your components and pages organized by folder. Kajoo will automatically add your components and pages directly to their respective list when you create them leveraging your canvas, and provides the ability to add pages and components directly from your component and page list as well!

Generating code directly from your designs!

Struggling with development effort eating up your budget? Never fear, Kajoo is here! With the click of the Generate Code button you can turn your designs into react code and not only that, but Kajoo also automatically generates the associated Sitecore components associated with the generated react components, all you have to do is ensure the associated components are marked as CMS components and you are good to go!

Data binding made easier

Check out Kajoo’s new and improved Data tab! Kajoo has made mapping and binding your elements from your design directly to the selected CMS data source in a smooth and easy manner. All you have to do is navigate to the Data tab and bind your components, pages, or widgets leveraging the Kajoo First or Sitecore First options. Once binding is successful, in the Data Mapping section of the Data tab, you will see a list of elements that are have been successfully bound and those that need to be manually bound.