Background

Current situation

I have been working for the current company for half a year. I have a clear picture of the working pattern: We are a small design team, but each member has to be responsible for both the UI and UX design for many internal systems.

Some of the design requirements are not complex at all, but the stakeholders want to make the interface aesthetically beautiful and different from other internal systems. In contrast, other demand sides hope designers can provide a clear and understandable solution to tackle the complex interaction flow.

The previous one was much more difficult for me since I was interviewed for the senior UX designer position, and I had not expected to address these design requirements, which may have occurred considerable times.

So it is time-consuming to design a portal website or refine a running internal system since I have to try multiple design solutions to ensure it will be aesthetically beautiful and outstanding.

Ideation

I wonder if 3D pictures could be a great approach to suit this type of design requirements. So I researched external products from large firms, trying to know how they use 3D pictures in their SaaS products.

After collecting and investing in multiple products, I found the patterns:

1. 3D pictures are most likely used in landing pages, login pages, portal pages, and the like;
2. Admin panels and dashboards do not use 3D pictures frequently, but they would appear in entries, feedback, and background decoration.

Conclusion

Based on the pattern above, real working conditions, and small-sized tries, I summarized the first conclusion:

1. 3D pictures are not frequently used on dashboard pages and system admin. However, using 3D pictures could improve the variety of pages. So it is not worth it to spend so much time on it.
2. 3D pictures can effectively meet the expectations of demand sides when they want to make their dashboard and admin pages distinguish from other similar sites.

Difficulties

Since I don’t have skills in 3D design, and my working strength is too high to spend much time learning, modeling, and rendering delicate 3D pictures, I just simply searched 3D visual elements on the Internet and then applied them to my deliverable.

Initially, this approach was workable and can help me complete my work quickly. However, drawbacks are uncovered after multiple uses:

1. Difficulties of matching business contexts. 3D pictures on the Internet support common scenarios well but can’t always precisely describe certain business scenarios.
2. Lack of series of an element. Although we finally found a perfect 3D picture, it is hard to reach other similar elements from the same series, resulting in poor scalability.
3. Risks of infringement. Using 3D pictures on the Internet might cause infringement, so applying it directly consists of potential risks.
4. Inconsistent quality. Free elements are not guaranteed quality and sometimes fail to meet the standards of our design team.

Here, I draw the second conclusion:

Searching for 3D pictures on the Internet has limited effectiveness, so we can’t fully rely on this approach.

After drawing this conclusion, I feel horrible: does it mean that I should strive to learn skills in 3D design? My work strength doesn’t allow me to learn professional 3D software like Cinema 4D or Blender.

After thorough consideration, I think the core demand for me is not to learn 3D software, rather, I should have the ability to gain 3D pictures. Apart from that, the whole process should consist of these features that suit my workflow well:

1. Quick render. Since it is not worth it to spend much time on it during my work time.
2. Consistent style. Ensuring our design has great scalability.
3. Great customizability. It means that I can fully control elements on 3D pictures, ensuring outputs highly represent the business requirements and contexts.

By chance, I know there is a plugin on Figma called “Vector to 3D”. By learning outputs published in the community, it seems that this plugin could meet the features above well, improving my work effectiveness and quality. So I asked my team leader if I could spend some time discovering this plugin and sharing my experiences with team members, and she approved.

Therefore, this post is to record my internal sharing: My experience of how to build 3D modeling & rendering flow on Figma that improves our design effectiveness and quality.

Work with Vector to 3D

Introducing the plugin

This is a paid plugin, we can search for and install it in the Figma community.

The control panel is comprised of three parts: Global, Object, and Animation settings. Here I will simply introduce the interface of the first two parts, ensuring all readers learn what this plugin can make.

For the Global setting, we can adjust the cameras, and background on the “General” panel; apart from that, we can set the render quality and details on the following panel called “Render”; and then we can control lights on the next panel named “Light and Shadow”, this panel supports varies functions of lights, like the number, size, position, strength, color and so forth.

For the Object setting, we can make a 3D model by extruding, inflating, or revolving, and then increase the detail of the model by setting “Mesh Quality”. Moreover, this plugin also supports material settings, like roughness, metallic, transmission, and the like.

These features are more than sufficient to handle nearly all of my design tasks.

Make a template

In this part, I will introduce two functions of this plugin: Save Preset and Template Preset.

Saving preset allows us to memorize the current view, modeling, and material settings of the frame. We can reload all the settings by the next open, even sharing with friends.

Templating Preset is not only the masterpiece of connecting the plugin with Figma but also a key factor in effectively generating 3D pictures.

Once we built a template, the plugin would memorize all the raw object preset, next step, we can replace the raw object with anything else, and succeed the raw object preset to it.

This approach is highly convenient for us when producing 3D elements. We just have to create a template, and then we replace various shapes, finally, we can produce endless 3D elements that fit our actual needs well.

How it works: First, we need to set the frame as a component and make the replaceable element that we want to replace with a new one a child component. (In the following example, I set the square bottom as a replaceable element.)

Second, we duplicate the whole component and tune settings in the plugin, then save it. (In the following example, I make a glass ball and a square bottom base with a metallic surface)

Third, we need to create a bunch of shapes that are to replace the replaceable element, making them an individual component and ensuring their layer number, order, and name are the same as the replaceable element.

Last, we can hold the keys “cmd” + “option”, drag a new shape component to replace the replaceable element, and then reload the model again. Now we can see the new shape is applied to the same presets.

Now we successfully made a template, we can produce endless 3D elements by creating and inserting new shapes.

Actual practice

Here, I will share a case that is already used multiple times in my daily workflow.

In this template, the shape of icons and background are replaceable, generating endless pictures and fitting nearly all of my design tasks. So it can be a resource library, empowering other team members.

Meanwhile, I created a color pattern, which not only can be used to represent states like success, fail, warning, and the like but also can be applied to the system with different color themes, ensuring our outputs are highly scalability.

Benefits

In the post above, we learned the interface of Vector to 3D, how to make a template, and how I use this flow in actual workflow.

We are familiar with the 3D design workflow in Figma. To conclude this post, I’d like to summarize the key advantages of this process.

1. Low learning costs

We can simply recognize that the plugin “Vector to 3D” is a lite version of 3D software, simplifying complex functions from traditional 3D software and keeping essential functions.

2. Full design process within Figma

This workflow allows us to produce great 3D elements that don’t have to leave Figma. Apart from that, we can simply tune colors in Figma, which doesn’t like the traditional workflow that always switches from software to software.

3. High scalability

One of the core features of Vector to 3D is that makes up models from vector shapes, by taking advantage of this, we can efficiently produce 3D pictures that effectively meet our needs and align well with business contexts.

4. Consistent styles

The plugin Vector to 3D can coordinate with the components of Figma, not only remembering global presets like lights and cameras; but also allowing replacements to succeed presets like materials and position from previous elements. By templating these presets, we can endlessly produce 3D pictures with the same style.

This workflow is not only successfully used in my daily work but also influences my colleagues. After this sharing, 50% of my team members purchased and used this plugin in their design tasks.

Solution for non-Figma users

If you or your team are not using Figma for work currently, or you are not a designer but just simply want to try the flow from SVG shapes to 3D models, you can visit the online version of Vector to 3D: https://www.meimu.design/vector-to-3d/

Sharing: 3D modeling & rendering flow on Figma was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

A curious discovery

When my workflow had fully transformed from Sketch to Figma, I found there was an option “Case-Sensitive Forms” placed in several typeface setting panels. The appearance of the font might change slightly and occasionally when I enable this setting.

I was interested in this setting option, then I tried to find out concepts and related knowledge about the term “Case-Sensitive Forms.”

In this post, I will explain what Case-Sensitive Forms are, when should we implement this feature to uplift our design with several practices, and how to use it in our workflow.

Features

The “Case-Sensitive Forms” is a feature of OpenType features, which are like hidden compartments in fonts that allow us to change how fonts look and behave. When we use this feature, the font will:

1. Shift some punctuation marks up to a higher position;
2. Change oldstyle figures to modern figures.

Feature 1: Shifting some punctuation marks up to a higher position

In general, punctuation marks are vertically centered with lowercase characters, which is known as “x-height.”

However, when using the Case-Sensitive Forms feature, some punctuation marks are aligned with the height of uppercase characters, which we call “Cap height.”

Feature 2: Changing oldstyle figures to modern figures

Some fonts use oldstyle figures by default to add visual attraction. It is often used in traditional publications like books and newspapers since this font has a rhythmic beauty with varied heights.

When using the Case-Sensitive Forms feature, fonts will be directly changed to modern figures, also known as “lining figures.”

Realistic practices

Inspiring by the feature 1, shifting some punctuation marks up to a higher position, it is well-suited for compositions that mix uppercase characters, figures, and CJK characters.

Here is a list of compositions that might be visually improved by using the Case-Sensitive Forms feature.

1. International phone number

Because figure glyphs are as high as uppercase characters, the use of Case-Sensitive Forms is ideal for displaying phone numbers that include area codes.

2. Date and time

Similarly, date and time is also well-suited for using the Case-Sensitive Forms feature since they are typically consisted of figures and marks.

3. All caps text

To make titles or other important information visually prominent, we often capitalize the text, which is also ideal for using the Case-Sensitive Forms feature.

4. East Asian typography

East Asian typography looks like a square, meaning the visual height of Chinese, Japanese, Korean, and Vietnamese characters is similar to the “X” letter’s cap height.

Therefore, the Case-Sensitive Forms feature are also fitting for the East Asian typography scenario, ensuring marks are vertically aligned with the characters.

5. Sensitive information

When displaying sensitive information on digital interfaces, such as Social Security Number(SSNs), bank account numbers, and phone numbers, we often use asterisks (*) or dots (•) to partially obscure it. In that case, the Case-Sensitive Forms feature is highly suitable.

6. Text face

A rare scenario that may be ideal for using the Case-Sensitive Forms feature is text faces, such as “:D” and “:-)”

How to use

1. Supported typefaces

Only typefaces that support the OpenType feature of Case-Sensitive Forms can enable this feature.

It means that not ALL typefaces support this feature, even if we implement this setting in design tools or through coding. I’ve simply made a list to clarify which typefaces support it and which not.

Typefaces that support the Case-Sensitive Forms feature:

1. DIN Pro;
2. Inter;
3. San Francisco (fonts for Apple platforms);
4. Inria Sans;
5. Warnock Pro…

Typefaces that DO NOT support the Case-Sensitive Forms feature:

1. Arial;
2. Helvetica;
3. Noto Sans;
4. Roboto;
5. Source Sans;
6. Segoe UI…

In other words, the Case-Sensitive Forms feature only works on Apple devices if we use the system default font on our website.

2. Figma

Follow these steps to implement the Case-Sensitive Forms feature in Figma. Select a text layer, then:

1. Open the “Type settings” panel;
2. Switch to the “Details” tab;
3. Check the “Case-sensitive forms” option.

3. CSS

To use the Case-Sensitive Forms feature on the website, we just need to simply add font-feature-settings: ‘case’; to the element that we want to implement this feature.

The CSS Compatibility of this style is quite good. Again, we need to ensure the typefaces support the Case-Sensitive Forms feature; otherwise there will be no changes.

Set as default?

We’ve discussed many scenarios and advantages of using the Case-Sensitive Forms feature. So should we set it as the default style?

My answer is NO.

Although it can uplift visual details with numbers and capital text, it is quite awful when used with lowercase letters, which are more commonly used on our website.

However, we can safely implement the Case-Sensitive Forms feature in some components that always consist of numbers, marks, and capital letters. Here is the list of UI components:

1. Avatar;
2. Badge;
3. Pagination (Image viewer, Swiper and the likes);
4. Letter counter.

For comparison, let’s see the most common solution in which the Case-Sensitive Forms feature is not implemented on digital interfaces.

Recently, my team has been redesigning our mobile component library. I’ve suggested using the Case-Sensitive Forms feature on the components listed above. Let’s see the outcomes in the future.

References

1. Feature: case — Case sensitive Forms
2. 高级排版功能：Case-Sensitive Forms 是什么？

Uplifting your design details with the Case-Sensitive Forms feature was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

前言：公司前段时间新来了不少交互设计师， Leader 邀请我做一次网页布局相关的分享会，来帮助以往比较少界面设计经验的交互设计师能够更好地完成设计方案产出和交付。现在我将文稿记录在这里。

布局是处理内容和视窗或容器的关系。通过创建清晰的视觉模式来帮助建立层次结构并传达重要的内容。通过这次分享，你将会了解到：

• 广义上的四种网页布局做法；
• 响应式布局和自适应布局的区别；
• SHOPLINE 主站后台用到的四种典型布局及其特点；
• 被归纳出来的 3 种响应式布局适配思路；
• 交付清晰的布局适配方案的方法；
• 新的适配方法：容器查询 Container Queries 概念介绍及场景探索。

（这份文稿可能比较长，读者不妨挑取感兴趣的内容查看即可✌️）

布局方式

固定布局

以一个固定的宽度来布局，视窗宽度变化不会改变内容的展示方式。可以理解为“不做适配”。一般在复杂的网页后台会使用这种布局方式，因为适配一个复杂后台成本较高，就会用成本最低的固定布局。

流式布局

通过设置元素所占比例来使内容适应视窗。与固定布局的明显区别是这时内容已经能根据宽度来调整适配，以更好地展示内容。这种布局典型的代表作便是我们常说到的 “栅格系统”。

响应式布局

响应式布局其实就是我们平常所说的 “适配”。页面的布局和元素会随着浏览器视窗的变化而重新排列。实现上会利用流式布局和断点适配等做法，将一套代码适用在所有屏幕分辨率。

响应式布局下，页面内的元素需要能够调整大小和重新排列，所以在专注于内容（如新闻、博客）而不是功能的网站（如 SaaS）上实施响应式设计通常更容易。复杂的数据或交互可能很难在拥有高度的灵活的同时保持清晰性和功能性。

一股清流是咱们的竞品 Shopify，将复杂的电商独立站后台也做到了响应式布局。这一点哪怕是 JIRA、Salesforce 等其他国外大公司的应用也没做到的，所以 Shopify 在设计上有很多值得我们学习的地方。

自适应布局

特点是会为不同类型的设备而专门做一套设计，实现上会用多套代码来适应多种设备。通常会由服务端来根据设备类型而选择要展示的页面布局。

比如 SheIn 官网的链接是 https://us.shein.com，用手机设备访问该链接时，会被重定向至 https://m.shein.com/us，以展示专门针对手机端用户的网页。

这个做法在 C 端网站上使用比较多，因为使用场景不同，电脑端和移动端的产品运营策略会有明显不同，设计上的侧重点、功能都会有较大差异。除了电商网站以外，常见的比如新闻资讯、视频直播等产品也会这样做。

区分响应式布局和自适应布局的方法

比较简单的方法是在打开网页后改变手动改变浏览器宽度：

• 响应式布局：页面布局会实时做出适当的调整以确保内容完整展示；
• 自适应布局：页面没有适应到浏览器宽度，需要重新加载页面后才会更新布局。

当然也有些站点比较注重用户体验，自适应、响应式布局均有实现。所以这类网页可以确保在任何设备和任何尺寸的视窗下都能较好地展示内容。

SHOPLINE 主站的经典布局方式

在实际工作中不难发现有几种布局方式是特别常用的，而且也会有既定的一套适配方法，这一节内容是对此的相关描述。

基础布局

基础的将内容平铺出来，注意有三种宽度做法，对应不同的场景。

满宽度：承载更多同层级的信息
这种布局拥有最多的宽度，所以适合在信息量较大（表头或筛选操作较多）的宽列表和复杂表格中使用。

中等宽度：综合型页面
最常用的做法，适用于综合型页面，比如复杂程度适中的表格、概览页、详情页等。

窄宽度：专注单个任务
页面本身的内容较简洁时，如简单报表和表单，会用到该布局。用户可以专注于单个任务之中。

主次布局：突出重点任务

这种布局常用在后台里复杂/内容较多的编辑页面中，其特点是分成主要和次要的两列，能够突出重点任务。

将重点任务或必填项放在主要的列，而次要/低频/非必填/摘要等内容则放在次要的列里面。

注释布局：快速导航到特定模块

将内容分为多个不同的模块，模块之间的关系并非环环相扣或很密切。所以这种布局便于用户快速定位到某个特定的模块，并且能承载一部分的描述文本，会常用在设置页面当中。

编辑布局：预览

用于有实时预览需求的编辑场景，左列进行的改动会实时反馈在右列预览界面中。

响应式布局的适配思路

Figma 中的画板宽度是固定的，而实际情况中浏览器的视窗会随用户拖动而改变，我们在做响应式适配时可以参考以下 3 种思路。

掌握适配思路的重要性：
适配思路提供了足够多的方法设计方法，帮助设计师应对各种无法被枚举的场景。

思路一：调整大小

动态调整 UI 元素的大小使其适应容器或视窗。常用在图片、步骤条或其他系统控件当中。

实现方式1
宽度缩放。即高度不变，只是元素的宽度作弹性变化，此时内容可能会被裁剪，或者挤压同一行的其他元素。常用在输入框、进度条、下拉菜单等系统控件中。

实现方式2
等比缩放，或按某个比例缩放元素，常用在图片或视频播放器等媒体元素上。

TIPS: 图片、视频适应容器时，会有三种适配方式：

• Cover：内容等比缩放填满容器四条边，可能会裁剪部分；
• Contain：内容等比缩放以填满容器的宽或高，可能会露出部分背景；
• Scale-down：在原图和 Contain 之间取一个尺寸更小的结果。

思路二：重新放置

更改 UI 元素的位置和放置方式，以换取更大的横向空间用于内容的展示。

实现方式1
将排列规则设置为内容放不下而自动换行。

实现方式2
另一种方式则是通过设置断点进行布局更改。

思路三：隐藏元素

基于屏幕空间来显示或隐藏 UI 元素。将原本在同一行内的元素折叠收起，通过一些交互动作来获取完整信息（如点击、Hover、快捷键等）。

实现方式1
在内容超出容器时，折叠在视窗外的内容。通常用在内容数量或所占宽度不固定时的一种适配方式。

实现方式2
视窗宽度到达某个断点时折叠。在这种方式下内容宽度不会影响是否折叠，所以适合用在内容固定的场景。判断到出最佳断点时机后才触发折叠。

交付布局适配方案

在实际网页中还原响应式布局的适配时，前端会用到的主要是两种方式：

• 给内容设定相应的适配方式，会用到 Flex 布局。
• 通过断点来改变布局，则是用到媒体查询；

这里不会从前端角度展开来说这两种方式的特点，而是会介绍在做设计时如何交付布局适配方案。

交付内容适配方案

内容适配通常指的是在一些卡片或容器里面的内容、文本、控件等的适配方式。实践中我会专门在旁边加一个画板用来描述内容的适配方式。通常是先写容器的适配，再写文本的适配，因为通常文本总是会被容器所包裹着。

顺便再列举一些我常用的内容适配方式吧。由于我们业务的特点是需要支持国际化适配，所以很多地方都是需要用到内容宽度，而不是固定宽度。

交付断点适配方案

断点适配指的是我想在视窗宽度小于多少或大于多少时，布局作出怎样的变化。如果基础的设计稿是用 1920 宽度的画板来完成，那么我会在标注在视窗宽度小于某个值时时，希望页面的布局会如何变化。

这一部分是偏向标注一些较大的布局改动。比如卡片的列数、一行的内容个数等等，这些适配是需要前端利用媒体查询来做屏幕断点适配的。

新的适配方式

容器查询（Container Queries）能够让我们实现基于容器尺寸的响应式适配。

开始写这篇文稿时是九月初，那时候这个规则仍然在测试中。而刚好现在从 Chrome 106、Safari 16 开始，已经正式支持了。所以咱们有必要去了解容器查询的能力以及去畅享潜在的使用场景。

什么是容器查询

以往我们用媒体查询来实现自适应布局。让 CSS 探测浏览器的视窗宽度，大于或少于某个像素时作出相应的样式变化。

而容器查询允许我们探测一个容器的尺寸（比如某个卡片宽度、导航栏宽度等），基于此来做样式变化。

畅想适用场景

小型布局
容器查询的特点使得容器在做样式的自适应适配时可以更准确和灵活。比如在多列布局时，针对某一列的宽度来做更多的适配动作。

文本适配
由于可以探测容器或元素的宽度，或许在展示指标的时候能派上用场，即根据容器的不同宽度来调整字体大小、字重等。

这种事情在以往可能会需要用到 JavaScript 或其他方式实现，现在纯靠 CSS 就能实现了。

尤其是现在有了容器查询后，由于样式变化是基于原本的模块，而不是浏览器视窗的，我们或许甚至可以抽离出来，将这种适配方式做成组件化，会更灵活。

内嵌 iframe
iframe 嵌进网页之后，视窗宽度其实指的是 iframe 容器的宽度，而不是常规的浏览器宽度。如果此时 iframe 内的页面沿用常规的断点尺寸，那么效果会产生些许偏差。

因为 iframe 容器 始终是会比浏览器宽度要小。就好比 iframe 内网页断点设置是小于 1200px 时布局变更，那么实际上会在浏览器视窗比 1200px 大的时候，就已经发生了布局变更。

这时如果利用上容器查询的特点，或许就能确保布局变化始终在预期之内，不会受到 iframe 容器本身宽度而干扰。

总结

撰写这份文稿之前也有采访过几位交互设计师，针对他们的痛点也专门准备了相应的内容，希望能对他们有帮助。

都说分享会的最大受益人是分享者本人，确实这次在整理相关知识的过程中也有不少新的收获，对我来说在探索自适应和响应式布局的区别、尝试抽象归纳出尽可能多的适配方法、容器查询等等这些内容的时候我也有收获到不少东西。

参考

• Adaptive vs. Responsive Design
• iShadeed Lab - CSS Container Queries
• Page layouts
• 介绍2022最期待且已正式支持的CSS container容器查询 " 张鑫旭-鑫空间-鑫生活