emengweb 's Blog

最近搞了几台Stardust的IPv6小鸡，性能棒棒哒！只是为了能在只有IPv6的VPS上，正常访问IPv4的网站并安装宝塔操碎了心，还走了许多弯路，遂留下宝贵的经验，方便后来人。

本教程同样适用于只有IPv6的VPS。

1. 配置DNS

直接用安装命令过程中可能会失败，需要先加ipv6的DNS，可以使用以下自动配置脚本：

bash <(curl -sL install.emengwe

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％

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

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

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

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

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

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

教程文件：

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

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

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

  

• 注意调整 icon 的视觉平衡

  

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

  

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

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

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

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

社区简介

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

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

社区使用指南

在社区探索

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

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