{"id":13801582,"url":"https://github.com/avocode/avocode-atom-integration","last_synced_at":"2025-04-30T18:11:11.010Z","repository":{"id":152676885,"uuid":"104995128","full_name":"avocode/avocode-atom-integration","owner":"avocode","description":"Integrate Avocode web app with Atom to inspect Photoshop \u0026 Sketch designs inside your text editor and to get code suggestions from layer styles.","archived":false,"fork":false,"pushed_at":"2017-12-20T19:09:44.000Z","size":11,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-09T22:07:44.572Z","etag":null,"topics":["atom-package"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avocode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-09-27T08:50:52.000Z","updated_at":"2019-01-11T15:38:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"9e45b328-ac4a-44b0-8fc8-b63cf1b6ecb3","html_url":"https://github.com/avocode/avocode-atom-integration","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Favocode-atom-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Favocode-atom-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Favocode-atom-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Favocode-atom-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avocode","download_url":"https://codeload.github.com/avocode/avocode-atom-integration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758170,"owners_count":21638989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atom-package"],"created_at":"2024-08-04T00:01:24.643Z","updated_at":"2025-04-30T18:11:10.966Z","avatar_url":"https://github.com/avocode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Avocode - Inspect designs and export code\n\n\u003e Integrate Avocode web app with Atom to inspect Photoshop \u0026 Sketch designs inside your text editor and to get code suggestions from layer styles.\n\n![Avocode](http://telegra.ph/file/fb4e202daa84ad383a8e1.gif)\n\n## What is Avocode?\n\nAvocode is a tool for designers and developers to share, open and inspect Photoshop \u0026 Sketch designs. It works on the web and has also an offline desktop app for macOS, Windows, \u0026 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\n\n### Features:\n\n- View design inside your text editor\n- Click on a layer and get code suggestions\n- Measure sizes and distances in pt, px, dp and rem\n- Export layers and design slices as PNG, SVG, WebP, \u0026 JPEG images\n- Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer\n\n### How does it work?\n\n1. Press CMD/CTRL + SHIFT + P and type in \"avocode\" and choose how you want to open Avocode inside you Atom editor.\n\n  ![Command palette](http://telegra.ph/file/2497031e05cc3d9e0dc92.png)\n\n2. Click on a layer and the CSS displays in the Avocode code panel on the left.\n\n3. 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.\n\n4. Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer.\n\n### Supported code languages:\n\nLess, Sass, Less, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android.\n\n### Set code language you want to export\n\nClick the cog wheel icon in the code panel (on the right) and select your preferred language.\n\n![Avocode cog](http://telegra.ph/file/2483c9dbe254db2e72c7c.png)\n\nTo customize the code output (reorder code lines and hide properties) please [read this article](https://help.avocode.com/app-settings/app-preferences/code-preferences).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Favocode-atom-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favocode%2Favocode-atom-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Favocode-atom-integration/lists"}