Linked design

Update live webpages right from Lunacy

You can control the appearance of web pages right from Lunacy. The feature that we call linked design lets you update designs in Lunacy and then apply the changes to the web page. This works with changes to:

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

Note: This feature is available only in cloud documents.

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

How it works for a web developer

Switching to linked design might slightly impact your standard practices at the beginning, but will save you lots of time and efforts later on.

The procedure is as follows:

  1. Deselect all layers on 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 in the Export panel and paste it to your HTML code. The big plus of embeds is that they load SVG content into DOM, and you can apply JavaScript to any embedded element.

Here’s also a short video explainer:

How it works for a graphic designer

Basic rules

To make sure that your linked design works properly, mind the following rules:

  • The use of text styles is a MUST.
  • Raster images subject to updates MUST belong to layer groups. It does not matter if you put all your raster images into a single group or combine them with vector layers in a more logical way. Just remember that standalone rasters won’t update. If you’re not going to update an image, you can leave it ungrouped.
  • DO NOT rename layer and text styles after the 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 won’t to bother your web developers. Edit your current styles instead.

Applying changes

To apply changes to a live webpage, proceed as follows.

For non-text layers:

  1. Select the altered layer/layer group.
  2. Open the Export tab in the right panel.
  3. Click refresh button next to the Linked Design section. This will apply the changes to the web page.

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

  4. Repeat as needed.

For text layers:

  1. When you’re done with all edits of text layers, deselect all layers on the canvas (press Esc or click anywhere over the canvas).
  2. Click refresh button next to the Linked Design section. This will apply the changes to the web page.

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

Viewing changes in the browser

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