Add Links to Email

Kombai picks up the links used in the Figma design and adds them to their respective place in the auto-generated code.

Depending upon which elements in your email design you want to add links to, there are four different ways to add links in design to make them work with Kombai:

1. Add links to texts
2. Add links to images(product carousels, social share icons, etc.)
3. Add links to buttons(CTA buttons, etc.)
4. Add links to sections(header, hero section, etc.)

How to add links to email design?

1. Add links to texts

Text paragraphs or specific texts inside paragraphs are often linked to cite sources or add relevant URLs. If a link is placed on a paragraph or text inside a paragraph, Kombai will add the link to its respective position in the auto-generated code.

Follow the steps below to add a link to a text in Figma:

1. Select the paragraph or specific texts inside a paragraph where you want to add the link.
2. Click on the top menu bar of Figma.
3. Add the link to the input box.
4. Load the design in Kombai.

2. Add links to images

Email images like product carousels, company logos, and social share icons often need to be linked to a URL. If your Figma design has a URL placed on these images, Kombai will add links to these images in the auto-generated code.

Follow the steps below to add links to images:

1. Select the Figma image where you want to place the link.
2. In the right sidebar, go to Prototype and click .
3. Under On click panel, click on None dropdown and select Open link.
4. Add the link to the input box.
5. Load the design in Kombai.

3. Add links to buttons

Marketers commonly use linked CTA buttons inside emails. If a link is placed on the button text, Kombai will pick up the link and attach it to the entire button while generating the code.

Here are the steps you need to follow to add links to the button text:

1. Select the text node inside the button.
2. Click on the top menu bar of Figma.
3. Add the link to the input box.
4. Load the design in Kombai.

4. Add links to sections

Marketers sometimes need to link an entire section(group of design elements) - Header, Hero section, Product card, etc in emails. Such sections need to be converted into images as you can only link texts and images in emails.

We recommend placing links on such sections and converting them to images using Kombai's Convert Layers to Images feature.

Follow the steps below to add links to sections in Figma:

1. Select the Figma frame/group where you want to place the link.
2. In the right sidebar, go to Prototype and click .
3. Under On click panel, click None dropdown and select Open link.
4. Add the link to the input box.
5. Load the design in Kombai.
6. Go to and select Convert Layers to Images.
7. Add the Figma frame/group where you have placed the link and confirm.

Frequently asked questions(FAQs)

Whenever I add a link to a text in Figma, it automatically underlines it.

Figma automatically underlines the links in design. To remove the underline, follow the steps below:

1. In the right panel settings, go to Type settings under Text properties.
2. Select None in Decoration.
3. Load the design in Kombai.