技术圈首页
程序员
解决方案
聚合短信
APP下载
登录
注册
首页
文章详情
绝了!这前端开发神器,图片问题一网打尽
前端Q
|
44
2022-06-29 19:30
0
0
0
在职场上,你能帮对方省点事,不仅利于更高效的协作,也能建立一段良好的上下游协作关系,尤其是开发这种耗费脑力和头发的技术活儿~
所以今天就和大家一起唠唠,设计师可以从哪些方向减少开发的
工作(掉发)量
。
一、切图压缩
之前有位开发朋友跟我抱怨说,每次从代码中停下来去压缩动辄几百K的切图时,别提多烦了~
这个时候,就不得不需要一款切图神器 -
摹客
;
摹客支持Sketch、Photoshop、Adobe XD、Figma自动切图与标注,能帮助设计师提升设计稿交付的效率;
而且展开右侧面板中的折叠菜单,摹客可以自动换算同一切图在不同平台下的尺寸 - iOS/Android/Web;减少了手动切换平台的繁琐流程,就连代码都可以一键复制!
不仅如此,摹客平台还支持分析并压缩切图中的图像元数据,从而让储存数据所需的字节更少,让你下载的切图
瞬间瘦身
50%以上!
让你告别切图文件的二次加工,网站加载更快,用户体验更佳!
二、格式转换
在对接安卓客户端开发时,绝大多数情况都需要Webp格式的切图,网上支持Webp压缩的工具要么收费,要么导出的图片在开发侧无法正常显示;
如果让开发小哥手动去转化图片格式,结果可想而知:日益升高的发际线~
而摹客,完美的解决了这个问题。当然,它也
支持转换
成其他格式,比如JPG、PNG和SVG,如果切图的命名不规范,还可以直接在摹客进行修改。
虽然看似是一个微不足道的功能,但真正在开发过程中却是实实在在的痛点。
三、自动+手动标注
以前呢,设计师都是老老实实地手动做标注,导致整个页面都密密麻麻的......
摹客
「自动+手动」
的标注方式,可以帮助设计师轻松交付设计稿;
除了基础的多选标注、百分比标注等标注方式,摹客还可以将某个图层设置为百分比参照,当鼠标点击、hover设计图上的其他图层,会自动以该区域作为参照计算百分比,查看百分比标注更准确更便捷;
开发工程师可按需自由查看标注信息,手动标注可选择开启或关闭;下载多种设备尺寸的切图和导出CSS代码,不仅大大节省设计师后期标注的工作量,也提升了开发效率。
摹客的出现,可以说是把设计师从不堪重负的状态下解放了出来。
四、设计规范
摹客设计系统是
国内唯一支持
「开发变量名」
同步显示的产品。
设计师只需在设计资源库中设定好对应的变量名、组件代码;前端工程师就能在查看标注时,同步获取到这些信息,再也不需要费时费力去检索开发文档;
只要将设计项目与规范关联好后,对应的颜色变量、字体变量、组件代码会对应出现在属性面板上,轻轻点击就能复制成功,快速引用到自己的代码中;
当然摹客也支持一键导出样式代码,前端工程师一键即可复用,保持设计一致性;
看来,快速提升设计师与工程师之间的对接效率,只需要一个
「摹客设计系统」
。
五、专属福利
为了让大家获得更加专业的使用体验和更加贴心的服务支持,我们与摹客沟通了一个程序员专属福利:
摹客企业版激活码一枚
;
领取即可全方位体验这款强大的前端开发必备利器,同时支持在线交付Sketch/PS/XD/Axure设计稿,还可以享受7*12小时在线客服支持。
领取链接
https://www.mockplus.cn/get-idoc?hmsr
=
qianduan2
(复制到浏览器打开或点击阅读原文)
专属激活码
talks
0
赞
0
收藏
×
添加附言
附加内容, 使用此功能的话, 会给所有参加过讨论的人发送提醒.
回复数量:
0
暂无评论~~
请注意单词拼写,以及中英文排版,
参考此页
支持 Markdown 格式,
**粗体**
、~~删除线~~、
`单行代码`
, 更多语法请见这里
Markdown 语法
支持表情,见
Emoji cheat sheet
@name 会链接到用户页面,并会通知他
上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jp(e)g, png, gif
Ctrl+Enter
下载APP
前端Q
842
文章
2
获赞
关注TA
NEW
相关文章推荐
在页面关闭时,前端上传监控数据的4个解决方案
前端配置化真香~上班又多了60%的摸鱼时间
低调!收下这份前端面试小抄,7月入职妥妥滴!(24h删)
超好用的前端开发工具合辑
前端神器 | 没有设计师也能搞定界面!
关于前端主题切换的思考和现代前端样式的解决方案落地
分享一些前端优质的掘金小册,学完技术感觉已经超神了
【总结】1360- 试着降低前端业务复杂度