Getting Started with Haiku


HAIKU OVERVIEW

Haiku is a design tool for teams where you can bring your designs to life with animation and interactivity. You can then easily publish them as web-ready components. If you want to learn more about all Haiku can do go here and if you want to get started with Haiku - read on!


DOWNLOADING HAIKU

To download Haiku, you'll first need to create an account at https://www.haiku.ai/.

Once you create your account, you will automatically be taken to the download site for Haiku.

Please install Haiku by dragging it to your /Applications folder.


OTHER TOOLS

Haiku integrates with Sketch, Illustrator, and Figma. To get the most out of Haiku, you'll want to use one of these tools so you can import your designs easily into Haiku.

If you don't have Sketch, you can download a free 30-day trial at https://sketchapp.com/.

If you don't use Figma, you can access it for free for individuals at https://figma.com.

If you don't have illustrator, you can learn more here [https://adobe.com/illustrator] (https://www.adobe.com/products/illustrator.html)

Coming soon: We plan to support other drawing tools like Adobe Photoshop and eventually we'll have some of our own.


INSTALLING THE HAIKU CLI

The CLI (Command Line Interface) is an optional part of Haiku, but it opens up a lot of powerful features — for example, you need the CLI to import a Haiku into an existing codebase, or you can use the CLI to directly clone a Haiku project to your computer, to access and edit the code manually.

To install, run one of the following commands in your terminal:

npm install -g @haiku/cli OR yarn global add @haiku/cli


START DESIGNING

Now that you have Haiku downloaded you can start bringing your designs to life. Before you jump in, learn the basics with the following short intro videos (<5min each) on adding motion animation and interactivity to your Haiku projects:

Click on the video below to get started with Motion Animation: Motion Animation Video

(or, read our blog post on motion animation)

Click on the video below to get started with Interactivity: Motion Animation Video

(or, read our blog post on interactivity)


LEARN MORE

Continue to dive into our resources on the Learn page where you can watch and read comprehensive tutorials, read the docs, and get help & support.


Learn More: Haiku.ai/learn

results matching ""

    No results matching ""