恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
超全面的前端切图技巧!读这篇就够了
0.0°
2021-12-22 原创文章 经验/观点 举报 1221 4 1 0

工欲善其事,必先利其器!


相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~


当时就在想,如果能有一款神器,帮我解放切图这种“体力活”该多好!


于是,它来了~


摹客,前端必备开发神器


摹客作为新一代的产品协作设计平台,快速简单的智能标注和自动切图功能,完美地解决了产品开发流程中标注和切图的难题,将原本枯燥的体力活进行了极大的削减,而它所拥有的“绝技”的功能却远远不止这些:


1)自由的切图下载功能


摹客将几年前“刀耕火种”式的切图方式进行了全新升级,支持了Sketch、Photoshop、Adobe XD、Figma设计稿的上传、自动切图与标注,能帮助设计师大大提升设计稿交付的效率;


                        


摹客可以帮助我们自动换算同一切图在不同平台下(iOS/Android/Web)的尺寸,另外,在右侧面板中,也可以对切图尺寸进行自定义,快速调整切图大小;


       


除此之外,还可以一键切图压缩,告别切图文件的二次加工,体验更好;


                       


以上功能,摹客让前端工程师的操作,完全简化到了“一键到位”。


2)实用的格式转换功能


现今在网页上较常看到的图片格式包括:PNG、JPG、GIF,但有许多网络服务考虑到流量和速度问题,前端工程师需要将图片转为 WebP 格式;


如果让前端小哥手动去转化图片格式,这无聊繁琐的搬砖工作,估计分分钟会被迫离职~


而摹客,完美的解决了这个问题。导出切图时,只需在右侧面板中选择 WebP 格式就可以;当然,它也支持转换成其他格式,比如JPG、PNG和SVG。


                       


熟练之后,还可以把摹客当做一款图片格式转换器来使用。


3)全面的图片标注功能


标注这一块,可谓是摹客最擅长的了,国内独家的自动标注+手动标注,不怕设计细节描述不清;


                        


同时,前端工程师还可以使用放大镜来查看一些细微标注信息,保证设计稿的还原度;


                       


而且,智能标注无法展示的信息,摹客手动标注来弥补!除了智能标注外,设计师还可以在摹客中对设计稿进行“手动标注”,坐标、尺寸、颜色、文字,凡是你想重点传达的信息,都可以利用这几款小工具来描述;


                       


摹客的出现,可以说是把设计师从不堪重负的状态下解放了出来。


4)领先的设计规范管理


摹客设计系统是国内唯一支持【开发变量名】同步显示的产品。


设计师只需在设计资源库中设定好对应的变量名、组件代码;前端工程师就能在查看标注时,同步获取到这些信息,再也不需要费时费力去检索开发文档,纠结变量使用是否正确,大大减少了沟通成本;


                       


只要将设计项目与规范关联好后,对应的颜色变量、字体变量、组件代码会对应出现在属性面板上,轻轻点击就能复制成功,前款工程师就可快速引用到自己的代码中;


                        


当然摹客也支持一键导出样式代码,前端工程师一键即可复用,保持设计一致性;


                        


看来,快速提升设计师与工程师之间的对接效率,只需要一个“摹客设计系统”。


写在最后


摹客可为设计和开发团队消除低效环节,将前端工程师的时间花在刀刃上!


除了上述功能,摹客还支持在线原型设计、流程图、撰写PRD文档和设计说明文档等更多黑科技;不仅可以帮助设计师轻松搞定产品设计和交付,产品经理、开发人员也同样适用。有了摹客,设计协作难题迎刃而解,产品团队高效协作,工作效率加倍提升!


有想要体验的朋友们,可以直接点击下方链接,在线体验~

https://www.mockplus.cn/

Powered by Froala Editor

更新:2021-12-22

收藏

4人已收藏

  • 283

    作品

  • 125

    粉丝

  • 5

    关注

  • 产品经理如何用ChatGPT提高工作效率?给你15个例子!
  • 如何高效绘制SVG? 附5款设计师必备SVG编辑工具!
  • 如何撰写一份优秀的产品需求文档?看完真的不用加班了!
  • 最新最全产品经理常用工具清单
相关标签
UI设计标注切图

    猜你喜欢

      2021-12-22 原创文章 经验/观点 举报 1221 4 1 0

      超全面的前端切图技巧!读这篇就够了

      0.0°

      你确定要举报超全面的前端切图技巧!读这篇就够了

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年12月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录