- “I love how fast it runs, and it’s a much lighter tool to use than Photoshop when you just need to quickly get colors or measure dimensions from design.”
- “Recommend this app to every web developer.”
- “Avocode is just the best for web development.”
… those are just a few wonderful quotes we had received from our customers last year. 🙏🏼
We have a special #channel on our Slack where we add these messages whenever they arrive to always remind ourselves why we should push Avocode further — the reason is you.
After a busy year we’re looking at even a busier one. But before I jump into that, I’d like to share some stats and interesting updates with you.
- We have released 36 updates, which translates to pushing an update into production on average every 10th day.
- Thanks to our amazing community we have squashed 660 bugs and made Avocode better.
- 10 new amazing people joined our team in Prague.
- Together, we’ve committed 16,753 times to our GitLab.
- We have completed 34 user requests on UserVoice (over 400 unique votes)
… and these 10 updates attracted thousands of new Avocoders
1. Moving Avocode to the web
Opening designs should be as comfortable as possible. So we have reworked our codebase so Avocode would work not just as a desktop app but also on the web. That means that you can upload PSD designs to Avocode in the browser (soon also Sketch and XD) and inspect them or comment on them without anything installed on your machine. Additionally, we have built new Team settings and were able to depreciate our old web environment.
2. Significant performance boost
Your time is precious, so we keep improving different parts of our codebase and our backend architecture to speed things up. For example, the design upload is more stable and noticeably faster. You can now share designs instantly after upload.
Our new API sends out smaller server request asynchronously instead of sending a big one at once. On average this change has sped up the process from 13s to 700ms for teams with hundreds of projects and thousands of designs.
Also switching between designs, Project manager and the Design view is much faster thanks to improvements in the integrations with the Electron framework.
In 2018, we’ll improve the performance and stability of loading and assembling designs thanks to a new Monroe rendering engine.
3. New Sketch experience
Adding designs is now much faster and more stable thanks to a new Sketch plugin, which is bundled with the Avocode app, and is installed automatically with it.
You can now sync artboards via a simple shortcut. Either CMD+J to upload selected artboards, or CMD+ALT+J to upload all artboards within the Sketch file.
We have improved the UX for uploading a large amount of Sketch Artboards. Each Sketch file now behaves like a folder within your project. When you open a Sketch file, you can either display all artboards or switch between Pages.
In 2018, we’ll introduce an option to upload Sketch designs directly — without Sketch app and also on Windows or Linux.
5. PSD to Sketch Design converter
We realized that the technology we’re developing for Avocode could have other use cases. So we’ve built the first ever PSD to Sketch Design Converter. During five months in production, it has converted over 40 000 Photoshop designs to layered Sketch files for companies like Nike or Nasa. Would you like to know how we built it?
6. New Comment mode
We have renewed the interface for your design conversations — the Comment mode. You can comment either on the whole design via General comments, or on the design canvas via pin-point or area Annotations. All comments are now editable.
You can enter the Comment mode:
- either from the Project manager by clicking on a little comment icon on a design preview tile.
- or via a button called COMMENT in the Inspect mode.
There is also a new slider to go between design versions. Also if you’d like to show your design to clients without all the UI elements, there is a new Preview mode which you can enter by clicking on a button in the bottom right corner.
If you solve a comment on a specific version, the thread will turn green and the dot or marked area won’t show up in upcoming versions.
In 2018, we’ll add an option to mention other team members with “@” in the comments.
7. Atom & VS code integration
We’ve built integrations for two of the currently hottest text editors on the market — Atom and Visual Studio Code. Once you install the Avocode extension into your favorite text editor, you’ll be able to inspect designs side by side to your stylesheet.
Not only that you can open any design and export image assets and inspect it just as you would in the Avocode app, but you’ll get code suggestions after clicking on any layer. For example, you click on a layer and start typing “c” and the editor will suggest you “color: #00BC87;”. In Atom you can even import a whole code snippet from any layer. Just click on the layer and press CMD/CTRL + SHIFT + P.
In 2018, we want to continue in this effort to save front-end developers more time.
8. Advanced image export
We have completely reworked our image export. First and foremost, our SVG export now exports even effects like Shadow on a circular shape, Inside & Outside border on a circular shape, Shadow line on a path, Angular gradient, Gradient angle. Here you can compare Avocode SVG export to Zeplin or Sketch. There is also an option to right-click on a vector shape and copy SVG code to clipboard.
We’ve also added image optimization. SVG image assets are automatically optimized with SVGO. The result? Lightweight vector file made only from the actual curves, no extra stuff like the editor metadata. The SVGO optimization can save up to 80% of file size. The optimization is enabled by default, but you can always disable it in the App preferences.
JPEG image assets are automatically optimized with MozJPEG. It reduces file sizes of JPEG images while retaining quality and compatibility with the vast majority of the world’s deployed decoders.
PNG image assets are optimized via UPNG.js — a lossy minification of PNG files, similar to TinyPNG and other tools. It performs color quantization using the k-means algorithm.
8. Better inspecting features
We have added new code templates so you could export layer styles as React Native, CSS in JS or Styled Components. Altogether there are 10 different code languages you can choose from.
Variables and Replacement rules now sync across all designs within one project. The sync is team-wide which means that all team members on all devices will see your changes and also can change what you have set.
9. Development of Monroe rendering
In 2017, we started building a completely new backend architecture that is now ready for extensive scaling. We have also rewritten our PSD and Sketch design parsers and improved our internal app-independent design format which we use to display all designs correctly. This also allowed us to completely rebuild our rendering engine. The new faster and more precise rendering is now being tested and soon we’ll launch it into production.
In 2018, the Monroe rendering will enable us to fully support Sketch and Xd design formats (that means upload and render them without design tools or plugins.
10. Redesigned brand & UI
It was about time to make our visual look cleaner and more consistent. Our Visual Designer Filip, crafted a new logo and unified our colors to a “riper” green color #00BC87. This reflected on our website as well as in the app interface.
What’s coming in 2018?
What a great year! I’m sure that 2018 will bring even more challenges and changes. For example, the upcoming updates in the Q1 will include Adobe XD support, an option to directly upload XD and Sketch designs on any OS without plugins, the release of the Monroe rendering, support of Sketch Symbols Overrides, Sketch Libraries and more.
Before you go back to work, make sure to check out our Product Roadmap.
Stay tuned and thank you for your support! 🙌🏼