Front-end cutting is an indispensable part in the process of front-end engineers restoring the design draft. But who does the chopping work? This is a common problem we see in many forums: front-end engineers think that if the designer has a design, the corresponding cutout should also be delivered; Designers think front-end engineers make too many demands and are not as professional as doing it themselves.

However, with the development of professional graphing tools, graphing work has evolved from “slash-and-burn” a few years ago to today’s “one-click”, and the “conflict” between designers and front-end engineers has gradually dissipated. So in recent years, the rise of a number of front-end cutting tools, which can be called the real “cutting artifact”? Let’s take stock.

Copy the guest

The disputes between front-end engineers and designers on cutting diagrams are often caused by the designer’s inability to complete the cutting diagrams according to the requirements of front-end engineers, such as images not compressed or merged, and non-standard naming, etc., so the front-end still needs to reprocess the cutting diagrams. With copycat, the designer only needs to mark the location where the image needs to be cut, and does not need to specify information such as format, size or compression rate. Developers can quickly complete cutting map Settings and download according to their own needs. In addition, the cut diagram is delivered with the design draft, which also reduces the chance of front-end errors. In addition to annotating and cutting drawings, Moke also provides product development teams with functions such as high-fidelity design, design draft delivery, whole-process collaboration and design specification management.

Functional advantages:

  • Support for download of Figma, Adobe XD, Sketch and Photoshop design Sketch;

  • Support free platform switching (iOS, Android, Web) and selection ratio;

  • Support to download cut map volume compression of more than 50%;

  • Support download PNG/SVG/WebP/JPG cut map;

  • Support to download multiple pages at the same time;

  • Support to set android map folder name;

  • Support automatic conversion of different platform sizes.

★★★★★ ★

Avocode

Avocode is the only one of the five tools in this presentation that allows you to annotate and slice your design in Adobe Illustrator. Avocode also supports cut-out downloads of Figma, Adobe XD, Photoshop and Sketch designs. If you do not have a design tool, you can also directly drag the design file to the web page to open, view and reuse the relevant code information, download the cut map, etc. Avocode is certainly a good product to experience for its features alone, but the high price tag has put off many designers. There’s a 14-day trial period after you first sign up for Avocode, so if you’re really strapped for cash, you can also sign up for multiple accounts to experience the power of Avocode.

Features:

  • Supports running on macOS, Windows and Linux;

  • Supports iOS, Android, and Web.

  • Design files can be opened directly in a browser without downloading design tools.

★★★★★ ★

Cutterman

Cutterman is one of the most popular Cutterman plugins in the past few years. It can switch between different sizes of cutters on iOS, Android and Web platforms, and supports Photoshop and Sketch. Plug-in interface is more “stupid”, platform switch, size Settings, format Settings and other buttons are directly laid on the home page, you do not need to remember a bunch of Settings or operating rules, novice can also quickly start. However, with the rise of design collaboration tools, Cutterman has become a part of the process of design collaboration. Cutterman’s single function of exporting cutters is obviously a little behind the pace of development.

Features:

  • PNG/JGP/TIFF/SVG/PDF/EPS

  • Support batch output of multiple layers selected;

  • Support output of fixed size ICON;

  • Automatically switch between Android and ios platforms;

★★★

Easy Cut

A few days ago, many public accounts were recommending a plugin. Out of curiosity, I read about this plugin, which claims to be the “best photoshop cutting tool” – Easy Cut. The best feature of this plugin is the ability to freely draw cut paths or add guide lines, and quickly and accurately divide layers into one or more layers. Easy Cut is relatively simple and has fewer scenarios than other plug-ins that can switch between iOS and Android.

Features:

  • Support for automatic clipping based on events (drawing single point paths, etc.)

  • Can run in background (use clipping when panel is closed)

  • Preserves layer styles and Shapeattributes

  • The option to add a name appendix is supported

  • Editable shape cutting (turn merge Path Component off)

  • Option to rasterize smart objects before cutting

★★★

zeplin

Zeplin is one of the most popular design collaboration tools in the last few years. It allows you to cut your designs for Figma, Adobe XD, Sketch and Photoshop with one click. Zeplin also supports some team collaboration features for small to medium sized teams. Zeplin does not currently have a Chinese interface, which is not a very good experience for designers and developers who do not speak the language. The high cost also becomes a barrier to experience.

Features:

  • Support for download of Figma, Adobe XD, Sketch and Photoshop design Sketch;

  • Support free platform switching (iOS, Android, Web) and selection ratio;

  • Support setting cutting background;

  • Support to download multiple sketchboards cut map;

  • Support PNG and SVG download two formats.

★★★★ ★

summary

Through the analysis of the above five graph cutting tools, it can be seen that the single-machine graph cutting and exporting scheme has gradually been phased out of the market, and the use of collaborative platform to complete design delivery has become the mainstream without debate. Therefore, it is suggested that students in the product design and r&d team can experience the delivery function of collaborative platform as much as possible. If you don’t want to invest in the early experience process, there are also collaboration platforms like Moke that support free use by teams of 100 people. The easy-to-use front-end diagram cutting function is equipped with a design collaboration platform, which enables front-end engineers to better understand the design draft and the designer’s intention during the process of downloading the diagram and restore the design draft, thus achieving the highest efficiency.