Sizzy 0.12 🎉

The new version is finally here, and it's completely packed with new features! Let's dig in! 😍

The Sizzy Console

The biggest change that we're happy to announce is the new Sizzy Console 🥳

Yes, Sizzy finally has a console, and you don't have to open the dev tools in order to see your console logs anymore 🙌

The logs are divided in 3 categories, and you can toggle them and clean them separately:

  • Logs
  • Warnings
  • Errors

logs

You can display the messages for all the devices, or you can select a specific device. Using the search box you can filter the console logs.

Changelog%200%2012/display_devices.gif

Console Position

You can move the position of the console to the bottom or the right side. We'll allow you to resize the console soon.

In case you have too many messages, you can just click on the "scroll to bottom" or "scroll to top" buttons.

Changelog%200%2012/move.gif

Console Type

You can change the type of the console by clicking on the "Switch Type" button. There are 3 different types:

  • Docked (Will take space on the right/bottom)

    Changelog%200%2012/12-11-2019-08.08.00.jpg

  • Overlay (Will be shown as transparent overlay over the workspace, on the right, or on the bottom)

    Changelog%200%2012/12-11-2019-08.07.20.jpg

  • Bubble Overlay (Similar to overlay, but when it's minimized, it's gonna turn into a little bubble on the right)

    Changelog%200%2012/bubble.gif


✅ Extensions for DevTools

From the Settings you can now enable extensions for the DevTools:

img

Unfortunately, this only works on macOS and Linux for now, because there's some Electron bug for Windows that's preventing us to add it. We'll add it as soon as the bug is resolved!


✅ Floating Toolbar

In Photo Studio and in Float mode, we have introduced the Floating Toolbar. The Floating Toolbar has a few actions that can help you organize your floating devices better. The first two buttons are for snapping the devices to a grid or to the center.

Changelog%200%2012/align_.gif

If the Floating Toolbar is taking too much of your space, you can always collapse it.

Changelog%200%2012/minimize.gif


✅ Selection mode

In addition to the alignment, in the Floating Toolbar we have implemented Selection mode. The selection mode can be enabled just by clicking on the "Toggle Selection Mode" button. If the mode is enabled, on the toggle button a green dot will appear as an indication that currently, you are in Selection Mode.

Changelog%200%2012/selection.png

You could already move and resize devices if the device frames, the device header, and the Browser UI were visible. However, if they're not visible, it was not possible to select, move, and resize devices.

Changelog%200%2012/naked.gif

When Selection mode is enabled, you can click to select a device and perform a number of actions. For example, sometimes in Float mode, the devices can overlap each other. Now with the Selection mode, you can bring a device to the top, or move it to the bottom by clicking on the "Move to Top" or "Move to Bottom" icons.

Changelog%200%2012/move_to_top.gif

If the header icons are disabled, you can still find and perform all the actions just by selecting a device. The header menu will be shown inside the selected device.

Changelog%200%2012/inside_menu.gif

Selection Mode allows you to perfectly align all the devices however you want and maximize the available space. This way, you can fit more devices even if you're using a small monitor. Then, after you get the perfect layout, you can save them as a preset.

We also added some helpful keyboard shortcuts while selection mode is enabled:

  • You can also use the left and right arrow keys to switch between devices
  • You can use Cmd or Ctrl + Arrow keys to move devices by 1 pixel
  • You can use Shift + Cmd/Ctrl + Arrow keys to move devices by a few pixels

Changelog%200%2012/preset.gif


✅ Space between devices in Float Mode

Just like in any other mode, you can use the "Space between devices" option in Photo Studio and in Float mode, as well. But in order for the spacing to take effect in these two modes, you will need to re-align the devices using the Floating Toolbar.

Changelog%200%2012/space.gif

If you do not re-align the devices, the spacing won't take effect, accordingly.


✅ Accessing the device menu when header is not shown

Another way of accessing the device menu is through right-clicking on the device. For example, when the header icons are off, you can find the menu just by right-clicking on the device. This option is available in all modes.

Changelog%200%2012/riht.gif

✅ View Mode and Align Mode when the sidebar is collapsed

Now when the sidebar is collapsed, you can still set the View Mode and the Align Mode. Previously you had to expand the sidebar in order to change the modes.

Changelog%200%2012/modes.png

✅ Toggle for Touch cursor and Mouse pointer

In the left sidebar, we have added a toggle button that allows you to easily toggle the touch cursor. Keep in mind, that the touch cursor works only if you're clicking inside a device.

Changelog%200%2012/mouse_pon.gif


✅ Separate Theme settings from Device settings

We have divided the Configure Theme popup into two separate sections: Device Theme and App Theme. Since the two sections are being focused on two different things, it made more sense to divide them into two separate tabs.

  • Device Theme

The Device Theme section concerns the layout of the devices. You can choose whether you would like to see the frame of the devices, their type (minimalistic or normal), their color, etc.

  • App Theme

The App Theme section allows you to change the theme of Sizzy. You can make the theme according to your preference: color, gradient or image.

Changelog%200%2012/theme.gif


✅ Correct Screen Dimensions

In order to show you that Sizzy cares about delivering the most precise results, we added a button for toggling Correct Screen Dimensions, in case the OS/Browser UI is disabled.

For example, the screen height of iPhone 11 Pro is 812px. However, you don't get access to the entire height, because a part of it is reserved for the OS and Browser UI.

If you disable the OS and Browser UI, and still want to limit the viewport to the correct size, you can now click "Correct screen dimensions" and you'll get the correct size. This way, you'll save space and you'll be able to display more devices on screen.

Changelog%200%2012/correct.gif

The reason for this feature is because the viewport dimensions may not be correct if the Browser UI is disabled.


🐞 Additional improvements and fixes

  • Moved the screenshotting to a separate thread (it should be faster now)
  • Cmd/Ctrl + L works when a device is focused
  • Bug fixes and perfromance improvements

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌