By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.

分类 - Figma

2021-07-26 10:02:05    82    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    59    0    0

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

 

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

 

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

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

 

Similayer

 

常见用例:

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

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

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

    image.png

  • 注意调整 icon 的视觉平衡

    image.png

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

    image.png

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

图片

图片来自 Figma官网


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

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

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


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

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