large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://blog.avocode.com/avocode-app-now-integrates-with-adobe-xd-cc-2e684f1d179">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*qJPAKltOMXGCGN97.png" alt="0*qJPAKltOMXGCGN97.png"></div>
</div>
<p>We strongly believe that design hand-off should be smooth — no matter the design tool you’re using. Therefore we couldn’t be more excited to tell you that Adobe XD CC now integrates with <a href="http://avocode.com/">Avocode</a>. After months of a fruitful cooperation, we’re ready to release the first version of Avocode which supports the .xd file format.</p>
<h3>It’s time to add your Adobe XD documents to Avocode</h3>
<p>We wanted to bring you this integration as soon as possible. It’s packed with functionality that will help you turn designs to code faster and more features will follow soon. Let’s have a look.</p>
<ul>
<li><strong><em>At this moment, the integration only works on macOS and requires you to have Adobe XD CC (version 4.0 or newer) installed on your machine.</em></strong></li>
</ul>
<h3>3 ways to import a .xd file into Avocode</h3>
<p>Before you do so, please make sure you have saved the XD document.</p>
<p>1. <strong>Open Avocode and drag &amp; drop it into a project</strong></p>
<p>Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the .xd file.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*LSEGRse4wDV1B70K.png" alt="0*LSEGRse4wDV1B70K.png"></div>
</div>
<p><strong>2. Open Avocode and press +ADD DESIGN in any project</strong></p>
<p>Browse to select the design file you wish to upload. Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the .xd file.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*zYGMvnAhRb-6dvKK.png" alt="0*zYGMvnAhRb-6dvKK.png"></div>
</div>
<p><strong>3. Open the design in Adobe XD app and go to File/Export/Avocode</strong></p>
<p>Avocode app will be launched and import the .xd file into your project.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*NJTzPv6OJ-XUkBJc.png" alt="0*NJTzPv6OJ-XUkBJc.png"></div>
</div>
<p><em>Tip: You can also use a shortcut </em><strong><em>CMD + ALT + E</em></strong><em>.</em></p>
<p>Avocode imports the Adobe XD document by default. If you’d like to select artboards that should not be synced, place a dash “-” or an underscore “_” in front of the name of the artboard.</p>
<p><a href="http://r.avocode.com/adobe-xd-cc-helpcenter?utm_source=blog&amp;utm_medium=web&amp;utm_campaign=adobe-xd-cc-announcement">Learn more about how the Adobe XD integration works</a>.</p>
<h3>How to inspect designs created within Adobe XD in Avocode?</h3>
<p>As mentioned above, this is the first version of the Avocode with support for the Adobe XD file format, and some features are still under development. Nevertheless, there are many things that will ease your design hand-off, coding, collaboration, versioning and more.</p>
<p><strong>Measure sizes and distances</strong></p>
<p>Select a layer to find out its precise size and hover over other layers to see distances. You can also select multiple layers at once.</p>
<p><strong>Pick colors</strong></p>
<p>Switch to the Color picker tool and then click on any layer to automatically copy the color code. Web projects have colors pre-set as HEX, Android projects as HEX8, and iOS projects as UIColor. You can change the color code at any time between these codes and also to RGBa or HSLA. If you press and hold your mouse you’ll get a looking glass to select precise pixels to pick colors from.</p>
<p><strong>Export code from layer styles</strong></p>
<p>Avocode currently generates 10 different code languages from layer styles: CSS, Less, Sass, SCSS, Styled Components, CSS in JS, React Native, Android, and Swift. Once you click on a layer, it’s styles will be translated into code which will be displayed in the left sidebar. You can change the code language at any time. There are also multiple ways how to <a href="https://help.avocode.com/app-settings/app-preferences/code-preferences">customize the code output</a> and you can even <a href="https://help.avocode.com/assets-and-specs/get-code-and-styles-from-layers/variables-and-replacements-rules">create variables from certain properties</a>.</p>
<p><strong>Slice the design and export bitmaps</strong></p>
<p>You can use the Slice tool to cut out any part of the design and export it either as a JPG, PNG, or WebP image. You can move the selected area of the slice anywhere and also create multiple slices at once, select them by holding the SHIFT key and export them at once. To get rid of a selected slice area, just select it and hit DELETE.</p>
<p><strong>Share designs with a public link</strong></p>
<p>You can get a public sharing link to any design that has been uploaded to Avocode and share it with anyone.</p>
<p><strong>Comment on designs</strong></p>
<p>Everyone in your Avocode team with access to the design as well as people with the public link to the design are able to open the design in the Comment mode. There you can start a discussion either about the whole design (via General comments), or on a specific point (via pinpoint Annotations), or on a specific area (via area Annotations).</p>
<p><strong>Keep design versions from Adobe XD in sync</strong></p>
<p>If you drag and drop an updated document from Adobe XD above an existing design from Adobe XD in Avocode, it will be uploaded as a new version. Then you can <a href="https://help.avocode.com/projects-and-designs/design-organization/avocode-design-version-control-system">switch between the versions</a> chronologically — in both Inspect and Comment mode.</p>
<p><strong>Download original files</strong></p>
<p>Avocode also works as a cloud service. All Adobe XD documents that are synced to Avocode can be later downloaded.</p>
<p><strong>These features are now disabled for performance reasons and will be added soon:</strong></p>
<ul>
<li>Layer visibility toggle (hide/show layer)</li>
<li>Single or multiple layer export to PNG, JPG, SVG, WebP, and Base64</li>
<li>Scaling vectors for layer export</li>
</ul>
<p><em>Please note that all of these features already work with other supported formats (PSD and Sketch).</em></p>
<h3>What’s coming soon?</h3>
<p>We want to give you a fully-featured Avocode experience for the .xd file format as soon as possible. In the next version we’re planning to a <strong>fully-featured Inspect mode. </strong>We’ll be enabling the above-mentioned features that are connected to layers.</p>
<p>Thanks to our new Monroe rendering engine, you’ll be able to export all layers (even without marking them for export inside Adobe XD), scale vector shapes, hide layers, and export multiple layers at once.</p>
<h3>How to try the new Avocode integration with Adobe XD CC?</h3>
<p>All you need to do is to update your <a href="https://avocode.com/download">Avocode macOS desktop app</a> and get the latest version of <a href="http://www.adobe.com/products/xd/features.html">Adobe XD</a>.</p>
<p>If you’re new to Avocode, just <a href="https://avocode.com/signup">sign up</a> for a free trial and see for yourself if you find Avocode helpful.</p>
<p>Since this is a first version of Avocode with the support for Adobe XD CC, please let us know at team@avocode.com if you’re experiencing any troubles or got ideas for improvements.</p>
<div><a href="https://blog.avocode.com/avocode-app-now-integrates-with-adobe-xd-cc-2e684f1d179">https://blog.avocode.com/avocode-app-now-integrates-with-adobe-xd-cc-2e684f1d179</a></div>


Avocode app now integrates with Adobe XD CC

Avocode app now integrates with Adobe XD CC

Top Stories