Changelog

Information on new updates and improvements to Visly.
Follow us on Twitter or request access to the product for updates.

June 29th 2020

As hundreds of new users are gaining access to Visly each week, we've been focusing all our efforts on fixing bugs and smaller issues you guys have been reporting - you can see the details of what exactly we've fixed below. Thanks to everyone who's sent in feedback so far - please keep it coming!

Our main focus for the next few weeks outside of ramping up invitations is to improve the performance of Visly for larger projects and fix any issues that come up as you start to build UI with Visly.

As I mentioned above, we're onboarding hundreds of new users to Visly every week now - if you'd like like to be one of these early users, you can request access here.

Fixed this week

  • Fixed an issue where dragging a layer could result in an application crash under specific conditions.
  • Fixed an issue that sometimes caused dimensions to include floating point artifacts.
  • Fixed an issue where rotation of a layer could not be un-set once added.
  • Fixed a issue causing the app to crash under certain conditions.
  • Ensured tooltips aren't cut off by the edge of the application window.
  • Fixed an issue that caused inner components to render multiple times in preview.
  • Fixed an issue that prevented deeply nested inner components from generating any code.

June 23rd 2020

You may have noticed that we've been quiet this past month. And that's because our team has been incredibly hard at work to deliver a whole suite of amazing updates to Visly. We've closed over 100 small bugs and pushed some big new features, including a style guide for all your components, Next.js support, and support for sub-components.

We've also ported most of our user-facing UI components to be built in Visly. As a result, there's now less code to maintain and our design team is now able to contribute using pull requests. Starting this month, we'll also be opening up Visly to many more people! If you want to ensure you're able to gain access over the next few weeks, make sure to request access now.

May 27th 2020

Redesigned workflow

Over the past two weeks, we have been working on a redesign of all core workflows in Visly. There are too many details to cover individually in a changelog, but some of the highlights are:

  • A new interface for managing design tokens
  • A new interface for managing component props and variants
  • A redesign of the layers panel
  • A new interface for designing interaction states
  • Adjustments to every single UI element to ensure consistency
  • Color pickers for quickly adjusting any color

Overall the app is much quicker than before and should hopefully be much easier to navigate as well. But what's most exciting is the new features this redesign unlocks - more on those in the coming weeks!

May 11th 2020

Tabbed UI

I'm really excited to show off Visly's largest UI change yet - we've re-engineered the whole application, changing it into a tabbed experience instead of a multi-window one 🤩 This greatly improves the experience of managing many components at once, while also improving the performance of the app. This is the first of a few major UI changes we will be announcing over the next few weeks in our lead up to a more public product launch. Thank you to everyone who's provided us with feedback leading to these changes!

Performance

This week, we spent a ton of time looking over the performance of loading projects in Visly. We've been able to drastically improve load times for larger projects. Our own Visly project now loads 20x faster than in previous versions, and this is just the start of more performance improvements coming over the next couple weeks.

Further improved code generation

Building on our work over the past few weeks, we've again looked over the code being generated by Visly, and I'm happy to say that we've taken another leap forward in cleaning it up. By adding a few post-processing steps to our code generation pipeline, we've been able to clean up most of the code that didn't look hand-written. We are now very close to generating code without compromises.

Other fixes and improvements

  • Text layers now truncate with an ellipsis when their content does not fit their container
  • Made code generation an atomic operation to improve integration with hot-reloading
  • Fixed an issue where in some cases composite components would wrongly inherit parent styles
  • Fixed crash that happened when moving a project file while Visly is open
  • Fixed an issue causing Slots to be unable to be renamed

May 5th 2020

Cleaner code

You may recall in a previous update that we reduced the amount of code Visly generates by 80%. Now, we’ve gone back and cleaned up the code we generate further to make it more readable and concise, improving your understanding of the generated code and making your bundle sizes smaller. At this point, the code we generate is very close to handwritten code, but we think we can go even further. In the future, we're aiming to optimize the output to be even smaller than what you may have written by hand. You can read more about other ways we're prioritizing building trust with developers here.

Select & Slider primitives

This week brings two more primitives to Visly. You can now style and build custom sliders and select (dropdown) components directly in Visly. These are super flexible, so whether you want to build a select component with just an icon, some text and an icon, or something entirely of your own creation, it's now possible. These primitives also have built-in support for keyboard accessibility as well as the necessary aria tags, so they can be used by anyone.

Onboarding

One of the main things we're focused on as we approach a public launch is improving the way we onboard users, teaching you the basics of using Visly and showing you how to integrate it into your workflow. This week we've taken a huge step forward in this by adding an interactive tutorial that takes you though all the basic features of Visly. The coolest part is how, since the onboarding flow is built in Visly, you get to do a bit of onboard-ception, learning some Visly basics by editing the onboarding tutorial itself as you experience it 🤯

Other fixes and improvements

  • Fixed issue with renaming slot props
  • Fixed issue with collapsing style sections
  • Added ability to configure opacity of root layers
  • Fixed issue with background colors sometimes not displaying correctly
  • Added the concept of system assets (that come pre-bundled with Visly)

April 27th 2020

Transforms

With today’s release, you can now add a transform to any component or layer. This includes the ability to scale, rotate, or apply a translation. We’ve found this most useful when adding subtle hover effect on elements. You can see this in action on https://visly.app/blog - if you hover over a blog post, you'll see the component scales up ever so slightly. Transforms work great together with the transition support we added two weeks ago, allowing you to animate changes in transform across states and variants.

Radio groups

Last week, we added support for building segmented controls in Visly. While radio groups / buttons could be built using a segmented control, we received feedback that it would be great to have an easier way to build this common control. We heard you loud and clear (TODO: insert pun about radios), and from this week, we're happy to say that Visly has built in support for building and styling radio groups.

Dialogs & Popovers

You may notice that Visly makes heavy use of both popovers and dialogs to present controls. These UI patterns are great for giving you quick access to tools without cluttering the UI. However, Visly didn’t support building these, so we had to implement them the old fashioned way, with a bunch of css and boilerplate code. No more! Visly now supports styling dialogs and popovers, as well as the building of entirely custom modal UIs.

Other fixes and improvements

  • Added default styling for borders, shadows, and backgrounds;
  • Added ability to style dividers in segmented controls;
  • Removed unnecessary “Sub component” layer within segmented control;
  • Fixed issue where deleting layers would cause application to hang;
  • Fixed issue where dragging assets into Visly would not update existing assets;
  • Fixed issue causing progress bars not to be able to be embedded within other components; and
  • Fixed issue causing padding to be reset when toggling between individual and all padding options.

April 20th 2020

Segmented controls

The past few weeks we’ve been quietly working on new features to the core of Visly’s architecture to allow for you all to build much more complex components with built-in logic. The first template to take advantage of this new infrastructure is SegmentedControl. This control is highly customizable and allows you to build types of UIs that require the user to pick one of many options. Upcoming releases will include more templates making use of this infrastructure, like Dropdown and Select templates.

Container spacing

We recently published a blog post detailing what we have called Layout-isolated components. Layout isolation is all about making components reusable. This post explains some of the reasons why Visly doesn’t use margins. Spacer, which replaces margins in Visly, works really well 😊 However, we recognize that it can sometimes be annoying to repeat the same spacer between every child. To solve this, we have introduced spacing as a property you can style on any container. You can find it next to the new dropdown for picking a container’s flex direction.

Overflow styling

Initially, all components by default included an overflow: hidden style. This is generally a good default and for a long time we didn’t run into any problems with it. However, as we introduced overlay containers last week, we started getting feedback that developers couldn’t build badges and other UI that was partly overlapping or partly outside the container. We still think overflow: hidden is a good default, but we now allow you to enable overflow on any container with the click of a checkbox.

Other fixes and improvements

  • Fixed issue causing color alpha in variants & interaction states to be unable to override default values.
  • Fixed crash that occurred when quickly deleting two layers.
  • Fixed visual glitch where text inputs overflowed style sidebar.
  • Fixed issue that caused high CPU usage when multiple windows were open.
  • Fixed issue that caused the original component to be changed when editing a duplicated component.
  • Fixed issue causing fonts not to render correctly inside the project picker.
  • Fixed issue causing interaction states not to be visible when a layer wasn’t selected.
  • Added the ability to set an alt text value on image layers.
  • Added the ability to set layout properties on slots.
  • Updated icons for primitives and templates.
  • Added layout styles to components built from the button template to allow for more customisation.
  • Added the ability to insert child layers inside Input components, enabling more customisation.

April 14th 2020

Transitions

People have been asking us for this one for a while now! We finally have support for transitions in Visly. With transitions, you can control how layers animate between both interaction states and as variants. It's simple enough to quickly create a button that animates background color and powerful enough to animate between a collapsed and expanded list item.

Additional templates

Templates are a feature of Visly that allow you to build components with complex interactions, such as toggle buttons, tooltips, and checkboxes. We've added a quite a number of new templates this week, greatly increasing the amount of UI which can be built with Visly. Please continue to let us know what more you find missing. This week we have added Avatar, ToggleButton, Tooltip, and ProgressBar. We have also made great improvements to existing templates such as Input, Checkbox, and Switch. More to come next week!

Improved code generation

This version of Visly brings with it huge improvements to code generation. We have been able to reduce the amount of css and javascript we generate by over 80% in some cases. While we still have improvements to make in this area, we are now much closer to generating the same amount of code you would have written by hand.

Other fixes and improvements

  • Ability to set alt text on images
  • Fixed bug causing interaction states to be unable to override the alpha value of a color
  • Fixed bug causing spacers to display in the wrong size when using variants
  • Added ability to espace out of any edit modes
  • Fixed bug where min-height wasn't working in some cases
  • Implemented a new UI for updating to new version of the app, should fix any auto-update issues
  • Fixed bug causing some styles on the root layer to be unable to be set from code

April 6th 2020

Variant props

Since its initial beta launch Visly has supported the notion of variants, a way to make alternative versions of a component. Today we are expanding this concept to what we call variant props. With variant props you can define a component prop (either enum or boolean) which applies a set of styles to your component. For example you could make a large variant of a button, in addition to a secondary variant. These can this be mixed to create a large secondary button.

import { MyButton } from 'visly'

export default () => (
	<MyButton large type="secondary" text="Open Visly" />
)

Slots

We’ve added the ability for Visly components to define slots. A slot is a placeholder for a child component, or collection of children components. Using slots you are able to design containers in Visly and then pass it child components which you have defined in code.

import { MyComponent } from 'visly'
import { Button } from '../../buttons'

export default () => (
	// Slot named "rightButton". Acccepts any component
	<MyComponent rightButton={<Button/>}>
		{ /* Slot named "children". Works just like you expect! */ }
		<span>Hello Slots!</span>
	</MyComponent>
)

A slot is just another layer, add it like you would a text, image, or container.

Other fixes and improvements

  • Fixed issue where inputs weren’t being focused correctly
  • Fixed issue where styles passed from code weren’t correctly applied
  • Significantly cleaned up generated code to improve debuggability and reduce bundle size
  • Fix issue where props weren’t removed if a layer was deleted
  • Re-designed the styles panel, collapsing unused styles and making it clearing what styles are being overrides in interaction states
  • Added the ability to resize auto-sized components in preview mode
  • Added the ability to add shadows to layers
  • Added overlay layer which enables building z-axis stacked UIs. If you have been missing position: absolute, this is for you.