Icons8 Lunacy Tutorial: From First Canvas to Final UI Prototype
Icons8 Lunacy is a free, fast, and cross-platform UI/UX design tool. It is fully compatible with Sketch files and runs smoothly on Windows, macOS, and Linux. This tutorial guides you from an empty canvas to a complete, interactive user interface prototype. Getting Started Installation and Setup
Download Lunacy from the official Icons8 website or your operating system’s app store. Launch the application to see the home screen. Click New Document to open a clean workspace. Interface Overview
Left Sidebar: Access your layers, components, and the built-in graphics library.
Toolbar (Top): Select basic tools like shapes, text, images, and pen tools.
Canvas (Center): Your main workspace where layouts come to life.
Inspector (Right): Adjust dimensions, colors, typography, and export settings. Step 1: Creating Your First Canvas
Every project in Lunacy begins with an artboard. Artboards represent the screens of your device.
Press A on your keyboard or select the Artboard Tool from the toolbar.
Look at the right inspector panel to view presets for iOS, Android, Web, and Social Media. Select iPhone 14 & 15 Pro (or your preferred device size).
A blank white rectangle will appear on your canvas. Double-click its title to rename it 01_Welcome_Screen. Step 2: Utilizing Built-In Assets
One of Lunacy’s greatest strengths is its native integration with the Icons8 library. You do not need to download external asset packs. Adding Icons Click the Icons tab on the left sidebar. Search for “User” or “Profile”. Drag and drop the icon directly onto your artboard.
Use the right panel to change the icon color to fit your brand. Adding Illustrations and Photos Click the Illustrations or Photos tab on the left sidebar. Search for background images or onboarding graphics.
Drag your chosen asset into the artboard. Resize it while holding Shift to maintain aspect ratios. Step 3: UI Layout and Typography Now you will build a clean, structured UI card layout. Drawing Shapes Press R for the Rectangle Tool.
Draw a rectangle inside your artboard to serve as a content card.
In the Inspector, change the background color to white (#FFFFFF) and set the Corner Radius to 16 for a modern, rounded look.
Add a subtle drop shadow by clicking the + icon next to Shadows. Adding Text Press T for the Text Tool and click inside your card. Type a headline like “Discover New Paths”.
In the Inspector, set the font family to Inter or Roboto, font weight to Bold, and size to 24px.
Create a second text layer underneath for body copy, using a Regular weight, 14px size, and a muted grey color (#666666). Step 4: Structuring with Auto Layout
Auto Layout ensures your design adapts automatically when content changes.
Select your headline text layer and body text layer together.
Right-click and choose Create Auto Layout (or press Shift + A).
In the Inspector, you can now adjust the vertical spacing between the text layers instantly.
If you change the text length later, the surrounding layers will automatically shift to maintain perfect padding. Step 5: Building Components for Reusability
If you plan to reuse elements like buttons or navigation bars, turn them into Components. Draw a small rectangle to look like a button.
Add a text layer over it that says “Get Started”. Center the text. Select both the rectangle and the text layer.
Click the Create Component icon on the top toolbar (or press Ctrl + Alt + K on Windows / Cmd + Option + K on Mac).
Your button is now a master component. If you duplicate it across 10 screens and change the master color, all 10 buttons will update simultaneously. Step 6: Creating the Interactive Prototype
Transform your static layouts into a clickable prototype to demonstrate user flow. Setting Up a Second Screen
Select your first artboard title, hold Alt (or Option), and drag to the right to duplicate it. Rename this second artboard 02_Dashboard.
Modify the content on the second artboard to look like an internal app screen. Linking Screens
Click the Prototype tab at the very top of the left panel (or press V to ensure you are in select mode). Click on the button component inside 01_Welcome_Screen.
A small blue arrow handle will appear on the right side of the button.
Click and drag that blue handle over to the 02_Dashboard artboard.
In the right panel, customize the transition animation (e.g., Slide In, Instant, or Dissolve). Step 7: Previewing and Exporting Previewing Your Prototype
Click the Play icon in the top right corner of the window. A presentation browser window opens, allowing you to click your button and watch the transition to the dashboard screen in real time. Exporting Assets
To export a single asset: Select any layer, icon, or card. Look at the bottom of the right Inspector panel, click Export, choose your format (PNG, SVG, JPG, or PDF), and click Export Selected.
To export code: Select any layer and switch to the Code tab in the Inspector panel to copy CSS, XAML, or SVG code string values directly into your development workflow. If you want to refine this specific design, tell me:
The type of app you want to build (e.g., e-commerce, fitness, dashboard). Your preferred color scheme or brand vibe. Whether you need to optimize it for mobile or web.
I can provide customized design layouts and component frameworks for your project.
Leave a Reply