如何在公司内部推行Figma.docx

(H-工作流程对比：湍嬴n-9上加竹伏maQ«««F溜力-F-TWMRW丹夏02-具体问题分析：令Ja产&1,AXUre画原型，原嬖交付给设计，需要文件/图片传输，若原型有如潴改动，需 要多次储箱文件1,fgma原型设计，和设计研无砍衔接,不再需要大文件传徒1,设计师之间的文件互通过程比较麻烦，A设计箭想要B设计怖的源文件，通常采用最亶接的文件传输方式，并且改一次 需要传输一次2,设计行互通性比较建.共网起来时长 比较长3,文件的迭代多，找文件困建1,可以崎时介入，实时协作，可以实时评论，不再需要大文件传懒2,把设计¢5从孤岛的设计模式转变为公开的多人胡作3,不限时的版本管理功能设计稿1,沟通比较麻烦，需要大文件传输，耗时族内存（多次修改多次导图）2,修改后同步比较麻烦，每一次如况修改都需要同步上修兹湖,耗时也比较长1,及时集接分享，实时沟通2,设计耦存在云速，不疑费本地内存3,存在历史版本,根本迭代方便3,设计的本身存储文件比较院空间，容爨善失和文件损坏或者版本不兼容1,要用到什么元素则It要切一次图，修改设计图也需要切一次阴，过程比较家顼和用时比较长，效率较低1,无需切图，所见即所得，开发可以宜接下栽使用超海1,更新一次设计稿，需要便用播件同步到蓝湖1,源文件膻接实时更新,无需再次播件更新2,大文件同步时长比较长，小元素修改也需要更新蓝湖，流程比较繁琐开发1,经常出现超潮和设计稿不同步的现象出现,或者需要打得设计部更新is湖健接1,保存一次仅接警于源文件标注+切图，且设计稿实时更新，设计代码也可通接复制1,文件存档比较耗内存，交接时工作庞大1,无需髭费本地内存，保存在云端2,Ia时在云筵同步整理OS-Figma优势总结什么是Figma?Figma是一个基于浏览器的协作式UI设计工具，从推出至今越来越受到UI设计师的青睐，也有很多的设计团队投入了Figma的怀抱。基于浏览器的好处？1，无需保存，实时保存2,只需要一台电脑(win/Mac),无论在哪里都可以打开你的设计图，开始工作。#安全性1, figma也有桌面应用，线上的Egrna文件也可导出存在本地2, Figma支持历史版本恢复。S,Figma所有的基础架构都分布在3个AWS数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作。4,获得了红杉资本领投的4000万美元C轮融资# 不卡顿SketCh在处理大的文件时，经常会出现卡顿，或者直接死机的情况，最坏的时候，文件没有保存，设计图需要重新画的经历。但figma则不一样，除了最初的网页加载和部分图片加载需要点时间外，Figma在处理速度上真的可以说是碾压Sketcho# Figina功能长久以来，设计师只有SketCh是不够的我们还需要像【蓝湖】这样的设计交付工具，帮助我们把本地文件变成一个个开发可以看得懂的网址链接：还需要像Abstract这样的版本管理工具，帮助我们更好的管理乱七八糟的设计文件；甚至还需要像DroPbOx、GoOgleDriVe这样的云盘来存储、同步，存储后还需要整理，花费大量精力。但有了Figma,这一切变得简单了许多。一个网址，一切在握。更没有中间商赚差价。Figma可以完成Ul设计+原暨设计+设计标注+云同步+项目历史记录+实时讨论÷实时分享+团队组件原+WebAPI+moreQUI设计隙型设计设计标注O云同步项目历史记录实时讨论薇实时分享团队组件由守WebAPIMoce# 更方便1,没有传统文件的概念（不用来回传文件）2,一个项目不需要被拆分成若干个文件，每个人负责哪个模块只需要在对应的page下设计3,多人协作，只需要切换page,如果要复用对方的页面样式，直接复制粘贴到自己的Page即可。这样就大大减少了设计师内部协作时的沟通成本。4,无论在哪里，只要有电脑，有网，就可以打开设计稿5,任何人看到的设计稿永远是最新的DDrahs91张三李四王武李莫某#素材整理与共享列如我们的视觉同学，需要整理素材，会遇到的问题1：win没法打开sketch文件2:素材携带不方便，需要拷贝，经常会出现本地文件和硬盘文件不同步，需要重新整理8：太大的SketCh素材文件卡顿4:文件共享速度过慢#更强大的组件首先对比一下，两者调用组件的方式±+! ® - XSketCh组件化视觉呈现Kxx>XXXXX > Kxxxxxkx > xxxxxxxFigma组件化视觉呈现KWffl,同时也就供了傅媒NSkM6跳楼化方式快捷"OPtiOn*2#即拖即用所有组件即拖即用，配合组件搜索功能，更加高效的完成设计工作OQCj修改密码#高效创建组件我们可以在任何Page下创建组件，而不必转到单独的页面进行编辑。在当前页面编辑组件可以实时预览,界面的设计效果Figma可以在任意Page下创建组件，实时修改，实时预览SketCh只能在控件页面下才是组件#灵活的子组件子组件更加灵活可变，除了位置不可改变外，颜色，边框，圆角等CSS都可以改变。就拿最简单的按钮举例：#自动布局自动布局是指通过预先制定规则，使子级元素在新增或减少时父级尺寸跟随规则自动变化，或父级大小发生变化时，子级元素跟随规则自动变化。利用自动布局可以极大的缩短重夏工作（节约间距计算、元素对齐调整时间），还可以将我们的Ul设计稿框架化，帮助我们站在开发视角画界面，有利于提升界面还原度。毫不夸张的说设计师的日常工作只有20%的时间在发挥创意解决问题，80%的时间都在重复一些机械操作改颜色、改间距、改排列、改命名改改改改改，保存修改保存修改保存修改保存，最后还要整理文件同步文件，这些都让整个设计工作冗余、低效还无趣。内边型（四边稔除改）内险元族列齐方向D文件名称带身方向40子®间能内边度(Qiaa-w)#布局网格Figma可以给frame和组件添加栅格（网格、行、歹J）。添加栅格后可以帮助我们快速对齐元素，当我们将元素和栅格对齐后，配合拉伸和缩放时，frame内的元素会跟着设置好的规则随栅格进行变化，更方便我们去做适配。我是一个大标题如果Swl两行就是这样子的#拆分组件库-（跨文件共享）将原本包含属性样式、图标、基础组件、业务组件等一个庞大的组件库文件按类拆分为几个独立的组件文件，一方面Figma通过TCamLibrary共享组件非常便捷，即使拆分文件也不会带来任何额外的负担，反而更加方便后续的拓展，另一方面分类后的组件库各司其职更加清晰明了。庞大的组件库文件拆分式标邸样图基样式组件图标组件基础组件业务组件颜色线条姒幅家人特定卡片文字块状反馈类业务相关阴影图片类毛坡璃展示类各个组件各司其职-也方便拓展列如：现在属实每个人的有自己的81旨隹理.我f不是可以Ie-箜黛奈的83标都簿步到BB标坦件库.方便共享与使用#图标组件库SketCh的图标库存在导出png,或者ai导入SketCh,经常存在不保留安全距离，而Kgma则不会出现在ai中画好图标，批量拖入fma,配合批量创建组件的功能，可以很快搭建出图标组件库，在后期的开发过程中，开发直接导出图标的SVg格式即可，不需要做多个尺寸的图标。组件管理当具flef小的REnn另一个收大妁Ke 自动成为后者0于元蠹.Hfi不需采用的皤自叁名蛇创建组件可以Ie制参ra标，一次性名方个的蝌件智能排版快速E京札T酒括快速整理推版刃的0多手动时阐（2BB；.i!. 1 IdQ（2） E3SketCh组件库Figma蛆件库#有趣的图形自带ArC工具，变成一些很酷的其他图形# 可视化窗口项目分类明确，可以快速根据分类找到文件，有没有一种打开蓝湖就可以编辑的即视感。Flgma苜页蓝湖首页# 高保真可交互原型Figma可制作高保真的交互原型，无缝完成从设计到原型演示的切换。它比SketCh生硬的页面跳转友好，适合demo展示。在手机上预览效果可用FigInaMirror。支持导入gif文件，演示更加灵活。# 与前端协作每个Figma文件都有代码模式，工程师可以在其中查看设计文件。工程师能在设计图上获取标注，并自行导出所需资源（包括CSS、iOS、Android样式）MypostsO*4m.5：2：» :.f.aU,:KM*l:|M；mrml.fM-3I:，； 11M-M1M ： l;# 丰富的插件环境地址：https:/plugin.figina.cool/o比如：图表、图标库、自定义地图、自定义插画，设计系统等优秀的插件，帮助我们快速的工作。插件的开放时间大概是2。19年底，短短时间，插件增长的速度非常快R9mBBSTSnfflflKGOMrtBQImmM安利一些我感觉比较好用的插件AutoflowAUtOfIoW可以让设计师直接选中两个元素后自动画上流程线，省去了画流程图过程中标注箭头的繁琐工作FIGMACn汉化插件FigmaCN中文E»件.ait«AJ*»IS«管CwnWSrrBBM*al手机预览插件FigmaMirrorVectarySDVectary31）可以将3D元素插入Figma中，更有趣的在于你能将的设计稿置入预设的可交互的3Dmockup后导出图片到Figma中，从此包装设计稿不用愁找不到适合的mockup了，自己动手丰衣足食。04-两者缺点Figma缺点？SketCh缺点？1、如果要转平台，需要从头开始移植2、快速稳定的体验需要科学上网不科学上网：a.首次打开时间在56分神(和网通有关)，再打开时间在1分钟左右bt移交开发也可借助第三方猫件类似E湖等工具1、SketCh需要不断更新和整理文件2、很大程度上依WJB三方工具来填补Sketch的空白(版本控制、原型、向开发交付)Sketch(Design) ÷Abstract (Version) + Zeplin (Handoff) + InVision(Present / Prototype)3、我们用网盘同步设计时，大的项目使Sketch文件 的整理和排序容易混乱4、我们的文件命名约定和版本控制难以得到控制向开发 交付需要通过第三方插件或工具，多余的步骤成本5、文件一大就卡6、姐件不灵活，难以整理，工作效率低7、版本不兼容05-团队学习成本这两种工具几乎具有相同的功能，相同的快捷方式和相同的结构。如果会使用其中一个，另一个往往也能直接上手。并且flgma性能体验更加流畅Figrna界面SketCh界面06-哪些公司在使用国外团队有TWittCr、Microsoft>Dribbblc、Airbnb、GithUb等;国内团队有阿里、腾讯、字节跳动、网易等。TencentIfSiH腾讯还研发了CoDesign插件，可以与TAPD需求单关联设计稿。持在线导入预览设计稿、自动生成设计标注，批量下载切图素材、灵活调用图标库、素材库三SDRSign一站式设计协作平台厢讯自研免费设计协作平台，自动标注一键切图。7-价格对比fgma收费计划免费版本 价格：免出 无限瓷看者 无限编辑塞 最多3个文件每个文件多3个page,无数的画布1个项目专业版20个地81者价格：20*80*12=19200元查看者免费无限项目自定义权限可以勒文件共享组件摩Sketc收费计划企业版教育版2OS88I者价格：20*287*12=68880元登，占辿费包含专业版本的所有功能统计瞥理箸高级功能（如：设计系婉分析,共享字体）私有插件（支持定制插件）免翦,但需要证明与专业版本功能相似.但互相写作仅限教育版用户SketCh20人团队：价格在IIooo元蓬湖150人经看：29850元云盘价格：？价格：11000+29850=40850元小结：按照性价比，公司可以选择ftgma的专业版本，以20人的团队来看，我们一年大蜜可以节约21650元