×

推荐一款高效率前端开发神器,功能太强大了 !

作者:anny2022.11.22来源:Web前端之家浏览:255评论:0
关键词:开发

当前端收到一张设计稿的时候,他们需要考虑非常多的问题。

而第一个摆在面前的问题就是 - 切图。作为连接设计师和前端的重要“纽带”,如果切图不准确,很容易导致最终的产品呈现与设计稿大相径庭。


1.png


随之而来的第二个问题就是 - 设计还原。页面还原度的高低,直接决定从产品需求到设计实现的程度是否被准确有效的表达。


2.png


如果你正在经历以上这些问题,那么请跟我一起继续往下看。

看看我是如何通过摹客这款工具解决这些问题的!

一、告别传统切图,样式代码一键复制

以前,为了交付设计稿,设计师需要根据不同设备导出不同命名方式、不同格式的图片,而前端则需要在页面中快速找到切图,然后下载这些不同命名方式、不同设备的图片,非常繁琐!


3.jpeg


现在,摹客的切图功能预设了iOS、 Android设备的尺寸、倍率、前后缀、格式等参数。无需设计师单独制作不同参数类型的切图,打包交付给前端了。


4.png


使用摹客切图也很简单,只需要将设计稿(Ps/Xd/Figma都可以)上传至摹客,前端就可以根据需要自主下载不同平台尺寸、不同倍率、不同格式的图片。

5.gif

甚至你还可以一键复制对应图层样式代码,提升开发效率。

为了提升效率,摹客还提供批量导出切图功能,选中多个页面点击鼠标右键,即可一键下载多个页面的切图。

6.gif

摹客这种交付设计稿的方式真的是救了很多前端的老命。曾经挨个切图→打包素材→打回改稿→……→挨个切图→打包素材→打回改稿的方式,终于可以告别了。

二、最全面的标注方案,省时又省力

针对市面上常见的协作平台来说,摹客的提供的功能是最全面的,国内头部互联网企业的使用率更是超过90%,所以跟着大厂走,绝对错不了!



7.gif

刚才我们解决了切图的问题,那接下来就是设计还原了。对于这一点,摹客主要通过自动标注和手动标注两种方式来搭配完成。

1、自动标注

摹客的自动标注能够自动识别设计稿中的切图,这样前端在进行页面布局的时候,只需把鼠标移动过去,就可以自动显示该模块的长宽、边距等内容。



8.png


同样,在进行多模块布局的时候,也只需要同时选中多个图层,就可以同时生成选中各图层间的间距,体验感绝对一流!

2、手动标注

除自动标注外,摹客还支持文字标注、坐标标注、尺寸标注、区域标注、颜色标注等手动标注方式。对于一些无法呈现的功能描述、交互方案,就可以使用文字标注来进行描述,避免前端理解存在偏差。

9.gif

并且它所有的标注方式操作都很简单,仅需要点击、拖拽、编辑,就能实现我们所需要的标注说明。

10.gif

除此之外,摹客还有一个很好用的功能,就是“举个例子”。当设计师希望页面可以有比较复杂的动效,或者想要加入视频,就可以选择引用来进行标注。你可以链接到具体的网页、文档、或者附件,对于我们的设计还原都有非常好的帮助。

12.gif

以上这些,都是我使用频率比较高的功能。而它所拥有的“绝技”的功能却远远不止这些:像百分比标注或者放大镜,可能平时不会用到,一旦用了,就会极大的提高我们工作的幸福感!

您的支持是我们创作的动力!
温馨提示:本文作者系anny ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/yidongtool20221122.html

网友评论文明上网理性发言已有0人参与

发表评论:

ad

最新留言

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

  • derv3

    现在已经很多开源CMS了,对于个人来说,自己开发难度极大。...

  • derv3

    Cookies很多用途吧...

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2