In addition to its rounded corners and Liquid Glass, macOS 26 Tahoe brings substantial change in app icons. These follow the move to squares with rounded corners brought in macOS 11 Big Sur, and now enforce that outline on all apps, including Apple’s. The result is that icons of irregular shape, such as those used by SilentKnight and the rest of my apps, will be intentionally shamed by reduction in size and placement in a sin bin of a grey square with rounded corners. Although some developers are busy implementing workarounds, Apple has made it clear that it expects conformity with this new style.
While app designers and developers have to work within those stricter constraints, Tahoe opens up new user options in the display of app icons, extending the light and dark appearances that have been standard since macOS Mojave seven years ago. System Settings now provide a choice of four rendering modes for the display of icons and widgets, in dark, clear, tinted and default, with a further option for tinting colour.
To accommodate these changes, Tahoe has a new app aimed at those designing and implementing app icons, Icon Composer, free for anyone to download from here, and compatible with macOS Sequoia and later. Although not intended for customising icons within existing apps, it provides insight into these new design constraints and rendering modes.
In the past, app icons have been able to distinguish themselves by their form, colour and internal details, with the first two becoming dominant as their size is reduced in a heavily loaded Dock. By enforcing a uniform outline, Apple’s new interface style makes this task harder. I already have difficulty distinguishing Messages, FaceTime, even Numbers and Archive Utility, which in turn forces me to separate them in the Dock, and I still occasionally open the wrong app as a result. Other confusions have become common: Xcode, Developer and several third-party app icons are also hard to distinguish when at small size. Apple clearly hasn’t listened to criticism from users and developers, and has only made this worse in Tahoe.
We’re therefore left to make the best we can within these new rules. My recent redesigns for my own apps are an initial attempt to make their icons as distinct as I can, and to remain so in older versions of macOS at the same time.
I’ll start with the new icons for Mints, SilentKnight and SystHist, seen in the Dock in existing macOS in light mode.
and dark mode
Here, with the addition of XProCheck, are four of the many possibilities in Tahoe, first in light mode with default rendering
then in dark mode, again with default rendering
Clear rendering decolourises them into monochrome with valuable contrast
but tinted rendering makes their details even harder to read
As I gain experience in using Icon Composer, and understand better how Liquid Glass may be able to enhance the results, I intend improving on these. For the time being, though, what you see in these updated versions works better across all recent versions of macOS and Tahoe. As with other features of macOS 26, these will take further tuning on my part, and patience on yours. Please bear with me in the coming weeks and months.
Quick Look is one of those unsung heroes that have transformed our Macs and workflows. What used to require a specialist app can now be accomplished in the Finder using a combination of Quick Look and Gallery view to browse collections of images.
This started back in Classic Mac OS, when apps created thumbnail images and attached them as ICN# resources to the original files for display in the Finder. It wasn’t until Mac OS X 10.5 Leopard in 2007 that Apple added Quick Look to perform this automatically using cached thumbnails and previews. Since then our Macs have worked hard to ensure that, wherever we want them, we can see faithful miniatures, at least until macOS 11 Big Sur.
Although the redesign brought by Big Sur in 2020 was generally well received, one feature I complained about at the time was its effect on Quick Look thumbnails and previews, in rounding their corners to conform to its design style. But style triumphed over fidelity, and for the last five years Quick Look has been forced to tell lies in every image thumbnail and preview.
By now you’ll have guessed I’m no fan of Apple’s new-found obsession with rounding every right angle in sight. I have yet to see any objective evidence that this has any purpose beyond aesthetics. If you’ve seen screenshots of the first developer beta-release of macOS 26 Tahoe, then you’ll surely have noticed that, rather than restoring fidelity to Quick Look, this fiction has grown and only become more prominent. I demonstrate this in a series of four screenshots showing the same image that have been rescaled to similar display sizes.
This first is taken from a small, almost thumbnail-size, image in the Finder’s Gallery view. As this has been scaled up, it’s pixellated. I draw your attention to the upper corners, where trees have been cropped at what once would have been right angles.
Seen here is the same image in a larger Gallery view. The extent of the cropping at the upper corners is now apparent, where this contains details that were removed from the smaller image above.
When opened in Preview, the upper corners are no longer rounded, and show the full extent of the image, but the lower corners remain cropped by enforced rounding, apparently to make them ‘concentric’, as is the vogue.
To see the whole image rendered faithfully, I had to resort to a third-party app, here GraphicConverter 12, which has the honesty to display all four corners without cropping.
One of the cornerstones of the Mac from its earliest days is expressed in the principle of WYSIWYG, what you see is what you get. It enabled the ‘desktop publishing revolution’ that convinced so many to pay the premium for Classic Macs, and ever since has guided the development of Mac OS. Without it there would be no purpose to Quick Look in its efforts to render images faithfully.
That doesn’t merit mention in the principles expounded in Apple’s latest revised Human Interface Guidelines. Three are given there, hierarchy, harmony and consistency, but not fidelity. Rounding corners of rectangles is included there under the principle of harmony: “Align with the concentric design of the hardware and software to create harmony between interface elements, system experiences, and devices.”
I can live with concentricity in windows and controls, even with app icons forcibly constrained within rounded rectangles. What I simply can’t accept is a Macintosh, of all computers, cropping every thumbnail and preview for the sake of aesthetics, however harmonious that might seem. For without fidelity, the Mac fails.
我参与 3DFiti 这个艺术项目，旨在通过 3D 扫描和 3D 打印技术，使我们生活的周边环境增加一些趣味性和艺术性。在人类学家项飙（英国牛津大学社会人类学教授，德国马克斯普朗克社会人类学研究所所长）所描述的那个「附近」的概念之中延展出来，一切我可以到达的地方，只要有我感兴趣的公共区域内的「缺损」部分，就有可能成为这个艺术项目的创作对象。
我通过 iPhone 扫描空间或者物体，并对模型进行二次创作，使用 3D 打印技术将其制作成一件真实的物品，即能够与现场的「缺损」相嵌合的物件，使这个「缺损」转化为一处临时的微型艺术场所。
No.001 作品中的 紫竹观音像 3D 模型，是来自 Funes.world 的文件。他们的工作是在人类从原子社会进入到比特社会的过程中，将原本属于原子世界中的建筑、空间、故事，通过 3D 扫描建模的方式，将其保存在数字世界中，建成一座人类文明的数字空间博物馆。
To improve conversion (i.e., get more people to finish your flow), think about everything you request from the user like a cost. Every question is a cost. Every minute is a cost
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:
3D pictures are most likely used in landing pages, login pages, portal pages, and the like;
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:
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.
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:
Difficulties of matching business contexts. 3D pictures on the Internet support common scenarios well but can’t always precisely describe certain business scenarios.
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.
Risks of infringement. Using 3D pictures on the Internet might cause infringement, so applying it directly consists of potential risks.
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:
Quick render. Since it is not worth it to spend much time on it during my work time.
Consistent style. Ensuring our design has great scalability.
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 in 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 in 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/
这是一期 荒野楼阁 WildloG 和 皮蛋漫游记 的串台节目，由我和零号、初号一起，聊聊今年 Apple 发布的新产品以及一些周边的信息，作为 设以观复x两颗皮蛋 合作的那期视频内容的一些补充。
今年 iPhone 16 系列着实挺闹心的，一方面是 Apple Intelligence 的大饼迟迟未能落地，另一方面 Camera Control 独立按键加得有点莫名其妙。但我们还是决定在深入体验和使用 iPhone 16系列之后，能够匹配我们的深度测评内容一起，跟大家聊聊今年库克又挤出来了多少牙膏？
Login
而且是毒蘑菇！
