分类 - Figma

2021-07-26 10:02:05    23    0    0

OK,咱们开始吧。以一个PC端的应用界面为例。

在本文中,我们在创建样式的同时,会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。

0.常量样式

重要的是要注意,在为明暗模式选择颜色时,颜色会略有不同。但是,某些中性颜色风格是不变的,在任何一种模式下都不会改变。在Figma Design System中,我们选择了白色和黑色作为固定颜色,无论您使用哪种模式,该颜色都将保持不变。另外,图像占位符的颜色也是恒定的,不会改变。

例如,在上图中,我们展示了该按钮在浅色和深色主题中的外观。图标,文本和计数器具有恒定的颜色。按钮的背景有变化,但其中的内容未更改。

1.可变样式

可变的颜色样式分别适用于亮和暗模式,并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的,我们将主要讨论“亮”模式,并且在将这些步骤应用于“暗”模式时也稍作介绍。

1.1颜色样式-灰度样式

灰度颜色是可更改的样式,因为在黑暗模式下应用相同的颜色时时,您将不会获得与在明亮模式下相同的效果。这是因为,在黑暗模式下,背景已经完全为黑色,此时在黑色背景上使用100透明度的灰度颜色时,你的颜色会完全不可见。

将灰度颜色从“浅”模式切换为“暗”模式时,建议您使用白色(#FFFFFF)并在灰度上应用90%,70%,40%和10%的透明度效果,这将在应用于“深色模式”时提供很好的平滑过渡效果。

所以在此设计系统的亮色模式时,我们特别选择以下颜色:

· 100(#1C1C1C)-主要用于标题和粗体文本。

· 200(#585757)-主要用于正文。

· 300(#969696)-用于小文本和填充图标。

· 400(#E8E8E8)-用于较小的细节,例如边框,分隔线和线条颜色。

请注意,我们仅根据自己的喜好将所有四种灰度颜色分别命名为100、200、300和400,它们与任何规则都不相关,您可以根据需要命名灰度颜色。

1.2 系统颜色

系统颜色(也称为基础色)是你项目的主要颜色。我们建议您选择温暖和亲切的颜色,但是在某些情况下,选择调色板时,您可能需要考虑品牌的颜色,这将成为设计系统的一部分。

例如,在此设计系统中,原色是分别应用于这两种模式的蓝色,绿色,橙色和红色。每个原色由两种不同的颜色对比组成,第一个由较浅版本的原色组成,第二个类别由较暗版本的原色组成。如下图:

要创建较浅和较深的基础色,您需要在其之上添加20%,40%

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

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

 

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

 

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

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

 

Similayer

 

常见用例:

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

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

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

    image.png

  • 注意调整 icon 的视觉平衡

    image.png

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

    image.png

2021-06-23 14:45:36    16    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    53    0    0
 
 

图片

图片来自 Figma官网


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

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

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


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

2021-06-22 15:45:44    33    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轴添加、移除