white-logo

KappaX

burger-icon
search-icon

/

The Artboard

KappaX is a powerful design tool that allows designers to create interactive and engaging experiences. In this article, we'll take a deep dive into the artboard in KappaX.

Introduction to the Artboard

The Artboard is the base layer of your project. It's where you'll find all the interactive layers, and it's where you'll be spending most of your time when you're designing. Unlike other design tools, such as Figma or AdobeXD, KappaX only has a single artboard available. But don't worry, this is actually a good thing - it ensures that the deployment of your experience on any platform is hassle-free.

Single Artboard Advantage

Even though there is a single Artboard in KappaX, you can always create multiple Artboard layouts of different aspect ratios. To know how to create multiple Artboards, follow this link

Drawing & Arranging Layers on the Artboard

You can draw and design your interactive elements directly on the artboard in KappaX. You can use the various drawing tools available in KappaX to create shapes, images, videos, and texts. Once you've drawn the elements on the artboard, you can arrange them into a layout. You can use KappaX's powerful layout tools to align and distribute your elements. You can also group elements together and apply transitions to them.

Artboard1

Artboard Events

The Artboard has its own events defined that are triggered when the interaction is made directly with the artboard. These events help you control the behavior of the artboard and its layers.

  1. Artboard Play Start Event: The Artboard Play Start event is triggered when the experience is played for the first time. It's a great place to start executing your actions. For example, you can use this event to display a welcome message or an introduction video.
  2. Artboard Play Event: The Artboard Play event is used to execute actions when the artboard is played, other than the first time. You can get really creative with this event and add some extra functionality to your design. For example, you can use this event to play a video or display a tooltip when a user clicks on a specific element.
  3. Artboard Pause Event: The Artboard Pause event is triggered when the artboard is paused. For example, you could play a video or music that was not playing earlier when the artboard is paused. You can also write any other actions that you want to execute under this event.
  4. Artboard Mute Event: The Artboard Mute event mutes everything on the artboard, whether it's a video or music. If you want to keep a particular element unmuted, even if the artboard is on mute, then you can write the action on this event. You can also write any other actions that you want to execute under this event.
  5. Artboard Unmute Event: The Artboard Unmute event is just the opposite of the Artboard Mute event. It allows you to execute whatever action you want when the artboard is unmuted. For example, you can use this event to resume a video or music when the artboard is unmuted.
  6. Artboard Layout Change Event: The Artboard Layout Change event is used for the seamless switching of artboard layouts to retain the properties across different aspect ratios when the artboard auto-switches itself according to the container size. It's a great way to ensure that your design looks great on any screen size. For example, if you have a design that's optimized for a mobile screen, this event can help you seamlessly switch to a tablet or desktop layout without any loss of quality.

Artboard2

On this page

Introduction to the Artboard

Single Artboard Advantage

Drawing & Arranging Layers on the Artboard

Artboard Events