Vev Design changelog
Vev Design changelog
vev.design

Style Panel Redesign and New Layout Features

abB0LBBSzT.jpeg

We're excited to announce a brand new Style Panel and new layout features that will improve how you build fully responsive designs 🎉

Perhaps our biggest release yet, we've introduced new features & improvements to the platform, specifically the Design Editor.

 

Update

  
  • The Style Panel has a new UI: We've brought in our design system, Silke to the Style Panel and plan to roll out further UI changes in the coming months
  • Constraints have replaced origin: A new layout feature, constraints will define how a element or frame is positioned within a section. It is fully automatic but can be manually overridden.
  • Automatic Sizing: An additional value to sizing, by specifying elements or sections to be auto height or width, the element will automatically size based on what’s inside of them
  • Style Indicator: The style indicator tool lets you see which styles are applied to an element: default, custom, or inherited [from the main layout]. By utilizing this tool, you can decrease the number of responsive adjustments needed and work closer to a truly responsive design based on a single layout.
  • Lock Size & Aspect Ratio: Ever had trouble getting the right size for a Youtube embed? Now you can ensure that elements like images and videos retain the same aspect ratio on any breakpoint. Simply, click on the lock aspect ratio icon or use the shortcut ↑ + L. You can also right-click to reveal a menu of popular aspect ratios.
  • Clip Content: You can now clip any element within a frame to avoid it extending outside its container. We recommend still sizing elements to be responsive within a frame but clip content will allow you to achieve more custom designs.
 

Improvement

  
  • Default Relative Sizing (%): When you first add an element to your canvas the position and width will be set to a percentage. This is to prompt best practice, responsive building from the start. You will be able to manually switch back to a fixed value like pixels (px).
  • New Safe Zone Design: You may have noticed the safe zone also got a makeover. With the light green background, you’ll be able to see the boundaries even more clearly as you build your responsive layout.
  • Remapping of Style Tools: We’ve completely redesigned the Style panel and remapped where certain tools are based on user tests. Don't worry, no tools have been removed but you may notice them in a different order now.
  • Improved Frame Padding: Now you can set spacing options like padding to frames!
  • Distance Indicator: We've introduced a new guide tool that will show you the exact pixel value when you position elements. This will help to ensure you have pixel-perfect designs.

To learn more about these changes, visit our Help Center and also watch the webinar.