Pixeliro Logo
Pixeliro
Free Online Tool

Tạo Design Token - CSS, Tailwind, Figma & DTCG

Tạo design tokens từ bảng màu. Xuất sang CSS variables, Tailwind v4, DTCG JSON, Figma Tokens, Swift và Kotlin. Quy trình token hoàn chỉnh cho design system.

Pixeliro Logo

Color Palette

Add your brand colors

Export Tokens

Choose your target platform

styles/tokens.css
:root {
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;
  --color-accent: #F59E0B;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-neutral: #6B7280;
}

Key Features

Powerful features designed for designers and developers

Xuất Đa Nền Tảng

Xuất tokens sang mọi nền tảng: CSS, Tailwind v4, DTCG JSON, Figma Tokens, Swift và Kotlin.

CSS Variables

Tạo CSS custom properties sạch với đặt tên ngữ nghĩa. Hoạt động với mọi CSS framework.

Tailwind v4

Xuất tokens @theme inline Tailwind v4 với hỗ trợ đầy đủ thang màu.

Tiêu Chuẩn DTCG

Xuất định dạng W3C Design Token Community Group — tiêu chuẩn công nghiệp mới nổi.

Figma Tokens

Tạo JSON tương thích Figma Variables cho bàn giao thiết kế-phát triển liền mạch.

Mobile SDKs

Xuất Swift UIColor cho iOS và Kotlin Color cho Android — không cần code thủ công.

How It Works

Get started in just a few simple steps

  1. 1

    Tạo Bảng Màu

    Nhập màu thủ công hoặc tạo từ Color Palette Generator. Thêm màu chính, phụ và ngữ nghĩa.

  2. 2

    Chọn Nền Tảng

    Chọn nền tảng: CSS, Tailwind, DTCG, Figma, Swift hoặc Kotlin.

  3. 3

    Xem Trước Tokens

    Xem trước tokens được tạo với syntax highlighting. Kiểm tra tên và cấu trúc.

  4. Tải Xuống

    Sao chép mã token hoặc tải xuống dạng file. Sử dụng trực tiếp trong design system.

Frequently Asked Questions

Everything you need to know

Design tokens là gì?

Design tokens là các thực thể được đặt tên lưu trữ quyết định thiết kế. Thay vì hardcode `#3B82F6`, bạn dùng `--color-primary-500`. Giúp design system có thể mở rộng.

Định dạng DTCG là gì?

DTCG (Design Token Community Group) là định dạng JSON được W3C hỗ trợ. Đang trở thành tiêu chuẩn ngành, được Style Dictionary và Figma hỗ trợ.

Làm sao dùng tokens trong Figma?

Xuất Figma Tokens JSON và import bằng tính năng Figma Variables hoặc plugin Tokens Studio.

Có hỗ trợ Tailwind v4 không?

Có. Xuất theo định dạng @theme inline Tailwind v4 với CSS custom properties.

Có dùng cho ứng dụng mobile không?

Có. Swift UIColor tạo color extensions cho iOS. Kotlin tạo companion object constants cho Android/Compose.

Có miễn phí không?

CSS Variables miễn phí. Tailwind, DTCG, Figma, Swift và Kotlin cần Starter hoặc Pro.

Ready to Get Started?

Tạo Design Token - CSS, Tailwind, Figma & DTCG - Free, no signup required

Tạo Design Tokens