---
sidebar_position: 3
---

# Hướng dẫn cắt vòng quay

Dưới đây là một số cách cắt vòng quay cơ bản, dễ làm và miễn phí.

:::tip

Nếu bạn muốn Vòng quay nhiều `màu sắc, hoạt ảnh, hiệu ứng...` xin vui lòng liên hệ bộ phần **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được tư vấn thêm về thiết kế.

:::

## Thiết kế bằng Figma

**[Figma](https://www.figma.com/)** là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác.

### Đăng kí tài khoản (Miễn phí)

Để sử dụng một cách đầy đủ nhất vui lòng **đăng ký tài khoản (miễn phí)** tại **[Figma](https://www.figma.com/)**, sau đó ấn <button className="btn btn-submit">Get Started</button>.

![Figma Homepage](./img/minigame-tutorial-design-wheel-1.png)

:::danger

Sau khi `Đăng ký` xong tài khoản, vui lòng `Đăng nhập` để thực hiện bước tiếp theo.

:::

### Sử dụng thiết kế có sẵn

Nhằm đảm bảo cho việc rút ngắn thời gian, đơn giản hóa công việc tạo **Ô sản phẩm trên vòng quay**, chúng tôi xin cung cấp các mẫu có sẵn theo từng số lượng cố định ở Link:

- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 1](https://www.figma.com/file/EOx1EPnA2OkzQD5FEZzNJo/Thi%E1%BA%BFt-k%E1%BA%BF-v%C3%B2ng-quay-may-m%E1%BA%AFn-c%C6%A1-b%E1%BA%A3n-1?t=0U0p17qqc1kVnfjl-1)**

- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 2](https://www.figma.com/file/T2aqeEFOUoB2o9fIA67wak/VONGQUAY_6-8-10-12?t=vLvTMihgA3xTmQKr-1)**

Để chỉnh sửa vui lòng làm theo các bước:

- Ấn vào dấu mũi tên đi xuống `(vị trí 1)`.
- Ấn **Duplicate to your drafts** `(vị trí 2)`.
- Ấn **Open** khi có thông báo đã thành công `(vị trí 3)` hoặc quay lại **[Figma](https://www.figma.com/)** để tìm, lưu ý cuối tên file có chữ `(Copy)`.

![Figma Duplicate Draft](./img/minigame-tutorial-design-wheel-2.png)

:::caution

- Thiết kế mẫu chỉ bao gồm `Hình ảnh các ô trên vòng quay`. Bạn cần chọn `ảnh sản phẩm` phù hợp cùng với `tên giải thưởng` để chèn vào bên trong.
- Khi **[Cài đặt vòng quay](../tutorial-minigame/wheel)** vui lòng `theo thứ tự như mẫu, màu sắc SOLE với nhau` để hình Vòng quay được hiển thị đẹp nhất.

:::

### Thiết kế theo số lượng tự chọn - Figpie

:::caution

- Cần thời gian và sự tỉ mỉ.
- Số lượng ô trên vòng quay khuyến nghị là từ 4 - 12.
- Nếu gặp khó khăn vui lòng liên hệ bộ phận **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được giúp đỡ.

:::

- Vào Link **[Figpie](https://www.figma.com/community/plugin/924390003304842148/Figpie)**, sau đó ấn <button className="btn btn-submit">Try it out</button> để cài đặt.
- Bạn sẽ được chuyển về trang Thiết kế của Figma, một Popup thông báo sẽ hiển thị, Ấn <button className="btn btn-submit">Run</button>.
- Plugin **Figpie** hiển thị báo gồm các cài đặt sau:

  - **DATA:** số lượng ô trên vòng quay.
    - ấn `+` để thêm và ấn `-` để xóa.
    - nhập `value` giống nhau, mặc định là `5`.
  - **DIAMETER:** `chiều cao và chiều rộng` của Vòng quay.
  - **THEME:** màu sắc mặc định của các ô.
  - **PREVIEW:** xem trước Vòng quay hiển thị.

  ![Figpie](./img/minigame-tutorial-design-wheel-3.png)

- Ấn <button className="btn btn-figpie">Create a pie chart</button> để tạo.

- **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là &#127829;) trong số đó và làm theo hướng dẫn:

  - Kéo ra ngoài `(2)`
  - Xóa viền trắng mặc định `(3)`, ấn dấu `-`
  - Chỉnh màu `(5)`
  - Chỉnh lại góc nghiêng `(4)` sao cho &#127829; dựng thẳng đứng `(6)`image.png

  ![Figpie Tutorial 1](./img/minigame-tutorial-design-wheel-4.png)

- **Tạo Frame** để bọc khung `Ô vòng quay` vừa lấy được:

  - Ấn trên bàn phím nút `F`, sau đó kéo thả chuột tạo 1 **Frame** với `chiều cao` bằng với &#127829;, `chiều rộng` sẽ tự căn chỉnh sau `(1)`.
  - Kéo &#127829; `(2)` vào bên trong **Frame** `(1)` sẽ được **Frame** `(3)`
  - Xòa màu nền bằng cách ấn vào `-` `(4)`
  - **Frame** hoàn thiện `(5)`, copy `Ctrl + C` và dán `Ctrl + V` lại ở vị trí khác rồi đổi màu sẽ có &#127829; khác `(6)`.

  ![Figpie Tutorial 2](./img/minigame-tutorial-design-wheel-5.png)

- Việc cuối cùng là tạo thêm các &#127829; để thêm nội dung vào đó rồi xuất ảnh.

## Thiết kế bằng Photoshop

`Đang cập nhật`
