Code designs 2x faster.
Enjoy 7 days of free access to Avocode.
Beginner’s guide to Avocode
Open the Avocode app and master all of its features with bite-sized (under 1 min) videos.
1. Inspecting designs
How to inspect designs (overview)
Export layer styles to CSS, Swift, Android, and 7 more code languages
Customize exported code (CSS, Swift, Android, and more)
Export design layers as PNG, SVG, JPEG, and WebP
Adjust image asset format and resolution scale during export
Rename exported image assets
Batch-export image assets from a design
Edit export path for image assets (only in the desktop app)
Measure design layers and distances in px, pt, or dp
Show Layout grid, Regular grid, or Guides in Avocode
Get HEX, HEX8, RGBa, UIColor, & HSLa colors from designs
Inspect nested Sketch symbols with overrides in Avocode
2. Design file import & collaboration features
Design file import and file management (overview)
Change code language, color format, & measurement units for projects
Quickly preview designs
Search to find designs in Avocode
Move designs between projects (only in the Company plan)
Create subfolders in projects (only in the Company plan)
Open design screens from the Activity panel
Open design screens from Avocode in-app notifications
Open designs from a Slack notification in Avocode
Download any design file version from Avocode
Switch between design versions in Avocode
Switch between design artboards (screens) in Avocode
How to play design prototypes in Avocode
Hand-off Adobe Illustrator files via Avocode
Hand-off PSD files via Avocode Photoshop plugin
Specify comment priority with colors
3. Integrations - Connect Avocode with the tools you love
Dropbox - import designs to Avocode
How to link designs from Avocode into Jira
Confluence - Link and document designs & components from Avocode
Slack - invite your team into Avocode
Visual Studio Code - inspect designs side by side with code
Atom - inspect designs side by side with code
Embed Designs in Behance Projects
Embed Designs and Symbols in Notion
Embed Designs and Symbols on Medium.com
Embed Live Design Preview Iframes on the Web
Crash course - Code a web design with Avocode
Would you like to become an Avocode pro? Do you want to learn how to use it most efficiently while coding web front-end? Binge watch this free series in 65 min.
Introduction - Coding a website with Avocode
Lesson #1 - Start your design to code project
Lesson #2 - Overview of the Avocode interface
Lesson #3 - Export text and image assets with Avocode
Lesson #4 - CSS classes, Flexbox, BEM methodology, and REM units
Lesson #5 - Copy CSS code from Avocode to style your website
Bonus #1 - Inspect design next to your code with VS Code integration
Bonus #2 - Why use the Avocode desktop app
Case studies - Where does Avocode fit in your business
Get an idea how agencies, startups and other companies use Avocode in their day to day work and what value it brings them.
Shoto: We’re using Avocode as GitHub for designs
Manufactur: Avocode was the missing piece in our workflow
Best practices - Made by Avocode fans and users
Would you like to create an Avocode tutorial and get 1 month of subscription for free? Leat us know at team@avocode.com.
Export Adobe XD files to code with Avocode [PC & Mac] | English
How to use Avocode. Complete guide | Russian
Avocode in 13 minutes for layout and web designers | Russian
Avocoders on stage - Our talks and keynotes
Sit back and look behind the scenes of how & why we’re building Avocode. Are you organizing a cool meetup or a conference and looking for speakers? Let us know at team@avocode.com.
How we went from improving our workflow to building Avocode - Vu Hoang Anh (CEO & Co-founder)
How to save time of design hand-off - Matous Roskovec (Creative Lead)
How we went from improving our workflow to building Avocode - Vu Hoang Anh (CEO & Co-founder)
How we are building a universal design format - Matous Roskovec (Creative Lead)
Why making #100K upon a product release is not a measure of success - Vu Hoang Anh (CEO & Co-founder)
Avocode at 500 Startups Demo Day (Batch 17) - Vu Hoang Anh (CEO & Co-founder)