Would be nice if you can upload your to . is a new design tool which is very similar to Sketch, but Figma is web-based, has Windows and Mac, apps and multiplayer editing.”, said the Avocode user who first suggested integrating with Figma back on Oct 10, 2016.

Ever since then we have dreamed of integrating with Figma and thanks to Figma Web API we’re super excited to tell you that the moment is finally here. Let us give you a quick tour of how the between Figma and Avocode works…

How to Figma designs into Avocode

Go to Integrations and select Avocode. You only need to enable the Integration once, and the option to export your to Avocode will always be there — no matter which Figma file you open.

Select one or multiple frames and go to the export button in the top right corner. Switch to the tab that says AVOCODE and click on the Export button.

The Avocode app will open in the next tab of your browser so you can select a project where the design should be imported.

If you’d like to know more about how to import designs, please visit our Help Center.

… and now it’s time to inspect your Figma frames in Avocode

There are many things that will ease your design hand-off, coding, collaboration, versioning and more.

Measure sizes and distances

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.

Pick colors

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 as well as RGBa or HSLA. If you press and hold your mouse, you’ll get a looking glass to select precise pixels to pick colors from.

Export code from layer styles

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 right sidebar. You can change the code language at any time. There are also multiple ways to customize the code output, and you can even create variables from certain properties.

Slice the design and export bitmaps

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 by selecting them while holding the SHIFT key and exporting them at once. To get rid of a selected slice area, just select it and hit DELETE.

You can also share designs, comment and keep versions in sync

Share designs via private or public links

You can share a public link with anyone or you can share a private link with people from your team only. You can also set the target of the link — either Inspect mode, Comment mode or the Preview mode. Learn more.

Comment on designs

Everyone in your Avocode team with access to the design, as well as people with the public link to the design, can open the design in 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).

Keep design versions from Figma in sync

If you change a Figma frame and then sync it back to Avocode, it will automatically be added as a new version to the previous design. This way your team always knows which version is final. Then you can switch between the versions chronologically — in both Inspect and Comment mode.

How to try the new Avocode integration with Figma

All you need to do is to log in to your Avocode account in the browser and open Figma.

If you’re new to Avocode, just sign up for a free trial and see for yourself if you find Avocode helpful. Avocode also works with Sketch, Adobe XD, and Photoshop files — on all platforms. Also, make sure to check out our upcoming major update Avocode 3.0.

Since this is the first version of Avocode with the support for Figma designs, please let us know at [email protected] if you’re experiencing any trouble or have ideas for improvements.



Source link https://blog.avocode.com/-a-new-integration-to-import-figma-design-frames-into-avocode-c295e783317a?source=rss—-3d381deaf83—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here