---
description: >-
  There is a slight difference between using Marcode with Sketch compared to
  Icons8 Lunacy. Read on dear human being 🤖🧡
---

# Using Marcode with Icons8 Lunacy

![Icons8 Lunacy is really beautiful!](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FfuyiozdHoFlHXrYnAnQe%2Flunacy-s2r.png?alt=media\&token=5cef3eb2-7e77-430e-98ad-d36c25cc7461)

Just because Icons8 Lunacy reads and writes in the amazing .sketch format it’s a fundamentally different app, it’s not a Sketch clone. **Super important to understand this.**

## Lunacy vs Sketch

![](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FvfEO5M0gOQ9Ot8wxcPtW%2Fimage.png?alt=media\&token=d968d03e-61dc-4ad0-8e16-5dc723f39c8f)

It’s more like a nice combo of both Sketch and Figma with incredible features for collaboration, using cloud documents etc. It also has things that the other ones haven’t, like a huge free library of icons, illustrations and stock photography. Plus many more things, you should really give it a try.

### What works really well

* All of our freebies that have been created in Sketch that you can download from our [marketplace](https://marketplace.sketch2react.io/product-category/freebies/)
* Layer effects like drop shadows, blending modes, gradients (both linear and now also radial)
* Styling components
* Shared styles like typography, effects
* Styleguide CSS export
* Exporting to HTML, iOS, Android and Xcode

## How Lunacy handles overrides

![](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2Fq2GFL3beCvpTA36Ua2CB%2Fimage.png?alt=media\&token=5e7d742e-6705-4570-a254-5d01573872b7)

In Marcode we use the **override’s panel in Sketch** to solve the connections and logic we have in all of our interactive components. Since Lunacy does not handle overrides this way, this is a bit of a pickle for us, least to say.

We added automatic HTML links between artboards mostly to solve this with Lunacy. Turns out, it also benefits users of Sketch. Who doesn’t want more automatic workflows in life?

So basically, the easiest way to put this is to say that:

* **Basic logic**, like linking between artboards works thanks to our automatic HTML linking
* Using our [{prototype} components](https://sketch2react.gitbook.io/marcode/learn/components#rapid-prototyping-components) works really well :tada:
* All other logic works, but can’t be setup from scratch in Lunacy. You can use our vast amount of [free demo files](https://marketplace.sketch2react.io/product-category/freebies/) to extract all of our components that have logic inside them

If you can live with that, go ahead, try it out. Icons8 Lunacy is 100% free.

![](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FXCSTlwEwqqFT5UZWt58C%2Fimage.png?alt=media\&token=a29f0d70-f6a7-44d6-8c29-40a8da5380b3)

## **How Lunacy handles SVG's and Make Exportable image assets**

Sketch has something built-in that is called _sketch-tool_. It's what Marcode uses to automagically add everything from SVG's, PNG's etc as soon as you do the **Make Exportable** command inside Sketch app.

The neat thing about _sketch-tool_ is that it speeds up the workflow suggested for using our Rapid Prototype Components {prototype} and {prototype-fluid}…

Since Lunacy is a **cross-platform app**, and not using _sketch-tool_ at all, there is no way for Marcode to automatically add your image assets like we do in Sketch.&#x20;

Here's a simple workaround using our {image} components.



## Workaround

![In this example we have grouped some text and a nice looking button](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FZmulXLBbXJOw7DZTCV8U%2FCleanShot%202022-05-23%20at%2011.47.15.png?alt=media\&token=631fce6c-641d-4154-b42e-1d5d71321345)

1. **Group** whatever graphical elements that you want to rasterize into an image. It can be a headline, an SVG illustration etc
2. Right click and do the **Rasterize Selection** command
3. Add {image} or {image-fixed} before the layer name 👇✅
4. Done! 🎉

![We added {image} to the image layer name](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FkdKzPwis9rm6TcUgCWoN%2FCleanShot%202022-05-23%20at%2011.57.57.png?alt=media\&token=6f059569-45a2-4855-a9f4-482ce45083bf)

