只是记录一下学习Figma过程中的一些笔记,可能会有更多更方便的使用技巧。

本地样式

添加本地样式

在Figma 中不论是字体、颜色、样式等都可以添加为自定义的样式,操作步骤如下

点击属性右上的图标,弹出窗口中点击+按钮即可

使用本地样式

之后我们再次点击此处就可以看到我们添加到自定义样式, 右侧的调整按钮是我们可以对保存的本地样式进行调整,这样调整后的样式会将使用该样式的元素同步进行更新,比如统一修改App的导航栏颜色、Tabbar的选中颜色等

取消样式关联

如果我们使用了本地样式,但是想自己对该样式进行单独的修改, 如应用了阴影等设置,但是想单独调整下阴影的大小,则点击该样式右侧的断开链接图标即可

本地样式列表

本地样式在我们鼠标单击空白处会在右侧的属性栏中进行显示,我们可以直接在此处对本地样式进行修改与删除,假如我们需要对设计统一修改色调就可以直接修改某一个本地样式

本地组件

本地组件是为了更好的复用与批量修改,比如我们的新闻列表,每个条目的标题与简介、缩略图都是统一的,我们就可以做一个条目的组件来统一管理他们的样式,假如我们更新的标题的字号与颜色,所有使用到该组件的地方都会进行同步的修改,这样节省了我们每个都去单独修改的时间,也更方便让相同设计元素进行复用,降低设计更新的时间成本。

一般我们在一个设计稿中将所有的组件都放在同一个Frame中集中管理,不要在页面中创建组件,这样会在后期查找父组件比较费力,我们将一个设计稿中的本地组件都放置在同一个Frame中,这样不仅方便查找,而且比较清晰。

创建组件的快捷键为Opt + CMD + K, 也可以选中你的元素后,点击顶部的创建组件按钮

创建完毕组件之后,我们就可以按住Opt+拖动组件快速使用一个组件,多次复制之后,我们就能快速的完成一个新闻列表样式,我们可以单独对每个子组件的标题与描述进行修改,而不会影响父组件

当我们对父组件的属性进行修改时,子组件也会同步的更新样式, 可能这就是设计中的面向对象概念吧

父组件与子组件概念

父组件与子组件的特点总结(不全面):

  • 更新父组件会同步将样式同步给使用到的子组件
  • 子组件可以单独更新自己的文本、高度,而不会影响父组件
  • 子组件如果想单独更新组件某些样式,可以同样断开链接之后进行单独的修改,方法同本地样式

本地库

本地样式与本地组件都会显示在本地资源库中,位置在Layers右侧的Assets栏目中, 从图中可以看到,我们将所有的组件放置在同一个Frame中的优势也显示出来了,这样就不会去多个页面下去寻找定义的组件,也节省了一部分的时间,本地库中的组件,我们可以直接拖动到设计页面中进行使用。