Hướng dẫn tự động: Quy trình từ Figma → Template Liquid
File này mô tả toàn bộ các bước tôi thực hiện tự động để chuyển đổi thiết kế Figma thành template Liquid.
Tổng quan quy trình
Figma Design → Export HTML/TailwindCSS → Ghép vào Template Liquid → Gắn dữ liệu PHP
Bước 1: Export Figma sang HTML
Trigger: File instructions/export_html.md chứa các link Figma cần export.
Hành động tự động:
- Truy cập từng link Figma trong
export_html.md - Implement design thành HTML + TailwindCSS (dùng
@tailwindcss/browser@4CDN) - Lưu file HTML vào thư mục
export_to_html/ - Lưu ảnh vào thư mục
export_to_html/image/, đặt tên file ảnh tương ứng với từng phần - kiểm tra lại file vừa xuất, so sánh với thiết kế để cho ra bản hoàn hảo
- chạy lần nữa kiểm tra code từ giao diện với thiết kế
Các trang đã export:
| File output | Figma node |
|---|---|
export_to_html/index.html |
Homepage |
export_to_html/category.html |
Trang danh mục sản phẩm |
export_to_html/product-detail.html |
Trang chi tiết sản phẩm |
export_to_html/home-article.html |
Trang danh sách bài viết |
export_to_html/cart.html |
Trang giỏ hàng |
export_to_html/article-detail.html |
Trang chi tiết bài viết |
Bước 2: Thiết lập cấu trúc Theme
File gốc: template/theme.html
Hành động tự động:
- Lấy
<head>và các thẻ CSS từexport_to_html/index.html - Cấu trúc
theme.htmltheo dạng:<!DOCTYPE html> <html lang="vi"> <head> <!-- fonts, tailwindcss CDN, daisyui CDN --> <link rel="stylesheet" href="{{ 'miq-homepage.css' | asset_url }}" /> </head> <body> {% include "other/header" %} <main id="layout-content"> {{ page_content }} </main> {% include "other/footer" %} {% include javascript/index %} </body> </html> - Tách header ra
template/other/header.html - Tách footer ra
template/other/footer.html - Tách JS global ra
template/javascript/global.html - Include
javascript/globaltrongtemplate/javascript/index.html
Quy tắc xử lý đường dẫn:
src="image/xxx.png"→{{ 'xxx.png' | asset_url }}href="/xxx"→ giữ nguyên hoặc dùng biến Liquid tương ứng- Ảnh lỗi: thay bằng
{{ 'no-image.png' | asset_url }}
Bước 3: Ghép Header + Dữ liệu Menu
File data: data/menu.php
File template: template/other/header.html
Hành động tự động:
- Đọc cấu trúc menu từ
data/menu.php - Thay nội dung danh mục tĩnh bằng vòng lặp Liquid:
{% for item in menu %} <a href="{{ item.url }}">{{ item.name }}</a> {% endfor %} - Category icon chỉ hiển thị khi
is_featured = 1:{% if item.is_featured == 1 %} <img src="{{ item.icon | asset_url }}" onerror="this.src='{{ 'no-image.png' | asset_url }}'" /> {% endif %} - JS liên quan đến header (mobile menu, dropdown...) để trong
template/javascript/global.html
Bước 4: Ghép Homepage
Trigger: File instructions/ghep_homepage.md
File nguồn: export_to_html/index.html
File đích: template/home/home.html
JS trang chủ: template/javascript/homepage.html
Checklist tự động:
- Copy nội dung
<main>từindex.htmlvàohome.html - Banner: Lấy dữ liệu từ
data/banner/banner.php, implement Swiper slider:{% for banner in banners %} <div class="swiper-slide"> <img src="{{ banner.image | asset_url }}" alt="{{ banner.title }}" /> </div> {% endfor %} - Category icon: Dữ liệu từ
data/menu.php, filteris_featured = 1 - Sản phẩm đã xem: Biến
product_historytừdata/home.php - Bộ sưu tập: Biến
product_collectiontừdata/home.php- Max 8 sản phẩm
- Ẩn section nếu
product_collectionrỗng
- Sản phẩm theo danh mục: Biến
product_categorytừdata/home.php- Loop qua từng danh mục
- Max 5 sản phẩm/danh mục
- Lấy tên & URL từ
categories[0]của sản phẩm đầu tiên - Ẩn nếu rỗng
Bước 5: Ghép Trang Danh Mục Sản Phẩm
Trigger: File instructions/ghep_category.md
File nguồn: export_to_html/category.html
File đích: template/product/category.html
File data: data/product/category.php
Hành động tự động:
- Copy HTML từ
category.htmlvàotemplate/product/category.html - Thay danh sách sản phẩm tĩnh bằng Liquid loop:
{% for product in products %} <div class="product-card"> <img src="{{ product.image | asset_url }}" /> <a href="{{ product.url }}">{{ product.name }}</a> <span>{{ product.price | money }}</span> </div> {% endfor %} - Gắn breadcrumb, tiêu đề danh mục, phân trang
Bước 6: Ghép Trang Chi Tiết Sản Phẩm
Trigger: File instructions/ghep_product_detail.md
File nguồn: export_to_html/product-detail.html
File đích: template/product/detail.html
File data: data/product/detail.php
JS: template/javascript/product-detail.html
Hành động tự động:
- Copy HTML vào
template/product/detail.html - Swiper Thumbs Gallery: Implement cho ảnh sản phẩm + Fancybox khi click
- Tab thông số/mô tả: Chuyển tab hiển thị nội dung
- Nút xem thêm/thu gọn cho mô tả sản phẩm
- Thêm vào giỏ hàng: Thông báo mua hàng thành công
- Nút mua hàng: Chuyển hướng tới
/cart - Gắn biến Liquid từ
data/product/detail.php
Bước 7: Ghép Trang Giỏ Hàng
Trigger: File instructions/export_cart.md
File nguồn: export_to_html/cart.html
File đích: template/cart/home.html
File data: data/cart/home.php
JS: template/javascript/cart.html
Hành động tự động:
- Copy HTML vào
template/cart/home.html - Tăng/giảm số lượng: JS cập nhật số lượng
- Tính giá: Tự động cập nhật tổng tiền khi thay đổi số lượng
- Xóa sản phẩm: Xóa khỏi danh sách giỏ hàng
- Gắn biến Liquid từ
data/cart/home.php
Bước 8: Ghép Trang Bài Viết
Trigger: File instructions/exrport_article.md
File data: data/article/home.php, data/article/detail.php
8a. Trang danh sách bài viết
- Nguồn:
export_to_html/home-article.html - Đích:
template/article/home.html
8b. Trang chi tiết bài viết
- Nguồn:
export_to_html/article-detail.html - Đích:
template/article/detail.html
Cấu trúc thư mục dự án
agent_test/
├── export_to_html/ # HTML export từ Figma (nguồn)
│ ├── index.html
│ ├── category.html
│ ├── product-detail.html
│ ├── home-article.html
│ ├── cart.html
│ ├── article-detail.html
│ └── image/
├── template/ # Template Liquid (đích)
│ ├── theme.html # Layout chính
│ ├── home/home.html
│ ├── product/
│ │ ├── category.html
│ │ └── detail.html
│ ├── article/
│ │ ├── home.html
│ │ └── detail.html
│ ├── cart/home.html
│ ├── other/
│ │ ├── header.html
│ │ └── footer.html
│ └── javascript/
│ ├── index.html # Include tất cả JS
│ ├── global.html # JS dùng chung (header...)
│ ├── homepage.html # JS trang chủ (Swiper banner...)
│ ├── product-detail.html
│ └── cart.html
├── data/ # Dữ liệu mẫu PHP
│ ├── menu.php
│ ├── banner/banner.php
│ ├── home/home.php
│ ├── product/
│ │ ├── category.php
│ │ └── detail.php
│ ├── article/
│ │ ├── home.php
│ │ └── detail.php
│ └── cart/home.php
└── instructions/ # File hướng dẫn từng bước
├── export_html.md
├── ghep_homepage.md
├── ghep_category.md
├── ghep_product_detail.md
├── export_cart.md
├── exrport_article.md
└── huong_dan_tu_dong.md ← file này
Quy tắc chung khi ghép Liquid
| Tình huống | Cú pháp Liquid |
|---|---|
| Hiển thị biến | {{ variable }} |
| Định dạng tiền | {{ price | formart_price }} |
| Đường dẫn ảnh asset | {{ 'file.png' | asset_url }} |
| Ảnh lỗi fallback | onerror="this.src='{{ 'no-image.png' | asset_url }}'" |
| Vòng lặp | {% for item in list %}...{% endfor %} |
| Điều kiện | {% if condition %}...{% endif %} |
| Ẩn nếu rỗng | {% if list != empty %}...{% endif %} |
| Giới hạn số lượng | {% for item in list limit: 8 %} |
| Include file | {% include "other/header" %} |
Thứ tự thực hiện
1. export_html.md → Export Figma → export_to_html/
2. theme.html → Thiết lập layout chính + header/footer
3. ghep_homepage.md → Ghép trang chủ + dữ liệu
4. ghep_category.md → Ghép trang danh mục
5. ghep_product_detail → Ghép trang chi tiết sản phẩm
6. export_cart.md → Ghép trang giỏ hàng
7. exrport_article.md → Ghép trang bài viết