This free UX Kit allows you to build a WeChat mini program prototype collaboratively
TLDR: gladly sharing here a toolkit made for anyone planning to launch an app for China’s super app: WeChat 微信 and its powerful Mini Programs 小程序.
👉 Hit this link to open the WeChat UX Kit on Figma
What’s included?
This tool includes over 100 components replicating WeChat, the Chinese super-app and its infamous mini-programs. It also features exclusive components of the trendy WeCom platform (formerly named WeChat Work, i.e the enterprise version of WeChat).
What is it for?
With this exhaustive list of assets, total beginners can bring together wireframes (low fidelity screenshots) and demonstrate a WeChat user journey in the most efficient manner through Figma.
This toolkit was used extensively by non-tech executives, entrepreneurs and designers in various iterations during training programs, and is brought to you by Le Wagon.
How can you use it?
Here’s a small guide for first-time users.
You just got out of an ideation session, a project briefing or an inspiring night out drinking, and you now have this insanely good app idea written on a note. You think you know who, you sort of know why, and you certainly know how to make it wow! It’s a damn good idea, right? right? Wait.
If you are familiar with the steps of Design Thinking (Empathise, Define, Ideate, Prototype, Test), you know what comes next! It’s now time to turn this service idea into a friendly prototype and validate it quick. Like, real quick.
Before you jump into PowerPoint to create a wordy deck — let me clarify when I say validate: I meant to test it with users. Your boss, your tech lead and your partner in life will have to wait for their 2 cents.
Here comes this very trendy design tool named Figma. Figma is online, is free to sign up, and is extremely efficient. Some of the world’s best designers love it, and although major contenders such as Sketch or Adobe still have legions of fans, we chose Figma to bring you this unique UX kit.
One reason: productivity! Figma lets you take a project link and clone it to your “drafts”, then keep working on it. There you can invite your own colleagues to view or edit collaboratively LIVE. Next, you can render an interactive prototype and show it to your end-users…. A team of 3–4 designers — whatever is their level — can achieve results in hours, instead of days/weeks with traditional design apps.
***
Instructions
***
Your journey starts by opening this Figma link on a new tab.
- Click the Duplicate button, a clone will immediately be created for you to use. You will need to log in or sign up to Figma. It’s free.
- Under the Layers tab (top left), press the + button to Add a New Page. You will use this canvas to display all your app wireframes.
- Hit the F key (F for frame) on your keyboard, and select iPhone 8 in the right-hand menu. A white frame will appear.
- Under the Assets tab, you will find a list of components grouped by type in a left panel. Try searching (in English or Chinese!) a component name to locate it fast, or open/close sections manually.
- (Optional:) Select 屏幕 Screens and drag and drop the item from the left panel inside your page. This allows you to quickly add a non-white background and borders to your frame. All components in this kit are of 375 of width by default, like the iPhone 8.
- Navigate the groups for major components such as Navigation Bars. Drag and drop the iconic WeChat mini program Navigation Bar named 默认导航栏 (see it below).
Complex components like this one are built with overrides, meaning they include sub-components which you can change (override) with the right panel “swap instance”. You can override each instance of the components you have on the screen! Unlimited combos.
- Most of our components are powered by the recent Figma auto-layout feature: they will expand automatically with the content you give them.
- Design your core user-journey, from landing-page to finish, with 1 frame for each action. In each frame, quickly bring together the components you need and tweak its content.
- Colors? Fonts? Images? They do not matter at this stage. Focus your attention on achieving the app goal in as few steps as you can!
- Now turn your frames into an interactive prototype! In the top-right corner, you can switch Figma from Design to Prototype mode. There you will draw connections between your frames or components.
- Give it a try and refine multiple times. Press “PLAY” ▷ button to present.
What is your feedback when using it for the first time?
What sort of bugs did you notice?
What did you build with it?
Feel free to reach out 🙌
Le Wagon is an international coding school bringing technical skills to creative individuals in China and 20 other countries. Rated 1st Coding Bootcamp worldwide, its curriculum and mentors empower participants to learn JavaScript and design WeChat Mini Programs from scratch.
Related links
👉 Entrepreneurs: learn how to make your own WeChat mini program
👉 4 UI libraries to use in your WeChat mini programs
👉 WeChat mini programs: which framework choose?
👉 Recruiters: WeChat developers for hire
Connect with our teams:
🚩 Le Wagon in Chengdu
🚩 Le Wagon in Shanghai
🚩 Le Wagon in Shenzhen
↓ Liked this free kit? Clap this story!
