Meet Design overview - the first step to design systems in Avocode
Product Update

Meet Design overview - the first step to design systems in Avocode

Matous RoskovecMatous Roskovec

What is a Design overview?
D-e-s-i-g-n s-y-s-t-e-m-s. Everyone is talking about them, but are they really that big of a deal?

To find out, we have conducted research specifically around Design Systems — we have collected over 400 responses from the design community and this is what we have found out:

  • Only 18% of respondents already use a Design System, while 54% of respondents currently use only a style guide (mostly in the form of a separate design file).
  • The top 2 things that teams do (or want to) document in style guides are fonts (90%) and colors (85%). To help developers create consistent stylesheets from the design and speed up the way they create selectors, we have built a new feature that we call the Design overview.

  • It's kind of a style guide on the level of the design screen (artboard).
  • It lists all fonts (including font-size) and colors that appears right next to the design.

Here’s how Design overview works:

  1. When you inspect an artboard (Sketch, XD, Figma) or a whole file (PSD) in Avocode, select the artboard in the layer panel or click out of the design canvas.Then you can pick one color or a font, click on “Show layers”, and all layers with this style will be selected both on the canvas and in the layer panel.
  2. If you hold the ALTkey and click on a layer in the layer panel, the design canvas will automatically reposition so you can see it.
  3. When you’re using the Design overview, you can also select a font and click View in Typekit or View on Google Fonts in the dropdown to get to the respective font file in the browser so you can copy the CSS rules to specify the font family.
  4. When you select a color, you can transform it to a code variable.

The Design overview currently works on the design file level only for PSD designs and for Sketch, XD, Figma it works on the level of artboards. Next, we’d like to expand this feature to the level of the file (for all formats), and then we’d like to add ever more sophisticated features to generate style guides and UI kits to help you quickly create code components from design objects.

But we want to do it right, so if you can spare 2–3 minutes, please fill in this survey. The more answers we have, the more relevant and helpful the feature will be for you.

Preview designs from Avocode on mobile devices

Nowadays, design hand-off, inspecting and coding is still tied to desktop based workflow. Therefore, the fully-featured Avocode experience (inspecting, commenting, file management) is available only in our desktop app (macOS, Windows, Linux) and in the browser (Chrome, Firefox, Safari). Optimizing the whole feature set for all devices, screens and across all browsers is not possible at the current stage. To keep moving forward we sometimes have to make difficult decisions like abandoning support for 32-bit systems that are being used less and less. On the other hand, whenever we see an opportunity to enhance the user experience, we do it. Here’s an example:

We have figured out a way to preview design files that you access via an Avocode link on mobile devices and in browsers that were unsupported until now. Not only can you look at the design, but you can also switch between its versions.

Why is this great news?

  • When someone sends you an Avocode based design via Slack or e-mail, you can have a look at it no matter the device and instantly understand the context of the conversation.
  • The method that makes this possible will make it very easy for us to build design preview integrations. Very soon we’ll be bringing you JIRA and Dropbox paper integrations that will be followed by many others so you can plug Avocode design previews into your favorite tools.
  • Next you will be able to add comments in both the mobile preview and in the embeded player integration.

While opening all design file artboards in one view is currently possible only for PSD files (for Sketch, XD, Figma it’s coming later this year), we wanted to give you a quick option to navigate between design screens.

To go to a different artboard (Sketch, XD, or Figma) in the same design file, just click on the breadcrumbs design name in the Inspect mode or in the Comment mode.

When it comes to PSD, PNG and JPEG files, the name dropdown will lead to other PSD, PNG or JPEG files in the same parent project or project subfolder.

There is also a new faster way to change versions.

Versions are no longer hidden in a separate tab in the left panel, but the version number now appears next to the artboard/design name. When you click on it you can see a list of all versions and easily switch between them.

The new version dropdown works both in the Inspect mode and in the Comment mode (there you can also use the version slider).

You know best what suits you best

If you'd like to give Avocode 3.1 a go, there's nothing easier than trying it out on a project. Let us know what you think.

Oh and if you'd like to help us build more sophisticated style guides and design system management in Avocode, just tell us more about your workflow, so we do this right.

Join 30K+ designers & developers by subscribing
to our monthly newsletter

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.