Slajdomat is a tool that I am developing for making zooming slides in Figma. You draw your slides in Figma, which is a good drawing program that can be used for free (you can also apply for an education plan which removes some limits of the free version), and is available on Mac, Windows, and as a web page. You use the Slajdomat plugin to annotate your picture with slide information (what is the slide order, and overlays). Then, you export the slides, with the result being html that you can upload to your website.

Design goals

• uses Figma, which is a quality drawing program and free for basic use
• zoom in and zoom out
• allows recording sound
• produces html, hopefully not bloated
• has some math and latex support

How to install

Currently, there is a Mac version, but since the program is based on html and electron, versions for Windows and Linux should be available soon. (If you have windows, you can try to download the source, see below, and compile a windows version and send it to me.)

1. Download the software . Embarrassingly, this is 74MB. 99% is a copy of chrome, which is how electron works.
2. Open the downloaded zip. There are two parts: the Figma plugin, and the Slajdomat app. You can move the app to your applications directory. The app is responsible for creating the html files.
3. Install the figma plugin in Figma as follows. In Figma, select “Manage plugins” from the “Plugins” menu. When you are in the “Manage plugins” window, click the button “Create new plugin” from the “In development”. In the dialog for creating a new plugin, select “Click to choose a manifest.json file”, and choose the manifest.json file that is in the “figma-plugin” folder of Slajdomat. Eventually, when I have more confidence in the plugin, I will publish it to the Figma plugin collection, so this step will become simpler.

How to use

Drawing the slides in Figma. Once installed, the plugin is available in the “Plugins” menu. Each slide is Figma frame. Here is an overview of the interface:

There are two kinds of events: zoom events which correspond to switching slides, and show/hide events which change the current slide.

1.  a zoom event, which zooms into a child slide. In the present slide, there is a corresponding red rectangle, which shows where the child slide will be placed. Keep the proportions of this rectangle unchanged – it should be the same proportions as the child – otherwise the zooming will have some distortion.
2.   show and hide events, which concern the current slide (such events are called overlays events). A show event switches an object on the current slide (a picture, some text) from invisible to visible, a hide event does the opposite. If the first event for an object is show, then the object starts out invisible; if the first event is hide or there is no event, then the object starts out visible.

In the future, there might be new events, such as moving.  The second black toolbar (with an eye and the “Overlays” and “Zoom” menus) is used to create new events. For the overlays events, you can create the event for several different objects at once. Also, overlays events can be grouped (by clicking  a chain icon between the events), so that they execute at the same time. Likewise, zoom events can be grouped (in this case, you go directly from one child to another, without returning to the parent). One cannot group overlays with zoom events.

Saving the slides. So far, you have only used the Figma plugin. Now it is time for the app. Run the Slajdomat app, and select a folder where your slides will be stored. Now click the upload arrow  in the top-left corner of the plugin. The plugin will connect to the Slajdomat app (via the internet, on port 3001, which can be changed in the settings) and send the slides. Upon receiving the slides, the Slajdomat app will create (or update, in case it already exists) a new folder with your slides. This folder will contain an index.html file, and therefore if you copy this folder to your website, then it will simply show the slides. You can also view your slides directly from the Slajdomat app.

Extra features

Sound. There is a – rather flaky – feature to add sound to your slides. When you are in the Slajdomat app, you can click on your slides and view them. When you press the “r” key, it will start recording sound. You then start talking, and press the right arrow whenever you want to continue to the next slide. Recording stops once you press “r”, space, or left arrow. You can re-record the sound for parts of the presentation.

Drawing. While playing a presentation, you can press “d” which will display a very rudimentary drawing tool (pencils in two colours, and undo).

Math. The plugin also has some features for math. There is a button that runs latex (using a web service called web-cogs), importantly there is also de-latex, which means you can keep on correcting your formulas. Also, there is a feature for inserting a special character in a configurable math font. For example, I write most of my text using a font that has poor math symbols, and I use a font like FDSymbol for math symbols.

Source code and contributing

You can find the source code on GitHub. This is a good place for sending bug reports and feature requests. If you might want to joint the project, let me know, although I admit I have no experience in managing a software project.

 

COMMENTS