[Article] Tini Shopping template

1. Giới thiệu

Download Tini Shopping template trên Figma community

Tini Shopping template là bộ template được build trên nền tảng Tini app, sử dụng Tini Design System.
Tini Shopping template được hệ thống lại từ phần lớn trải nghiệm mua sắm tại Tiki để đảm bảo sự đồng nhất về trải nghiệm cho user. Template bao gồm các tính năng:

  • Khám phá sản phẩm (browse product).
  • Tìm kiếm sản phẩm (search product).
  • Mua sản phẩm (purchase product).
  • Quản lí tài khoản và đơn hàng (account & order management).

Template bao gồm các trang chính như:

  • Trang chủ (Home screen).
  • Trang danh mục (Categories listing screen).
  • Trang tìm kiếm (Search screen).
  • Trang Filter và Sort (Filter & Sort screen).
  • Trang chi tiết sản phẩm (Product details screen).
  • Trang giỏ hàng (Cart screen).
  • Trang quản lý tài khoản (My account screen)

1.1 Đối tượng sử dụng

Các bên thứ ba cần build E-commerce app bằng giải pháp Tini App.

1.2 Lí do sử dụng

Đồng bộ hóa trải nghiệm mua sắm cho các Tini app.

Tini Shopping template được tổng hợp từ trải nghiệm mua sắm từ Tiki. Tuy nhiên với tính chất nhỏ gọn và đơn giản của Tini App, chúng tôi đã cố gắng lược bỏ các tính năng phức tạp của Tiki để đáp ứng cho các nhà bán nhỏ, đồng thời giúp cho user có thể khám phá, tìm kiếm và mua hàng một cách nhanh chóng cũng như quản lý đơn hàng một cách dễ dàng.

Tối ưu hóa tốc độ phát triển Tini app

Hệ thống Tini template nói chung và Tini Shopping template nói riêng được xây dựng để các Tini app builders có thể tận dụng những component có sẵn của template và custom lại để phù hợp.



2. Các flow chính

2.1 Khám phá sản phẩm (Browse product)

2.2 Tìm kiếm sản phẩm (Search product)

2.3 Mua sản phẩm (Purchase product)

2.4 Quản lí tài khoản và đơn hàng (account & order management)

2.5 Các flow phụ

Lọc (Filter)

Sắp xếp (Sort)

Chọn thuộc tính sản phẩm (Select product’s attribute)



3. Cách dùng Template trên Figma

3.1 Cài đặt

Download Tini Shopping template trên Figma community

Nếu bạn đang dùng Figma professional và sử dụng Tini Design System đã được publish trong team libraries thì bạn dùng cách sau để connect Tini Design System và Tini Shopping template.

Trước tiên bạn nên cập nhật bản Tini design system mới nhất tại đây. Tini design system được update mỗi tháng.

Sau đó bạn vào file Tini Shopping template vừa download để tiến hành connect với các component của Tini design system bằng feature Swap library của Figma.

Bước 1:

Mở asset menu, sử dụng chức năng swap library của Figma bằng cách click vào “Include 3 missing libraries”.

Bước 2:

Tại menu missing libraries, chọn library có nhiều component và style nhất.

Bước 3:

Chọn TIni Design System.

Bước 4:

Swap!

3.2 Figma bug và cách fix

Sau khi swap library sẽ có lỗi ở Bottom bar component

Lỗi:

Bình thường:

Cách fix:

Chọn item bị bug, đổi status Active và đổi lại lần nữa để vền status ban đầu, lúc này bug sẽ hết.



Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

4 Likes

Qúa xịn, team design năng suất quá ạ :smiley:

2 Likes