Introducing a new integration to import Figma design frames into Avocode
“Would be nice if you can upload your Figma design to Avocode. Figma 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 integration between Figma and Avocode works…
How to import Figma designs into Avocode
Go to Integrations and select Avocode.
Once you click “Avocode” the integration will be enabled. You only need to enable the Integration once, and the option to export your frames to Avocode will always be there — no matter which Figma file you open.
Then select one or multiple frames and hit CMD + SHIFT + E or go to File/Export.
👉🏼 NOTE: If the frame you’re syncing is on a different Page of the same Figma file, it will be added to a new design file in Avocode. To keep frames together in Avocode, we suggest having them on one Page in Figma.
Click on the “Image” dropdown and select Avocode.
As you switch to Avocode the frames you have selected will be listed below.
Click Export and Avocode will open in a new tab of your browser.
👉🏼 NOTE: If you have multiple teams in Avocode, make sure to switch to the right one first, and then sync the design from the start.
Select a project where you want to import this design.
NOTE: If you already had a Figma file with the same name in the project, the design will be added as a new version.
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 team@avocode.com if you’re experiencing any trouble or have ideas for improvements.
Avocode is a design hand-off and inspect tool for teams which are building next-generation Web, iOS, & Android projects.
