本文主要介绍了在腾讯云中设计器导出SVG的注意事项和优化点，包括导出设置、命名规范、分层、分组、使用画板、导出图片、内联样式、保留小数点、缩小和响应式设置以及字体和图像的优化。此外，还提供了关于Sketch和AI导出的SVG的代码示例和注意事项。
静电说：现如今设计工具越来越多，各种文件格式之间的转换似乎已经成为设计师小伙伴的“刚需”。今天咱们主要来讨论如何将illustrator文件顺利导入到Figma？
sketch是一款轻量、易用的矢量设计工具。尽管如此，在使用过程中有些功能还是未能满足，亦或者在设计或开发流程中有些工作还略显繁琐，所幸sketch有提供API供我们开发一些插件来解决使用过程中遇到的问题。本着能用工具解决就用工具解决的懒癌患者原则，我们这个课程就来学习如何开发sketch 插件。
lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片一样容易。上图即为 lottie 的 logo。
当今是个看脸的世界，一个app的颜值可能会决定用户的使用次数，icon的颜值更可能决定了用户是否回去下载，如果太丑，放在手机桌面都难看，那用户很可能就直接卸载了。所以漂亮的界面UI + 合理的用户体验UX/UE也会很大程度决定用户的黏性。最近由于公司的app准备美化一下界面，提升性能，所以我就想把美化过程中可以和大家分享的东西都整理整理，拿出来也和大家一起分享学习。这个“旧貌换新颜”我就写成一个系列吧，相信美化的道路是永无止境的！(场外音:自己又给自己开了一个巨坑)
SketchTool是一个与Sketch捆绑在一起的命令行实用程序，它允许您使用Sketch文档执行一些操作，例如检查它们或导出资产。它还允许您从命令行控制Sketch以执行一些操作。 安装 SketchTool 与Sketch（和Sketch Beta）捆绑在一起。你可以找到它。 Sketch.app/Contents/Resources/sketchtool/bin/sketchtool 建议您在Sketch中使用它，而不是将其复制到其他位置，以便始终使用最新版本（更新Sketch时更新SketchTo
这是本教程第1部分的延续。在本部分中，我们将介绍文本工具，对齐以及在Sketch中使用导入的矢量图形。
Sketch for Mac是一款功能强大、易于学习和使用的矢量图形设计工具，被广泛应用于UI/UX设计、网页设计和移动应用设计等领域。
有一个英语成语叫做一画胜千言（A picture is worth a thousand words），不知道大家有没有听过？它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相关的图片有时比起详细的解释，能够更有效的描述有关主题。——“一画胜千言”维基百科 如果我们要用一句话来说明图标的作用，没有比这个成语更适合的词了。本篇文章，我们就来聊聊关于图标的一些事情。 ---- 一个图标的生命周期（工作流程） 关于图标的生命周期，在我个人所经历的开发项目中，有以下两种： 第一种方式：图标库(选择阶段)
如今，UI设计工具越来越多，每个软件都有他特定的使用群体，但是，设计师不可避免的会遇到相互协作的时候。那么文件转换就成了一个大难题。
不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。 SVG的图层 首先我们来看SVG图层这个东东，相信只要使用过制图软件，比如Photoshop或者Sketch等，对于图层的认识
Boxy SVG mac版是一款Mac平台上的矢量图编辑器，Boxy SVG Mac下载支持通用的 SVG 和 SVGZ 格式，支持超过 100 个快捷组合键，能够让你制作出各种各样的矢量图。
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？这个问题我们在各大论坛也屡见不鲜：前端工程师认为设计师出了设计稿，那么相应的切图也应该一并交付；设计师则认为前端工程师给的要求太多太杂，不如他们自己动手来得专业。
Boxy SVG mac版是Macos上一款矢量图编辑器，支持通用的 SVG 和 SVGZ 格式，支持超过 100 个快捷组合键，能够让你制作出各种各样的矢量图。
这是官方的说明文字，起初静电按照文字表述，怎么也找不到手柄的位置。不过后来在不经意之间，看到了图层之间的手柄。
Iconjar for mac版是一款可以在苹果电脑MAC OS平台上使用的支持 SVG/PNG/GIF 三种图标格式的图标设计应用，设计风格质朴，功能实用，拖入式导入管理，Iconjar for mac可以设置多个“Set”组合来分类管理图标，使用起来非常的简单方便。
SVG 作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了 Web 中矢量图的代名词。 在网页中采用 SVG 代替位图有如下好处：
Sketch for Mac提供了丰富的设计工具和功能，包括多个布局和定位选项、各种符号库和样式，可帮助用户轻松创建复杂的矢量图形和用户界面。它还支持导出文件到多种格式，如PNG、JPG、PDF等，方便与其他应用程序共享和交换数据。
0写在前面 这篇文章主要讲利用SVG来实现web页面上的描边绘制动画的两种原理。同时涉及到从AI软件导出SVG的方法。 1案例效果 扫光效果和描边效果，如图： 2SVG的导出方法 首页需要设计师做一个相同或者等比文字矢量图，也就是AI文件。 用AI打开文件之后利用左侧工具栏里的“直接选择工具”，全选之后右击“转化成复合路径”，然后菜单里选择“将文档存储为SVG”。 这样导出来的就是path路径代码了。如图所示： 举例： 导出之后的代码片段，比如案例“hello”代码片段里有些属性是AI软件自动
静电说：如果有哪一款在线设计工具能把使用体验做到像在自己电脑上用Sketch或者Photoshop一样顺滑，那这个真的是非Figma莫属了。
静电说：最近攒了不少小伙伴的Sketch使用问题（也有设计上的问题），各式各样的，大部分我都在SketchChina.com中国社区做了解答。那么这篇文章，咱们就把这些问题汇总一下，看看里边有没有你想知道的。
写在前面 今天开始我将在这个板块进行sketch的基本使用进行记录，为什么记录这个软件呢？因为他是一款十分出色的设计软件，我们可以根据他进行设计很多移动端包括PC端的页面，同时呢他的学习成本要比很多设计软件的学习成本低很多，比如我们常见的ps，ai等他们的学习成本是很高的，不过他的学习成本低不代表他的功能弱，我在使用的时候其实一度觉得他很多地方比一些成熟的ui设计软件还强大，它还可以直接将设计好的icon进行css和svg代码的导出，那么前端的程序员就可以直接拿来用的，然后它还可以将阿里的svg图直接放到
Sketch是一款非常流行的矢量图形设计工具，其简单易用的特点吸引了众多用户的青睐。本研究对Sketch软件进行了深入探讨，探讨了Sketch的主要特点、设计理念和功能，以及如何使用Sketch完成矢量图形设计等方面的问题，最后总结了Sketch在图形设计领域的优势和应用前景。
Sketch，作为一款专为图标和界面设计而打造的优质矢量绘图工具，也是设计师们制作和完善公司企业内部设计规范系统不可或缺的设计工具。
这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠，勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik（PostCSS 的作者）和 Hax（贺师俊）。
怎么把 SVG 转成 PNG ？用 Chrome 吧，非常好用，还能设定自己想要的尺寸。
Sketch 中文版拥有简约的设计，调色板，面板，菜单，窗口，控件和功能强大的矢量绘图和文字工具；包含针对UI设计的操作和交互模式，让你设计图标、移动手机UI、网站UI等更加简单高效。
导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。
首先带来一个坏消息，Sketch63版本是最后一个可以运行在Mac OS 10.13（High Sierra）的版本，后续的版本必须在10.14（Mojave）及以上的Mac OS系统上才能运行，估计会有一堆黑苹果用户抓狂的。来看看静电的系统，黑苹果要升级咯~（要买新的AMD显卡）
在这充满网络促销活动的几个月，倍感压力的，除了你的口袋，是否还有程序员的发量呢？每年的双十一、双十二购物狂欢节，各大电商平台都会上线让消费者充满购买欲望的活动页面，而这些活动页面大多都是静态页面，只是为一些商品提供一个入口，UI设计小姐姐设计完页面之后交给前端程序员，然后程序员就开始无聊繁琐的搬砖。如果有一款神器，可以直接将UI小姐姐的设计稿转换成页面代码，是否能让广大前端开发者大呼万岁？
在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。
Paper.js 中的项目对象通常被称为文档：它是顶级对象，包含场景图中的所有项目。由于文档一词在浏览器上下文中已被使用，因此它被称为 Project。
随着移动互联网的快速发展，用户的需求也在不断地增大，这对产品经理还有设计师的考验是越来越大。市场环境的变化让我们深信为快不破，但是一个产品的产出需要各个环节的紧密配合，但往往在产品输出过程中，由于分工不明确导致的形形色色的问题，其中的一大痛点就是产品经理，设计师和工程师之间面临着协作难，工作效率低的问题。以前，设计师需要一遍遍的手动切图配合工程师一次次的改图，如今借助着万能的sketch标注插件，提前下班再不是梦！！
注意：对于中文汉字和日文汉字我根据具体情况交替使用它们。
协同设计是当下技术行业技术更新的一个重要方向，也是设计类工具软件发展的必然趋势。它，不单是一个设计类的专业术语，更是一种商业化的服务模式。
最近，一个名为「Pose Animator」的项目人气暴增，打开以后，我们发现这又是一个能让人自娱自乐，并且丝毫察觉不到时间流逝的神奇工具。
使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。
官方文档：https://webpack.docschina.org/loaders/url-loader/
最近在5G冲浪的时候看到一个做UI的小姐姐分享工作日常，其中有个画面是她的电脑桌面，像这样：
在游戏界面的搭建这一块，行业内有很多成熟的工作流，有像animate.cc和create.js这种完全把界面和交互交给设计的方案，也有像FairyGUI这些面向设计师的跨平台的界面编辑器，有基于引擎界面编辑器的组件化方案，也有利用引擎的插件系统把设计背景图引入作为布局参考的便利方案。从库的开发到封装的界面编辑器，其实我们的游戏界面搭建效率已经很高了，但是从设计稿直出，业内也一直没有停止过尝试，一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件，cocosCreator这块的周边还比较少，异名这次就利用sketch的工具链来实现一个sketch2cocos的界面搭建插件。
一、web font web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体： a）、安装好操作系统后，会默认安装一些字体，这些字体文件描
优秀的作图工具有许多，例如文本绘图工具 PlantUML，流程图设计工具 Draw.io，还有专业绘图工具 Sketch 和 Figma 等，但是最推荐的还是手绘风格的绘图工具——Excalidraw。
最近，我司的设计管理人宣布我们要从Sketch搬家到Figma啦。 Yay! 真香！ 搬家同时，我们也开始了使用名为 Magicul 的工具。 这个工具会定期将所有的 Figma 设计稿备份为 Sketch 格式。 有这个必要吗？ 问：你不知道 Figma 有版本管理这个功能吗？ 答：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
