figma实战-组件化

7天前发布

原创文章 / UI / 观点
翘舌音 原创,如需商业用途或转载请与翘舌音联系,谢谢配合。

利用figma做的B端组件规范,这里分享给大家,不足之处望大家留言指正^_^

本篇主要讲的是利用figma做ToB的基础设计规范,解决的主要问题是设计和开发效率问题,在最初还在用ps做设计的年代,普遍存在的问题是设计图的界面元素偏差,颜色运用混乱等问题,导致后期开发过程中,出现买家秀和卖家秀的情况。


如何解决这一问题?成了设计师最先要去解决的问题,后来设计师慢慢的转变工具的使用,有些团队用xd,有些团队用sketch,有些则选用figma,不作过多评价哪个工具好。在网上看了一些文章,如果把设计工具比作汽车,你又会怎么选择?



在这里我选择了figma,接下来和我一起来看看吧。


一, 组件特征


二, Figma实操讲解


,基础组件规范


            1,Color 颜色规范

            2, Font 文字规范

            3, Icon 图标规范

            4, Layout 间距系统

            5,Button 按钮规范

            6, Form 表单规范

            7,Table 表格规范

            8,TreeView 树结构

            9,Nav 导航


四, 结语


一,组件的特征


一个有效的组件库,可以帮助设计师和研发提高工作效率,提升设计专业度的同时让产品本身的体验更加一致、可学,品牌感更强,它所具备的基本特征一定是通用的、灵活的、复用的。

1,通用性:意味着足够基础和常见且不带业务属性,参与设计环节的每个人都应该知道这个组件的功能及目的,同时具备一定扩展性。
2,灵活性:要求元件的组合需灵活,可以在不同场景下通过互相组合来快速搭建交互框架原型图,并根据不同页面结构的演变来适应新的业务需求。
3,复用性:指的是适用于多个业务或产品,在设计过程和研发过程中都可以高频复用。


二, Figma实操讲解


在这里我讲一些,在做组件的过程中,我常用到的一些操作


命名规则


可以用斜杠对图层名称进行分组,你也可以使用相同的方法对本地颜色样式中的颜色进行分组。



创建组件


首先将frame命名,这样有利于后期管理组件


创建单个组件的快捷键“ctrl+alt+k"

创建多个组件,同时选中多个 Frame,再把鼠标移动到顶部组件图标上,在下拉菜单中选择“create multiple components”就可以创建多个组件了。




管理组件


框选需要命名的组件,右击rename,快捷键“CTRL+R”,方便高效管理组件分组




快速切换组件


切换组件有两种方式

第一种:组件切换和sketch差不多,需要自己去找组件,适用于组件较少的情况下




第二种:拖拽替换,快捷键按住ctrl+alt并拖拽组件替换,配合搜索功能超好用




创建本地样式


创建一系列本地样式,比如主色调,文字颜色,阴影大小等,用到样式直接调定义好的颜色,方便后期的修改



智能选择


一次选择多个元素,并拖拽它们之间的线来调整间距,你还可以单击对象中心的圆圈并拖动它来重新定位元素。



批量选择子元素

选中元素,按回车键,批量到父级的下一级,这种方式做定位很好



有趣的图形


自带 Arc 工具,变成一些很酷的其他图形



插件

因为figma也有很多团队在用,有些团队整理的非常好,这是YUX团队整理的插件链接:https://www.zcool.com.cn/article/ZMTA2NDQyNA==.html


三,基础组件规范


颜色规范


文字规范



图标规范

间距系统

按钮规范


undefined

表单规范




表格规范

为大家展示一下,用组件搭建好的表格




树结构


无线连接树

先定义三种树状态,展开,收起和子集,每个树的line-height为40px


有线连接树

定义五种状态主组件,分别是一级展开,一级收起,中级展开,中级收起,子集,这里需要注意的是在做组件时树的线可以延展




导航

undefined


导航部分组件的设计规范,分类参考了antui,然后结合公司的实际业务做了修改,大家在做组件时也可以参考一下。

Antui地址:https://ant.design/components/overview-cn/



四,结语


以上内容是我整理的一些,B端的基础设计规范,在这个基础上可以做些延展,使自己的组件库更加适用于自己的项目,用起来更加方便,这篇文章分享给大家,希望大家喜欢,不足之处也欢迎大家给我留言。

58
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息