1. Export any layer without “Making Exportables” (and yes, there is batch export)
Add variants and change image format and resolution
Select a layer, a selection of layers or a layer group and hit export. When it comes to single layers, you can also double-click.
- Everything is automatically exportable. No need to set layers as Exportables in Sketch, rename them in Photoshop or mark them for export in XD.
- Feel free to add as many variants of the exported image as you need.
- Choose different scale (choose anything up to @4x or type in your specific resolution) for each asset.
- Choose a different format (JPG, PNG, SVG, WebP) for each asset.
Rename layers and export multiple assets at once.
- Hold the SHIFT key to select multiple layers at once.
- Uncheck “Merge layers”.
- Feel free to rename each image asset, change its resolution or format.
2. Inspect nested Symbol components with overrides
Sketch Symbols look and behave like a normal layer — even with color, or text overrides or resize rules.
- If you need to access Symbols master, just click on Open Symbol and the master version will open in a new tab.
- Symbol Overrides work with designs that are imported directly to Avocode or with the Avocode Sketch plugin v. 50.0.0 and higher.
- There is no limit to how many nested Symbols you can have. You can click through them pretty much indefinitely.
3. Adjust the exported code output (in 10 languages)
While inspecting the design, click on the cogwheel below the code panel. Choose any of the 10 currently supported code languages and click on “Code settings”.
- Show/hide comments
- You can customize the code template by selecting (show/hide) or dragging the properties below to reorder them in the code output.
- Use the Advanced settings to: change color format or unit (CSS, CSS in JS, React Native); choose a selector type — class, id, element (CSS); change mixin libraries for Less (Less Hat), Sass (Compas, Bourbon), Stylus (Nib) and SCSS (Compas, Bourbon), wrap styles in a shape element or an item element (Android)
- To access these settings from anywhere, either press a CMD/CTRL + , shortcut or click on the avatar in the top right corner of your Avocode windows bar and select “App preferences” and switch to the second tab called Code.
- To customize the code even further, you can create or import a list of your own variables, that will be synced across all designs in one particular project.
4. Flexible Project settings and Design settings
We’re trying to give you as much flexibility as you need.
Change project settings
When you create a new project you can adjust the project settings, but of course, you can always come back and edit them later.
- Rename a project at any time.
- Change interface measurements units, color format, and code export language.
- Change default code language for all children designs.
Adjust Design settings.
All children designs automatically inherit project settings, however, you can always change them for each file.
- Rename the design file at any time.
- Change the measurement units, color format, default code export language (even on the level of artboards inside a design file).
5. Move designs between projects and subfolders
Select one or more design files, click on Move to and select a project or a subfolder.
- You can also create a new project while moving a design.
- Note that you can only move whole design files (not individual Sketch, Adobe XD artboards or Figma frames which would cause conflicts when syncing new versions).
6. Pre-set export path in the desktop app
Once your project is created, your Export path will be pre-set by default to your Download folder.
Change the default export path in the App preferences.
Change project export path for all children designs.
Change export path for any asset in the design
Even though you have a preset default folder for exported assets for the whole project, you can always change individually each time you actually hit export while inspecting the design.
7. Zoom in and out on the design canvas
Just hold CMD (macOS) or CTRL (Windows, Linux) and scroll up/down to zoom in/out.
- You can zoom smoothly by one percent at a time between 20% and 1000%.
- You can also enter a precise value like 76% in the zoom input in the bottom right corner.
Tip: Hold the SPACE key or use the hand tool to pan around the canvas.
What is Avocode?
It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.
8. Search designs and subfolders from anywhere
Whether you’re in the Project manager, Inspect mode, or the Comment mode, you can always press CMD + F (macOS) or CTRL + F (Windows, Linux) and start typing what you’re looking for.
- Switch between the currently open project or all projects.
9. Go straight to the design file from various places
Open design from in-app upload notification.
- Just click on the bell icon, and then click on any design file name that was recently uploaded.
Open design from the Activities sidebar.
- Open a project to see the Activities panel. If you click in the area of a particular notification you’ll be taken to the design file location (in the case of Sketch and XD files you’ll see artboards).
- If you click directly on the design artboard preview, the artboard will open in the Inspect mode.
Open design from a Slack notification.
- Make sure you have connected the Avocode project or your entire team in some channel in Slack. Whenever there is a new design version or a new comment synced to Avocode, you’ll be informed in this channel.
- Click on the Slack notification and you’ll be taken to the opened design file in the Avocode Project manager.
10. Hit SPACE to preview designs before opening them
Preview helps you browse designs without opening them. Select a design thumbnail in the Avocode Manager and hit the SPACE key, you will get a preview of the design without the need to open it.
- Switch between a full preview — “Fit to screen”, or an “Original size” preview.
- Use arrows to navigate between artboards.