Author: Zhao Henrui, graduated from Nanyang Technological University, Singapore, currently Shopee financial merchant team front-end development engineer
Thanks: Wu Chenmu, graduated from National University of Singapore, now Shopee designer; Li Chengxi is the front end Leader of Shopee financial merchant team
The Shopee Iconbot is a Figma plugin that directly exports and publishes all SVG ICONS from existing files to the NPM icon library, helping designers deliver their ICONS with one click.
Pain points
The reason for this solution is that the team recently encountered a lot of difficulties in collaboration with the designer when developing the icon component library for the project.
Figma design usually contains hundreds of ICONS. According to the previous process, we need to export the ICONS from Figma one by one and copy them to the project, and then make some changes to the Icon codes in order to support some customized functions (such as color change, etc.). The process is lengthy and complex.
In the subsequent update and maintenance, we need to check with the designer every time for the addition, decrease and modification of icon, and repeat the above process for all updated ICONS. This is clearly not an efficient and sustainable way to work together.
Existing solutions
To optimize this process, I worked with designers to look at existing chart library solutions on the market. The main criteria to be considered are loading speed, the functional requirements of the icon library for the project, and the efficiency of collaboration.
IconFont
IconFont encapsulates a set of vector ICONS in the form of a font file and is called via CSS @font-face as a Web font. It has the advantage of being lightweight and flexible, but some disadvantages are also obvious. For example, IconFont only supports all monochrome ICONS or all multicolor ICONS in a project, not both. Also, browsers treat IconFont as text, and text is anti-aliased, which sometimes results in graphics that are different than expected. At the same time, IconFont is not compatible with SVG directly exported by Figma. It does not support fill-rule= “evenodd” in SVG. Almost all hollow out ICONS need special treatment by designers, which adds a lot of work.
SVG
This is where the SVG format ICONS come in. It is both a vector image and an existing image. It is also accessible, good for SEO and accessibility, and better than IconFont in terms of performance and maintenance. Regardless of compatibility with Internet Explorer 8 and below, SVG is clearly the best choice for icon delivery in the current format. After looking at Juuun’s approach (Ref: Fully automated delivery of SVG ICONS using Figma + GitHub Actions), I decided that adding multicolored ICONS and Gitlab support, and optimizing the working logic, would lead to efficient icon delivery. Currently, the project has two ways to introduce SVG ICONS: Inline SVG, or SVG Sprite, which is similar to the Sprite technology in CSS. The icon graphics are integrated so that the actual rendering of the specific icon is accurate. The symbol element is usually used with the use element to accurately locate. An SVG Sprite is faster than an Inline SVG rendering when a large number of ICONS are rendered simultaneously on a single page, but most pages in a project have ICONS between 5 and 15, and the difference in speed is minimal. Importantly, HOWEVER, SVG Sprite does not support gradient, which is a necessary feature for some projects, so I decided to build the icon library in Inline SVG for compatibility.
A new delivery approach: Shopee IconBot
Based on the pain points of our collaboration with designers and the research of existing solutions, I have concluded and optimized an automated Figma icon publishing process for our team projects: Shopee IconBot. With just one click of the designer, the ICONS in the Figma file will be converted into lightweight and easy-to-use React components and automatically published to NPM. Once released, developers can update their dependencies and introduce those components as needed. In addition, the Shopee Iconbot allows you to flexibly adjust the color and size of ICONS, allowing you to create multi-color icon components by simply configuring the file name of the multi-color icon as required.
How does it work
Gitlab version 8.0 has been fully integrated with GITlab-CI from the beginning. By scripting CI/CD processes, we can easily design our own pipelines to achieve our own automated workflows. In addition, Figma provides a number of HTTP-based apis and plug-in platforms that allow users to easily access the data in Figma files. This makes this efficient delivery possible. The workflow of Shopee IconBot is as follows:
When the designer has finished designing the icon component, open the Figma plugin, update the version number, and click Publish. The plug-in will automatically pull the update branch from the Master, which will trigger the Gitlab Pipeline to fetch all the ICONS in the current Figma file and automatically execute the script to process the SVG file and convert it to the React component. And modify attributes such as “fill” in the SVG code depending on whether it is configured with multicolor ICONS. After that, the React component is generated in Inline SVG mode. After the successful execution of Pipeline, Merge Request will be automatically initiated to master. After the developer approves MR, master branch will automatically execute Gitlab CI to deploy Gitlab Page and publish icon library to NPM.
Compared with Juuun’s larger scheme, my process puts the Merge Request after acquiring SVG ICONS, so that developers can clearly know which ICONS have been changed in this update when approving MR, so as to ensure the accuracy of icon library. In addition, this process has optimized the way to handle SVG, supporting multi-color ICONS, gradients and so on. In addition, the Shopee IconBot plug-in stores associations with Figma files and supports configuring different Gitlab repositories for different files.
How to use Shopee IconBot
-
Download the Shopee IconBot plug-in in Figma Community (currently the plug-in is not open source, and will be released when the features are complete)
-
The designer polished the ICONS in the Figma file and configured them as required
The icon element needs to be set to Main Component with a size of 40 x 40:Copy the code
ICONS whose names end in "colored" will be treated as multicolor ICONS. The color information will not be removed and the developer may not change the color of the icon components.Copy the code
ICONS whose names do not end in "colored" will be treated as monochrome ICONS, and the default color will be removed when the component is generated, and custom colors will be developed based on the context in which they are used.Copy the code- Developers create a repository of ICONS in Gitlab, providing addresses and tokens to designers. The designer opens the Iconbot plugin in the Figma file, enters the icon repository address and Token, and then clicks “Next”.
4. Designers set the version number and click “Push to Gitlab”. If webhooks are configured, update alerts will be sent automatically
- The plug-in automatically converts ICONS to React components and initiates a Merge Request to the Master branch of the icon library
- After receiving the MR reminder, the developer reviews the updated icon. After approving the icon, the icon library will be automatically published to NPM and a Gitlab Page will be generated.
- When developers are notified of a successful release, they can use commands such as “NPM update” to update the icon library. After the update, you can directly import the corresponding icon to use.
Today, more and more of our team’s projects are using this automated process to deliver ICONS, which not only saves the time to build the icon library at the beginning of the project, but also reduces communication costs for later updates and maintenance. The update and release of icon library will be notified to all parties by robot at every link, so that the cooperation between designers and developers will be more smooth and efficient.