分类 - Figma

2021-06-24 17:08:30    6    0    0

Figma 本身自带选择相似属性图层的功能,但是只能选择那么几种属性可选。

 

Figma 自带的选择相似图层功能

 

而这个插件扩展了内置功能,你可以通过它选择具有相同属性的图层,还可以组合使用。比如说,导入一个 Sketch 文件之后,我想选中所有 Slice 图层,并把它们删掉,就可以用这个插件。

使用方法也很简单,选择一个图层后,直接运行这个插件来选择所有其他基于特定属性的图层。

 

Similayer

 

常见用例:

  • 选择一个特定组件的所有实例,用另一个替换
  • 选中所有与特定的文本样式一样的图层
  • 选择所有具有相同角半径和填充颜色的”卡片“
 
2021-06-23 15:15:13    4    0    0

官方出马,制作了一系列教程来讲解最新的 Auto Layout,帮助你学会如何制作复杂自动布局的设计。

提示:可以开启自动翻译字幕观看

 

复杂布局

 

第一集:制作一个自动布局按钮

https://www.youtube.com/watch?v=PNJxeD29ZTg

第二集:制作一个自动布局顶栏

https://www.youtube.com/watch?v=bh98SF7OjUk

教程文件:

https://www.figma.com/community/file/911320742349428744

2021-06-23 14:57:09    6    0    0

图标是大家都非常熟悉的东西,但是绘制图标并且最终交付给开发却有很多细节需要注意,这篇文章就写了在做一套图标系统时需要注意的地方,包括:

  • 把图标画在相同大小的 Frame 中

    image.png

  • 注意调整 icon 的视觉平衡

    image.png

  • 把图标做成组件,方便快速替换
  • 设置好 icon 的 constraints,保证拉伸不变形
  • 内部图形记得布尔合并,以便替换时能够自动保持颜色,并且导出的 SVG 代码更干净

    image.png

2021-06-23 14:45:36    8    0    0

我一直都很喜欢设计工具 Figma 的愿景:Make design accessible to everyone。一直以来设计都是一件「看起来很专业」的事,这一点从设计师们使用的工具就可以看出来。就拿 Photoshop 来说,复杂的操控界面和对设备较高的性能要求都会让大多数人望而生畏,可现实中,除了设计师以外很多人也偶尔需要去做一些简单的设计。

Figma 降低了大多数人走入设计的门槛,你不需要多好的设备,只要电脑安装了浏览器,注册个账号就可以去设计。它的界面也足够简洁,并且操作都十分符合直觉,即使新手也能很快学会基础操作。

 

Figma 界面

 

不过,软件的操作只是设计最基楚的部分,对于非设计师来说,最难的是审美意识的提高。在 Figma 的网站上有一个设计通识课,如果你不是一个设计师,它可以帮你了解一些设计的常识,比如色彩、排版。

 

Learn Design Pilot

 

有了基本的设计通识,提升设计技能最好的办法是从其他设计师那里学习,而我今天要介绍的 Figma 社区,就是这样一个地方。

社区简介

Figma 社区从去年十月份开始内测,简单来说,就是设计师可以将自己的 Figma 文件直接发布到社区,发布的源文件采用 CC BY 4.0 协议,其他设计师可以基于此自由创作,甚至商业使用,只要你对作品按照作者要求的方式进行署名。它有点像 Dribbble 这种展示设计作品的网站,不同之处在于你每次发布的是设计的源文件。

 

Figma Community

 

曾投资过 Figma 的 A16Z 评价 Figma 社区将 GitHub 的开源文化带到设计师群体中。来自全球的设计师或公司都在社区分享自己的设计,甚至包括微软SalesforceSpotifySlack 这些知名公司。Figma 之于设计师,就像 GitHub 之于工程师,我们不需要重复造轮子,可以直接使用别人分享的设计来做自己的项目,或者从中学习别人的一些设计技巧和习惯。当我们站在巨人的肩膀上的时候,设计这件事就变得更加触手可及了。

 

Microsoft@Figma

 

社区使用指南

在社区探索

在浏览器直接输入 https://www.figma.com/community 就可以访问 Figma 社区了,如果你用的是客户端,点击左侧边栏的 Community 即可进入。

 

Figma 社区入口

 

从下图可以看到,Figma 的的社区中主要有文件、插件和创作者三类。你可以自由探索,喜欢哪个就点进去查看详情。在封面上显示 Fig pick 的是 Figma

2021-06-23 12:16:33    7    0    0
 
 

图片

图片来自 Figma官网


Figma作为一个线上协作设计平台,因其强大的组件功能,越来越受到设计团队的青睐。

为帮助用户对组件进行更加高效的管理,2020年11月初,Figma在其网站上发布了组件的变体功能。

Figma官网:https://help.figma.com/hc/en-us


本文主要通过变体组件的创建过程

2021-06-22 15:45:44    6    0    0

翻译自https://help.figma.com/hc/en-us/articles/360040451373#Add_and_remove_objects


自动布局允许您创建响应其内容的动态框架。

有很多方法你可以使用自动布局:

1、创建可以在编辑文本标签时增大或缩小的按钮;

2、快速建立适应新项目的列表;

3、结合自动布局框架构建完整的界面;

4、向现有组件添加自动布局;


注意:我们使用术语父和子来表示框架和对象

添加自动布局

您可以添加自动布局到一个框架或对象的选择。这包括:

1、新或空的框架;

2、包含现有内容的框架;

3、组件;

4、组或其他对象或图层;

注意:

我们只支持框架添加自动布局。如果你选择一个框架之外的对象,Figma会在它们周围创建一个框架并添加自动布局。


删除自动布局

当您删除自动布局时,您将有权访问框架的常规属性。

有两种方法来移除自动布局:

1、右键单击框架并选择移除自动布局;

2、在属性面板中,单击自动布局旁边的减号图标;


注意:

您不能使用“添加自动布局”键盘快捷键来删除自动布局。如果您这样做,您将在当前选择的周围创建一个新的自动布局框架。


你可以在几个地方添加自动布局:

1、右侧边栏:点击旁边的自动布局;

2、右键单击框架并选择添加自动布局;

3、使用键盘快捷键:Shift +A;

调整框架的填充,边框,效果和角半径属性!了解更多在我们的框架在Figma文章。

https://help.figma.com/hc/en-us/articles/360041539473

自动布局属性

自动布局的框架与常规框架有不同的属性。当您应用自动布局时,您将在右边栏(属性面板)看到一些变化。

当你框架添加了自动布局,你将不能:

🚫向该框架添加布局网格;

🚫对自动布局框架中的任何对象应用约束;

🚫在框架内使用智能选择;


有自动布局父(框架)和自动布局子(对象)的属性。我们已经分组自动布局属性基于你选择的对象:

1、父自动布局(框架);

2、子自动布局(对象或框架)

注意:

由于可以嵌套自动布局,一个框架可以同时扮演自动布局父元素和自动布局子元素的角色。这意味着你可用这两组属性。

父自动布局

以下属性在属性面板的自动布局部分中。


1. 方向

方向允许你选择自动布局框架将流动的方式。你可以在垂直和水平之间选择。

垂直允许您沿着y轴添加、移除和重新排序对象。例如:列表中的对象,或新闻提要或时间轴中的文章。

水平允许您沿着x轴添加、移除

2021-06-22 09:48:08    5    0    0

简短介绍

记录设计的主要原因是让团队中的每个人保持一致,我的意思不仅仅是设计师。通过拥有一个主要参考站点,其中列出了所有设计规范、实践和工作流程,您可以将其用作核心咨询,避免重复概念或将它们分散在不同的地方。

文档超越了界面本身。围绕设计过程有很多事情也是交流所必需的:从决策背后的基本原理到行为,从日常实践到一般工作流程。目前,本出版物的范围将涵盖与产品视觉方面相关的所有内容。

在您的设计文件中记录

现在比以前更常见的是找到帮助将您的设计软件与文档可以存在的其他网站连接起来的工具。他们中的大多数通过插件工作,这些插件可以让您将设计保持在一个中心位置,然后通过第三方软件进行同步。我们稍后会讨论这个(或者你可以直接跳到文档工具部分。)

不幸的是,设计工具和文档工具的成熟度远远落后于我们现在想要的。出于这个原因,正如我们将在下面看到的,我仍然更喜欢将这些工具与文件内文档结合使用。这样做的好处是可以根据您想要的粒度级别对设计的通信进行微调,但需要一些手动工作以使其保持最新状态。

在接下来的几节中,我们将看到在记录设计的主要部分时要记住的内容。

颜色

为了记录颜色,我们需要遵循一系列步骤: 说明它们的解剖结构(意味着形成颜色资产的不同部分);定义它们将如何分类或划分;最后,它们之间的关系是什么,请记住,相同的颜色值可以在界面中具有不同的应用程序。

解剖学

颜色非常简单,因此要定义它,我们只需要一个名称和一个值,以及两者的视觉表示。要在我们的文档文件中执行此操作,创建一个具有通用结构的符号或组件以稍后基于该结构记录调色板是有用的。

这是一个非常简单的示例,但将复制此通用结构以记录界面中的每种颜色。还有一点要记住:颜色通常是比例尺的一部分,它们在上面有一个位置。

只有一种原色是很少见的。相反,我们更有可能将它的一些变体应用于不同的情况,例如悬停在按钮上时。所有这些都需要定义和记录,我们将在接下来看到。

定义

为了直观地解释颜色结构或分类的工作原理,除了将它们创建为变量或样式之外,您还可以将它们排列在样式指南内的特定页面上。

我们刚刚看到的原色可能是“主要”类别的一部分,在那里我们将有原色和副色。除此之外,一个项目通常会在调色板中包含一些其他的分区。

Main
Neutrals
Backgrounds
Opacities
Icons
Texts

我们将使用 Neutral 类别来定义它包含的不同值的示例。

应用

正常的