Watch & learn from Avocode video tutorials

Find answers and learn from others. Look behind the scenes and become an Avocode pro just by watching videos. Popcorn ready?

Show me more

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)