Linked design

Update live webpages right from Lunacy

With the Linked design feature, you can adjust your designs in Lunacy and apply the changes to a webpage without leaving the app. This works with changes to:

• Vector content
• Text and raster content
• Colors
• Styling effects (borders, shadows, etc.)
• Layer shapes
• Layer sizes

To learn more about the pros of linked design and potential use cases, check out this article.

How it works for a web developer

Switching to linked design might slightly impact your standard practices in the beginning, but it saves you lots of time in the long run.

Here’s how it works:

1. Deselect all layers (press Esc or click anywhere over the canvas).
2. Open the Export tab in the right panel.

3. Copy the code with the link to the CSS file and paste it to the head section of your HTML code.

   Later on, stick to the CSS styles and color variables from this file in your code. To see the CSS code generated by Lunacy, open the link to the CSS file in your browser.

4. In the same panel, copy the code with the script for fetching text content and paste it under the body section of your HTML code.

5. One by one, select the layers/layer groups subject to updates from Lunacy, copy their embed code from the Export panel and paste it to your HTML code. The advantage of embeds is that they load SVG content into the DOM, and you can apply JavaScript to any embedded element.

Here’s a visual explanation of the process:

How it works for a designer

The basics

To make sure that your linked designs work properly, keep these things in mind:

• The use of text styles is a must.
• Any raster images you update via linked design must belong to layer groups. You can put all your raster images into a single group or combine them with vector layers in a more logical way, just remember: standalone image layers won’t be updated. If you’re not going to update an image, you can leave it ungrouped.
• Do not rename layer and text styles after a linked design is online. These names are used in the CSS code, so if you modify them, you’ll break the links with the current code.
• For the same reason, do not add new styles if you don’t want to bother the web developer team. Edit your current styles instead.

Applying changes

Here’s how you can apply changes to a live webpage:

For non-text layers:

1. Select the altered layer/layer group.
2. Open the Export tab in the right panel.

3. Click next to the Linked design section. This will apply the changes to the webpage.

   Tip: If the button appears disabled, click the question mark next to it first.

4. Do this for all the elements you need to upload.

For text layers:

1. When you’re done editing all of your text layers, deselect all layers on the canvas (press Esc or click anywhere over the canvas).

2. Click next to the Linked design section. This will apply the changes to the webpage.

   Tip: If the button appears disabled, click the question mark next to it first.

   </div>

Viewing changes in the browser

In your browser, reload the page by pressing Ctrl + F5/ ⌘ ⌥ R to make sure that any cached content is cleared.