Growing Living Designs with Figma
Before we dive into the topic, I’d like to talk a bit about Figma. Figma is a powerful and ever-evolving UI design and prototyping tool. It’s built upon web technologies and works well across platforms. The multiplayer and the easy-to-use library feature makes it an excellent tool to build complex systems.
Transition
Before we turn to use Figma, we manage all the UI designs with multiple Sketch files hosted on our Abstract organization. But several issues becoming more and more severe that finally pushed the idea of transition:
- Performance problems on old Mac models.
- We use lots of images in the documents, and this leads to some large Sketch files and an enormous Abstract git tree.
- We were expanding the usage of Sketch to marketing assets, but Sketch is only available on macOS.
- Sketch cloud does not exist at the time, and we need the feature of quickly transform data inside design documents to production-ready libraries. The Sketch plugin solution is too limited to local Sketch files.
Structure
Based on our existing Sketch files structure, we established a complete structure that merges our UI designs with branding and marketing designs. You can see the anatomy of the structure below:
We heavily rely on the shared library feature on Figma to form the whole system layer by layer. We distribute all colors, text styles, layout grids, icons, and even illustrations throughout the entire structure.
Now let’s dive into it layer by layer.
Design Gene
Our design gene system is not an ordinary design tokens collection, but rather a more flexible system consists of colors, icons, and illustrations. Basic text styles are defined specifically for different platforms.
Palette
The first thing we migrated from the previous Sketch library is the palette of the whole app. Below is the playground cardboard that we use to determine the correct colors.
Interface Basics
In the first row, you can see several primary interface colors defined for the base (low, medium, high), divider (normal and lighter), scrim, interactive element state (hover, active, disabled), and card related colors (edge, shadow-near, shadow-far).
Typography Basics
In the second row, we defined the colors for texts act as the role of primary, secondary, caption, placeholder, and disabled.
Tints
Since our company has multiple services running and planning to have more to come in the future, we chose seven tint colors for the best flexibility. Then we developed several variants fo each color: outline, medium to large text color, and small text color.
Besides these seven colors, we also added the gold color represents a high-quality service and two colors for serious and successful situations.
Gradients
In the bottom row, we have a primary gradient that merges all the tints mentioned above and several gradients for general graphical purposes.
Dark Mode
To support dark mode recently added to all the platforms, all the colors except general gradients have a variant for dark mode.
Icons
We loosely categorized icons inside Design Gene into objects, metaphor, actions, navigation, information, and device. What we have planned is to use the component description of every icon to provide multiple labels for each icon to enable better search experience on a WIP design guideline website.
One essential feature in Figma is performing boolean operations on stroke elements and existing components. What you see below is how we build a new “arrived at the store” icon with the existing “store” icon.
In the first icon, you may notice that we make the whole icon with strokes. It’s because that Figma does not treat a union of strokes as a “shape with many strokes” but a “shape formed with the area filled with strokes.” The result is each icon component has only one single vector node as the child, which enables a vital capability to connect the Figma file with our jss-design-gene GitHub package. So all the icons inside that library can be updated with a single command powered by Figma API. We’ll talk about more details in a future post.
There’s a helpful small tip: If you want to get vector node of stroke (A) without flattern it, just add another random shape or stroke (B) and union these two with boolean operation. Delete the B, and you get a vector node without loosing all the informations of original stroke A.
To add a small arrow with some clean spaces around it, we simply subtract the icon with a thick stroke width arrow and then union it with a regular width stroke one. All done!
Design Gene Extension
After using the design gene library for a while, we find out that we require much more colors and elements for marketing needs and better UI design.
Extended Palette
We expanded the palette to include grayscale, seven primary colors, and several more special colors. We then add ten variants scale from -5 to +6 to bring different shades to the palette.
Illustrations
The Illustrations in Design Gene Extension library comes in several handy sizes: 64 by 64, 240 by 240, 480 by 480.
Illustration component provides another advantage: real-time dark and light background check. Since a master component is in sync with all its instances in the same file, we can see if this illustration works on both backgrounds at a glance.
Components
We have a set of base components that work across platforms, which is a collection of buttons, inputs, cells, and layout elements. All of them share a common visual language. One thing worths notice is that we use 1 unit border on buttons and two units border on inputs to help create a characteristic pattern of how to distinguish between these two kinds of elements.
Besides that, we have also explicitly added designed components for mobile and web; we built many of them with base components.
Since we have a set of seven tint colors aim our many kinds of services, we use the tint color a lot in the components to not just indicate an interactive UI element, but also embrace the service identity.
In the February release of Figma, the Figma team adds a new feature called selection color. This feature not only improved the design efficiency but also makes changing the tint color of components very easy. Cmd+select the tinted shape is no longer required. 🎉
Compares to Sketch, Figma does not provide a single panel to override a set of selected properties of a component. This causes many problems especially when handling long list or large collection. Even though there’re plugins to help render data into list, but we’re still looking forward to a better native solution.
UI
When organizing UI designs, we decided to organize them base on products, not platforms. All UI design related to a product lives inside the same file. So we can share some components across platforms and have platform-specific components without polluting shared team libraries.
We are going to dive into some parts of the structure which utilize the Figma features best.
Please note that we use shared UI design across Android and iOS. The structure above is more of a generic reference.
UI Design
Based on the Design Gene (and extension) and components libraries, we’re now able to deliver a consistent and “living” UI design.
Since we already have the dark version of all design gene colors defined, and all primary colors in the extended palette range from -5 to +5, it’s effortless to create a Dark Mode version of any given screen. With the previously mentioned Selection Colors Figma feature, this process is rather quick and easy.
During the design process, Figma’s Auto Layout feature is quite helpful since we have a lot of lists (really a lot of them) in our app. You can see two examples of usage below:
On the left, you can see a list wrapper contains several cells inside by enabling Auto Layout on the wrapper frame and set required fill, border, and corner radius properties. Along with other wrappers in the master list wrapper, we now have a good-looking search results list.
On the right, you can see by enabling Auto Layout on the cell item master component; we gain the ability to change cell height automatically when text lines count change.
Even though this feature is helpful and quite easy to use, the lack of flex layout and absolute positioning still causes some productivity loss. Hoping to see these features in future updates.
Store Screenshots
To link the store screenshots directly with UI designs, we transformed several primary UI frames into components, then created several helper components for iOS and Android like below:
Just by switching screen instance, we’re able to design many store screenshots with a device frames. And also, the ability to override texts inside a component instance makes it easy to do localization. By simply change texts inside a selected instance and makes it a new component. We now have a Chinese localized version of this screen. The same thing applies to the actual screenshot layout. You can see the result below:
Branding
Since we built a font specifically for our logo, we don’t have a lot to cover in this section. We created a project to hold many logo designs in many different sizing and usages for various online platforms.
Further details regarding our brand font and brand color management, we have a dedicated article about it later.
Marketing
Since we didn’t add many eye-catching color-filled areas, we can design in-app promotional images as bold as we want, only several principles required:
- Use our extended palette or a palette extracted out of logos and images that our partners provide.
- Use patterns to add delightful small details.
- If you don’t have enough assets, consider adding elements from Artboard Studio.
Similar to the store screenshots, we utilized the Component feature to localize our digital marketing assets effectively. With multi-language text size and position in mind, we can easily create a localized version of nearly any marketing images.
During this process, we would really love to have the ability to create frames with custom size presets just like in Sketch. (Hello, Figma.)
The Multiplayer feature is also critical since it provides face-to-face-liked experience when our designer communicates with our marketing team. A big boost in efficiency during our quarantine time.
Recap
For anyone reading this part, I believe you have a better understanding of why we adopted Figma as our primary digital design tool. Multiplayer, Shared Team Library, unique pen tool, Auto Layout, Figma API, and many more, correctly adopting these features is the key to have a system of real living designs.
I summarized the whole process of building our living designs, and I tried my best to fit them into this article, but I didn’t have a chance to talk about a lot of details. So I’ll have several articles covering these details in the future. Stay tuned if you’re interested.
Disclaimer:
- It’s not a promotion article for any products mentioned above.
- The process mentioned in this article may not fit your real needs.
Copyright Notice:
- Please do not publish this article or any translated version to other platforms without getting in touch with us first.
- Our partners provide all restaurants and many promotion-related images. I only use them here to help better convey the whole concept.
- Photo by Renáta-Adrienn on Unsplash
- Photo by pan xiaozhen on Unsplash
