https://github.com/avocode/avocode-atom-integration

Integrate Avocode web app with Atom to inspect Photoshop & Sketch designs inside your text editor and to get code suggestions from layer styles.
https://github.com/avocode/avocode-atom-integration

atom-package

Last synced: about 1 month ago
JSON representation

Integrate Avocode web app with Atom to inspect Photoshop & Sketch designs inside your text editor and to get code suggestions from layer styles.

• Host: GitHub
• URL: https://github.com/avocode/avocode-atom-integration
• Owner: avocode
• Created: 2017-09-27T08:50:52.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-20T19:09:44.000Z (about 7 years ago)
• Last Synced: 2024-04-09T22:07:44.572Z (9 months ago)
• Topics: atom-package
• Language: JavaScript
• Size: 10.7 KB
• Stars: 9
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Avocode - Inspect designs and export code

> Integrate Avocode web app with Atom to inspect Photoshop & Sketch designs inside your text editor and to get code suggestions from layer styles.

![Avocode](http://telegra.ph/file/fb4e202daa84ad383a8e1.gif)

## What is Avocode?

Avocode is a tool for designers and developers to share, open and inspect Photoshop & Sketch designs. It works on the web and has also an offline desktop app for macOS, Windows, & Linux. It comes with a 14 day free trial, no credit card required. To try it out, please start your trial here: https://avocode.com/signup

### Features:

- View design inside your text editor

- Click on a layer and get code suggestions

- Measure sizes and distances in pt, px, dp and rem

- Export layers and design slices as PNG, SVG, WebP, & JPEG images

- Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer

### How does it work?

1. Press CMD/CTRL + SHIFT + P and type in "avocode" and choose how you want to open Avocode inside you Atom editor.

  ![Command palette](http://telegra.ph/file/2497031e05cc3d9e0dc92.png)

2. Click on a layer and the CSS displays in the Avocode code panel on the left.

3. Click back to your CSS style sheet and type for either a name of the selector or a specific property like width, you’ll get a suggestion which you can autocomplete by hitting Enter.

4. Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer.

### Supported code languages:

Less, Sass, Less, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android.

### Set code language you want to export

Click the cog wheel icon in the code panel (on the right) and select your preferred language.

![Avocode cog](http://telegra.ph/file/2483c9dbe254db2e72c7c.png)

To customize the code output (reorder code lines and hide properties) please [read this article](https://help.avocode.com/app-settings/app-preferences/code-preferences).