Ilumax

Ilumax Proto guide

Design screens with text, shapes and images, keep layouts consistent, and connect screens into a prototype you can try.

All guides

What Ilumax Proto is for

Ilumax Proto is for designing interfaces and trying how they work. A frame holds a screen; text, shapes and images become its layers. Auto layout keeps items arranged, and components let you reuse buttons and other parts.

Connect layers to other screens to make a clickable prototype. You can design and present on your computer without sharing the file online.

Install and first launch

Install Proto with the Ilumax Launcher or from My downloads. Follow Installing Ilumax apps for the first-launch steps on your Mac or PC.

The home screen’s Recents area has New design file, Open file, templates and recent files. Choose New design file to start with a blank canvas, or See all templates to browse starting points.

Design your first screen

  1. Click New design file on the home screen.
  2. Press F for the Frame tool. Drag on the canvas to draw a screen.
  3. Press R for Rectangle and draw a button inside the frame. Select it and change its Fill in the Design panel on the right.
  4. Press T for Text, click inside the frame and type a heading. Press Esc when you finish typing. Use Typography on the right to choose its font and size.
  5. Press V for Move. Select a layer and drag it into place. The arrow keys nudge it; hold Shift for larger steps.
  6. Press CommandS (Mac) or ControlS (Windows), choose a location and save as First screen.ilxproto.
  7. Press Shift1 to fit the design in the window. Select the frame and click Present, the play button at the top right, to view the screen.

Find your way around

  • File tabs keep your open designs available. The home screen lists templates and recent files.
  • Layers on the left shows pages and the layer tree. Select a layer there when it is hard to reach on the canvas. Assets holds reusable components.
  • Canvas is the space where you draw and arrange screens. Hold Space and drag to move around it. Shift1 fits the design; Shift2 zooms to the selection.
  • Toolbar has the drawing tools and the Draw, Design, Prototype and Inspect modes. Actions searches commands.
  • Design on the right changes the selection’s position, size, layout, typography, fills, strokes and export settings. Prototype sets interactions and flow starting points.
  • Present and Share are at the top right. The arrow beside the play button also offers Preview in a pane.

Everyday tasks

Arrange layers

  1. Press V and select a layer on the canvas or in Layers. Hold Shift to select more than one.
  2. Drag to move the selection, or use the position and size controls in Design for exact values.
  3. Choose Object ▸ Group selection to keep related layers together. Ungroup selection separates them again.
  4. Use Object ▸ Bring to front or Send to back to change what overlaps what.

CommandD (Mac) or ControlD (Windows) duplicates the selection. Hold Option (Mac) or Alt (Windows) while dragging to make a copy in another position.

Add text and pictures

Use Text (T) to add a label or paragraph. Double-click existing text to edit it. Typography controls its font, size and alignment; Fill changes its colour.

  1. Choose File ▸ Place image…, or press CommandShiftK (Mac) or ControlShiftK (Windows).
  2. Choose the image file, then place it on the canvas.
  3. Select the image to adjust its size and image fill settings in Design.

SVG files import as editable artwork. PNG, JPEG, GIF, WebP, BMP and TIFF images can be placed too.

Keep a layout tidy

Auto layout arranges the children of a frame. Use it for a row of buttons, a menu or a card whose contents may change.

  1. Select the items to arrange, or their frame.
  2. Choose Object ▸ Add auto layout, or press ShiftA.
  3. In Auto layout on the right, choose Horizontal, Vertical or Grid. Set the gap and padding.
  4. Choose Hug contents for a size that follows the contents, Fixed for a set size, or Fill container for a child that takes the available space when that option is offered.
  5. Change a label or resize the frame to check the layout.

Use Wrap when a horizontal layout should continue onto another row. Object ▸ Remove auto layout returns to manual placement.

Reuse a button or a card

  1. Select the layers that make the reusable part.
  2. Choose Object ▸ Create component, or press CommandOptionK (Mac) or ControlAltK (Windows). This is the main component.
  3. Open Assets and drag the component onto a screen to place an instance.
  4. Edit the main component to update its instances. An instance can keep its own overrides, such as changed text.

Object ▸ Go to main component finds the original. Reset all changes clears an instance’s overrides; Detach instance makes it independent. Select related components and choose Combine as variants to collect different states of the same part.

Make a prototype

  1. Make two frames on the same page, with a button or other clickable layer in the first.
  2. Select that layer and open Prototype on the right.
  3. Click the plus beside Interactions (Add interaction). Set Trigger to On click and Action to Navigate to.
  4. Choose the second frame as Destination. Start with Instant, or choose a transition such as Dissolve.
  5. Select the first frame. Under Flow starting point, click Add starting point.
  6. Click Present, or press CommandOptionReturn (Mac) or ControlAltEnter (Windows). Click the button in the presented screen to try the connection.

You can also drag a prototype connection on the canvas to its destination. The arrow beside Present offers Preview to test beside the design. During presentation, R restarts and Esc leaves it.

For Smart animate, keep matching layer names and hierarchy across the two screens. Matched layers animate their position, size and other supported properties; unmatched layers dissolve.

Export a screen or an asset

  1. Select the frame or layer you want to send.
  2. In Design, open Export and click the plus (Add export setting). Choose the format and scale.
  3. Click the export button below the settings and choose where to save.

PNG and WebP support transparent artwork. JPG uses white where the design is transparent. SVG keeps editable vector artwork where supported. File ▸ Export frames to PDF… makes a PDF with a page for each exported frame.

Share a file

The simplest way to send an editable design is to save its .ilxproto file and send that copy. Export images or a PDF when the recipient only needs to see it.

Share ▸ Local network works without a server. Online needs a server you set up yourself; it stays off until you enter one in Preferences. Network sessions are a preview feature, so keep a saved local copy.

Files

  • Saves: .ilxproto, containing the design and its images. File ▸ Save as… makes another file.
  • Opens: .ilxproto and files from earlier versions, SVG, PNG, JPEG, GIF, WebP, BMP and TIFF. It also opens .fig files and compatible design JSON, with warnings when something cannot be imported.
  • Exports: PNG, JPG, WebP, SVG and PDF. File ▸ Export… also offers experimental .fig export; check the result before sending it.

A .fig import is best effort. Review its fonts, layout and interactions, then save your working design as .ilxproto. Keep the original file if you need to return to it.

Keyboard shortcuts

On a Mac, ⌘ is Command, ⇧ Shift, ⌥ Option and ⌃ Control.

ToMacWindows
New design fileCommandNControlN
OpenCommandOControlO
SaveCommandSControlS
Save asCommandShiftSControlShiftS
Undo / redoCommandZ or CommandShiftZControlZ or ControlShiftZ
DuplicateCommandDControlD
Move / frame / rectangle / textV or F or R or TV or F or R or T
Place imageCommandShiftKControlShiftK
Add auto layoutShiftAShiftA
Create componentCommandOptionKControlAltK
Zoom to fit / selectionShift1 or Shift2Shift1 or Shift2
PresentCommandOptionReturnControlAltEnter
Preview in the canvasShiftSpaceShiftSpace
ActionsCommandKControlK
ExportCommandShiftEControlShiftE

Tool keys work when you are on the canvas, rather than typing in a field. Help ▸ Keyboard shortcuts shows the full list for your computer.

Tips

  • Name frames and layers as you go. Clear names help you find destinations and match layers in animations.
  • Use Actions (CommandK on a Mac, ControlK on Windows) when you know what you want to do but cannot find the menu item.
  • Select an obscured layer in Layers, or hold Command (Mac) or Control (Windows) while clicking to select inside a group or frame.
  • Check a design’s fonts on the computer where you open it. Typography shows Font not installed when a face is missing.
  • Save your editable design before exporting. An image or PDF is a deliverable, while .ilxproto keeps your working layers and interactions.
  • View ▸ Theme lets you choose Light, Dark or Follow system.

Get help

Help ▸ User Guide opens this guide. Help ▸ Getting started brings back the introductory tips, and About Ilumax Proto shows your version. Include that version and the steps that caused the problem when you contact support.

Email [email protected]. Say which app and version you use, whether you are on a Mac or Windows, and what you did just before the problem.

Or go to Support: what to put in your email, and quick answers on installing, licence keys, renewals and refunds.

Lost your licence key? Email from the address you paid with, and it will be sent back to you. To download an app again, paste your key on My downloads.

Other companies’ product names mentioned in this guide are trademarks of their owners. Ilumax is not affiliated with them.