Avocode
Avocode makes it extremely easy for frontend developers to code websites or apps from Photoshop or Sketch designs. It's built by the same team that brought us CSS Hat and PNG Hat, so it's not surprising they've taken the exporting process one step further here. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD into Avocode with just one click.
Avocode quickly and automatically analyses your PSD or Sketch file and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard.
You can also click elements in the design, and copy and paste the code into a text editor of your choice. "It gives users everything they need for coding – a preview of the design, and access to all layers and export assets," says Avocode co-founder Vu Hoang Anh. "The best thing is that developers won't need Photoshop or Sketch at all. The current workflow really sucks and that's why we created Avocode."
We're not sure any app can ever replicate a developer. But we know of many hard pressed designers who happily use this to turn PSDs and Sketch files into interactive designs, which can then form the foundations for the website build. It costs from $14 per month.
Avocode is a development program used by developers in the transition from Sketch (PSD) to code. Rather than automatically generating sites for you, the platform provides users with a variety of tools that enables them to create personalized sites.
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.
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.
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.