# Overview

{% embed url="<https://youtu.be/GKq6XDqvQAI>" %}

## What is Cannoli App?

[Cannoli App](https://cannoli.app) is a tool that takes Figma files and turns the artboards into email code.

With Cannoli, you can use your favorite design tool (Figma!) to create beautiful and responsive emails that will work for any ESP.&#x20;

### Guides: Jump right in

Follow our handy guides to get started on the basics as quickly as possible:

{% content-ref url="guides/getting-started-on-cannoli" %}
[getting-started-on-cannoli](https://docs.cannoli.app/guides/getting-started-on-cannoli)
{% endcontent-ref %}

{% content-ref url="guides/preparing-your-figma-file-from-scratch" %}
[preparing-your-figma-file-from-scratch](https://docs.cannoli.app/guides/preparing-your-figma-file-from-scratch)
{% endcontent-ref %}

{% content-ref url="guides/preparing-your-figma-file-for-an-image-slice-email" %}
[preparing-your-figma-file-for-an-image-slice-email](https://docs.cannoli.app/guides/preparing-your-figma-file-for-an-image-slice-email)
{% endcontent-ref %}

{% content-ref url="advanced/creating-an-email-system-in-figma-for-cannoli" %}
[creating-an-email-system-in-figma-for-cannoli](https://docs.cannoli.app/advanced/creating-an-email-system-in-figma-for-cannoli)
{% endcontent-ref %}

{% content-ref url="guides/using-cannolis-email-kit-on-figma" %}
[using-cannolis-email-kit-on-figma](https://docs.cannoli.app/guides/using-cannolis-email-kit-on-figma)
{% endcontent-ref %}

{% content-ref url="guides/using-cannolis-plugin-on-figma" %}
[using-cannolis-plugin-on-figma](https://docs.cannoli.app/guides/using-cannolis-plugin-on-figma)
{% endcontent-ref %}

## Extra guides

If you are a hands-on learner, see the Email Kit for Cannoli App on Figma, which has many examples of layouts that work well for Cannoli:

{% embed url="<https://www.figma.com/community/file/1042861645873665842>" %}

If you are a visual/audio learner, see our playlist on YouTube with a series of five videos on how to best use Figma and Cannoli to code your emails:

* [Cannoli App tutorial on YouTube](https://www.youtube.com/playlist?list=PLRU_8I8e-GIjA5ZoCcGYdwEYoirkbgodg)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cannoli.app/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.