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.
2021-06-23 14:45:36    110    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    393    0    0
 
 

图片

图片来自 Figma官网


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

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

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


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

2021-06-22 15:45:44    608    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    20    0    0

简短介绍

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

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

在您的设计文件中记录

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

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

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

颜色

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

解剖学

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

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

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

定义

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

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

Main
Neutrals
Backgrounds
Opacities
Icons
Texts

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

应用

正常的

2021-06-22 09:46:26    19    0    0

分离文件

设计系统中的文档被拆分和组织的方式是事物将如何在其中的第一个迹象。无论如何,以直观和模块化的组织为目标总是很方便的,因此只需快速浏览一下,我们就可以知道每个文档的内容以及它们之间的关系。

在设计系统

设计系统本质上是模块化的。其文件应具有一定的独立性,并利用可能组合的灵活性。

带有连接方块的图表,表示如何拆分文件
  • 样式指南或基础:包含我们可以称为标记的所有内容:颜色样式、阴影、间距、大小、类型比例等。

  • UI Kit:包含输入框、对话框窗口、按钮等组件。这里的组件使用“样式指南”文档中的样式,没有其他孤立的样式。

  • 模式:模式是完成任务的屏幕或流程的表示,可以在项目中重复。模式可以是单独的,例如带有表单的屏幕(然后您可以看到字段分隔,提交按钮的位置);或者更长的时间,例如涉及多个步骤的搜索过程。模式大多是参考性的,不一定也应该是 Figma 或 Sketch 中的组件或符号。

在项目或功能中

每个项目或功能都可能需要一个或多个文档,具体取决于其复杂性以及它是使用自己的组件还是来自设计系统的组件(或两者的组合)。您所针对的不同屏幕尺寸也会影响排列和文件的分离。

考虑一个相对简单的案例,项目是为移动和桌面设计的,组件来自一个单独的库,结构可能如下所示:

Project
↳ Project (Desktop)
↳ Project (Mobile)
↳ Library

在单独的文档中拆分屏幕大小为您在内部组织这些文档提供了更多的自由和空间,我们将在后面看到。另一方面,如果项目使用自己的组件,而不是设计系统的一部分,则这些组件将包含在同一项目文件夹内的“库”文档中。

页面

页面用于分隔同一产品的不同部分,遵循以某种方式反映主导航或级别的结构。让我们假设我们有一个带有导航栏的应用程序。

屏幕的一部分,在底部显示导航栏或标签栏

文档中的页面将匹配相同的结构:

Home
Search
Profile
Account
Settings

在库和 UI 套件中

当文档具有组件(例如库或 UI 套件)时,还会有一个页面,其中将放置所有可编辑的组件和符号。这个想法是将它们分开,而不是分散在界面的不同屏幕和页面上。让我们看以下示例,它表示设计系统中的 UI Kit 文档:

Elements
Components
Patterns
Editable components

框架和画板

如果页面和页面之间以一致的方式使用,页面内的框架和画板排列可以提供屏幕之间关系的概念。屏幕的放置(行和列)和分隔(垂直和水平

2021-06-21 19:24:50    22    0    0

好名字

要使名称有效,它必须符合某些基本特征:它必须是可识别的,并且可以识别它所指的内容。即使似乎将该组保留为“Copy 23”,在创建后花几秒钟设置一个正确的名称,也将有助于提高设计过程的速度和秩序。那么,除了使用它的地方之外,名称应该如何命名?

它有一个逻辑结构

两个示例,一个按钮和一个输入字段,彼此重叠

使用一些逻辑来构建名称很重要,它是可预测的并且将始终保持不变 - 不会经常根据情况而改变。也许这在组件中更为重要,这些组件通常具有长而复杂的结构。

它与视觉属性无关

两种不同的标题命名方式,展示好的和坏的做法

我们之前提到的这个逻辑意味着使用上下文、函数或层次结构来命名某些东西。但不是随着时间的推移可能会改变的视觉属性,从而使名称变得无用。如果您根据元素颜色或其边框半径命名某些内容,一旦这些属性之一被修改,它将不再有用。但像往常一样,总会有例外,我们稍后会看到。

很短,但很有意义

上面的例子提供了一个长名称的按钮,下面是一个好的、较短的名称

在组件中,遵循结构的逻辑使我们以通常很长的名称结尾。一旦我们使用了一个实例(意味着组件的副本,而不是可编辑的),我们可以简化名称以尽可能减少它。这将使图层列表更容易在简单的视线中扫描。这里的重要一点是,只是为了使内容更短,我们不会牺牲名称的目的,即轻松识别它所指的内容。

很短,大家都知道

你知道“干杯”是每个人都知道你名字的酒吧吗?在团队中,所有团队成员都应该知道、同意和使用命名约定。不可能是从一个项目到另一个项目,从设计师到设计师(甚至在同一个产品内部)有不同的命名方式。

上半部分是一张西班牙语名字的卡片,下半部分是英文名字

附带说明:如果您有一个分布式团队或有国际设计师,最好使用英文名称。这将使您的文件更容易理解,而无需考虑其他人所在的位置。

尺寸

一个界面充满了不同的大小,从文本到断点,或者元素之间的间距。最简单、最可升级的方式与我们在现实世界中使用的服装尺码系统有关。这是一个被广泛理解的非常普遍的概念。从小到大,它会是这样工作的:

颜色框的比例显示了如何以逐渐增加的方式命名尺寸
xs = Extra small
sm = Small
md = Medium
lg = Large
xl = Extra large
2xl = Extra, extra large

或者,我们可以使用“xxl”而不是“2xl”,但我发现当大小开始增长时,如果我

2021-06-21 18:34:42    359    0    0

原文地址

组件:这些是设计中可重用的对象。

Figma 的两个最强大的功能是componentsstyles它们让您可以重用 UI 对象和属性,以便您可以大规模系统地维护设计。当您需要更改某些内容时,例如您品牌的链接颜色或主页图标,您可以进行一次更改 — 在原始主要组件或样式中 — 并观察它在您所有设计中的更新。

您可以使用组件和样式:

  1. 在 Figma免费层的一个单独文件中
  2. Figma Professional 层中的不同文件和项目
  3. Figma 组织中的跨团队

在创建、命名和管理您的组件和样式时,需要考虑的事情数不胜数,因此我们整理了一份最佳实践指南来帮助您。喝杯咖啡,参加 101 大师班。

快速说明:在 Figma 中制作组件之前,我们建议您弄清楚哪个 Figma 计划对您最有意义。如果您注册了 Figma 组织,请阅读这篇关于在 Figma 中设置团队的最佳实践文章,因为该结构将构成您的组件组织的基础。

什么是组件和样式?

如果您已经了解组件、样式和库的所有基础知识,请跳至下一部分。

创建、发布和共享组件和样式的过程 

组件:这些是设计中可重用的对象。它们可以像单个按钮一样简单,也可以像整个导航标题一样复杂(由徽标、头像、按钮和菜单项等其他组件的实例组成)。您会发现组件的工作方式与 Sketch 或其他设计工具中的“符号”类似,但有一些独特的区别。稍后会详细介绍。

以下是人们变成组件的常见事物列表:

  • 用户界面组件
  • 公司标志和品牌资产
  • 图标
  • 设备模型
  • 平台操作系统组件(Android、iOS、Linux、OSX 等)
  • 光标
  • 红线和注释组件
  • 用于运行协作设计冲刺的便利贴和投票“贴纸”
  • 绘制“助手”,如流程箭头和流程图形状

组件实例一旦您将某物变成组件,您就可以创建它的实例,这些实例本质上是该组件的连接副本——因此,如果您更新原始组件的设计,实例将反映该更改。例如,如果您将按钮组件的颜色更改为红色,然后发布这些更改,则任何使用该按钮实例的文件都会收到通知。然后他们可以选择是否将他们的实例更新为红色。

样式这些是可重用的属性集合,您可以轻松地将其应用于设计中的元素。在 Figma 中,您可以为文本、颜色、网格以及阴影和模糊等效果创建样式。如果组件是可重用的对象,请将样式视为可能应用于这些对象的属性。

在 Figma 中,您可以通过发布来共享组件和样式。这会将您的文件变成一个库,因此您可以在其他文件中使用