After 3 years from launching Avocode 2.0 we’re extremely excited to launch the Avocode 3 — the new generation of our product with new features that were requested 2,722 times. We're grateful for all these tips and your activity in pushing our product further!
However, you might be wondering, why did it take so long to build?
To offer such solution, we had to rethink the way how people access design files. To be completely independent on design tools while offering a way to access the design files contents on any operating system, we needed to build a new universal design format called Octopus and also a custom Monroe rendering engine. This project is finally at the stage when it can power the new Avocode.
The new rendering comes hand in hand with advanced codebase and significantly improved performance.
Design loading looks and feels different
- We have changed the way the design is rendered the first time you open it to minimize the number of requests on our server. Your designs now load up to 10x faster both on the web and in the desktop app.
- We have redesigned the design loading state, to show you a design preview as soon as possible.
- Sketch artboards are now processed in parallel, therefore when you want to access artboards that were already processed you don’t have to wait for the rest of the file.
Moving around the canvas is faster
- We have deployed a new version of our design view codebase, and the result is smooth panning, zooming and scaling.
1. New look with the Light theme
Before we dive into all the new features, we’d like to unfold our new UI look. Just press CMD/CTRL +, to open App preferences and choose if you want to use Avocode in the old Dark theme or the new Light theme.
We hope the new Light theme will give you more clarity and focus on the contents of your projects. If you open the Avocode Project manager (picture above) you can see that we’ve also added a new Activities panel that helps you track design changes and comments.
The new lighter look is accompanied by a facelift of our brand and new illustrations you can see on our homepage.
Once you decide which theme you prefer, let’s see what can you do with the new Avocode.
2. Import Sketch files without the Sketch app
Whether you’re on Windows, on Linux or macOS without the Sketch app installed on your machine, you can now import Sketch files to Avocode just by drag and drop.
It even works in the browser at https://app.avocode.com/. 💥
Once the file is imported, you can inspect all layers, and export any layer as an image asset. You don’t need any plugins or preset the layers as Exportable.
Sketch Symbols with overrides and resize rules are displayed correctly in any artboard so the developer can inspect them as any other layer. There is also an option to click through nested Symbols to access the master version without the override.
☝🏼 TIP: You can of course still use the *Sketch plugin if it fits your workflow better than drag & dropping files. Thanks to our rendering technology, the Sketch plugin no longer has to deal with too many actions and is significantly faster. (The plugin is automatically installed with our macOS desktop app.)*
3. Import Adobe XD files on any operating system
Thanks to the Monroe rendering we’re now able to directly import and render layered Adobe XD files on Windows, Linux or macOS — even if you don’t have Adobe XD app installed on your machine. It works just like with Sketch or PSD files.
4. Import Figma frames and turn them to code faster
We have worked with the amazing Figma team to connect Avocode to their platform. Thanks to their API it’s now possible to import Figma design frames to Avocode!
The integration works both from Figma web and desktop app and always launches Avocode web app so you can assign designs to a particular project. Then you can inspect layer styles, measure, pick colors, and take advantage of the Avocode code export in 10 different languages and customized code output.
Toggling and exporting layers is currently limited since we cannot receive full layers through their API. This feature might be added later on.
5. View Photoshop artboards together
Thanks to our improved Photoshop parser it’s now possible to display Photoshop Artboards together in one design view — both for inspecting and commenting on the design.
☝🏼FYI: We’re working on a way that would enable us to display Sketch and Adobe XD artboards together in one design view as well.
6. Import a list of variables to any project
If you’re using variables in your dev stack we’ve got good news. Now you can import a list of your currently used variables to any design and they will be automatically accessible from all designs in this project and synced with the rest of your team. Whenever a particular value of the variable — such as a color — appears in the design, it will be automatically replaced with the variable in your exported code.
You can still create, edit or remove variables, and newly you can also export them.
7. Align your pixels with the Pixel checker tool
Pixel checker is a new tool in the Inspect mode which allows you to expand the design in a separate transparent overlay to check it against the coded result.
This feature can help you align your pixels and code the design just as beautiful as the designer created it. Also, when you’re editing a website or a mobile app that has already been coded based on a new design iteration, the Pixel Checker will help you find the differences so you can quickly implement them.
And if you like to be fast, the Pixel Checker comes with some handy shortcuts.
8. Invite Guest users to access certain projects
A Guest user is a new Avocode team role. You can think of Guests as Reviewers.
This role is perfect for clients, colleagues, and stakeholders who only need to access specific projects, open designs and comment. You can invite up to 5 (Company plan) or unlimited number (Enterprise plan purchased after April 4th, 2018) of Guest users at no extra charge.
What is Avocode?
It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.
9. Adjust privacy and target of sharing links
Any Sketch, Photoshop, XD, or Figma design that you have in Avocode can be shared with others. Just open it, hit SHARE and set the target to either inspect, comment, or preview and the access to Only team or Anyone with the link.
If you’d like to share the design with people outside your team, just make the link public and targeting the preview of the design.
10. Mention others when you’re giving feedback
We have also added a heavily requested feature to enable you to mention other teammates in comments. To mention someone from your team, just use the @ symbol in any annotation or general comment and start writing the name of the person you want to mention.
11. Manage your design files with subfolders
To create a new project or new subfolder (only in the Company or Enterprise plan) press:
- CMD + SHIFT + N (macOS)
- CTRL + ALT + N (Windows or Linux)
- SHIFT + N (on the web). You can create an unlimited number of subfolders and pre-set their platform (Web, iOS, Android) that defines measurement units and color formats for all designs files in this subfolders. Also, you can specify a default code language for each subfolder.
All design files automatically inherit the settings of the subfolders, however you can always go back and change it for the subfolder or override it for each design in the Design settings.
… and a lot of little details hidden under the hood Besides this list, there are tens of small features that are barely noticeable but still improve the performance and make the UX more seamless.
Test it on a project to see if it works for you
It’s one thing to pitch new features, and it’s a different thing to see how they work on a real project.
If you’d like to plug the new Avocode 3 to your workflow and see if it speeds up your team’s work, just create an account and test all the features during a 14 day free trial with no strings attached.