Bắt đầu nhanh

The tool gallery - every tool as a card, grouped by category

Lolly biến các quy tắc của bạn - màu sắc, kiểu chữ, bố cục, logic - thành các công cụ mà bất kỳ ai cũng có thể dùng để tạo ra tệp hoàn chỉnh: hình ảnh, PDF, thẻ mạng xã hội, video, chỉ bằng cách điền vào một vài trường. Không có gì để học và không cần tải lên gì cả: mọi thứ đều chạy trên thiết bị của bạn, dù online hay offline.

Đây là trang đầu tiên bạn nên đọc. Có hai việc giúp bạn bắt tay vào làm ngay: biến Lolly thành của riêng bạn (gắn nó với thương hiệu của bạn), và mang vào những gì bạn đã có sẵn (các tệp thiết kế và token của bạn). Mọi thứ khác chỉ cách một đường liên kết.

Mới dùng Lolly và chỉ muốn tạo ra thứ gì đó ngay? Mở ứng dụng, chọn bất kỳ công cụ nào trong thư viện, điền vào chỗ trống, rồi nhấn Render. Quay lại đây khi bạn muốn nó khoác lên thương hiệu của bạn.

1. Biến nó thành của bạn - thiết lập thương hiệu của bạn

Thương hiệu của bạn trong Lolly là một tài liệu token thiết kế nhỏ gọn - màu sắc, phông chữ, và một vài quy tắc - mà mọi công cụ đều render dựa theo. Thiết lập một lần và mọi thứ bạn tạo ra đều đúng thương hiệu ngay từ gốc, chứ không phải nhờ soát lại. Có ba cách để bắt đầu; hãy chọn cách phù hợp với nơi thương hiệu của bạn đang tồn tại.

Bắt đầu từ đầu (trình hướng dẫn)

The Brand Studio start screen - name, primary colour, and a derived palette

Lần chạy đầu tiên sẽ đưa bạn tới màn hình Start (#/start). Đặt cho nó một cái tên và một màu chủ đạo, Lolly sẽ suy ra một bảng màu hoàn chỉnh, dễ tiếp cận từ đó - các bề mặt sáng/tối, văn bản, điểm nhấn - bằng chính phép toán màu mà engine dùng ở mọi nơi khác. Chọn một phông chữ, và bạn đã có một thương hiệu hoạt động được trong chưa đầy một phút. Bạn có thể tinh chỉnh bất kỳ phần nào sau đó.

Nhập một thương hiệu bạn đã có sẵn

Nếu thương hiệu của bạn đã được lưu dưới dạng token thiết kế - từ Penpot, Tokens Studio (Figma), hoặc bất kỳ tệp DTCG thuần nào - hãy mang toàn bộ vào thay vì phải nhập lại từ đầu. Có hai cách:

# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
npm run ingest:brand -- ./my-tokens.json --name acme --label "Acme" --activate

ingest:brand chấp nhận cả ba dạng chứa mà Penpot / Tokens Studio dùng để xuất cùng một tài liệu - một tệp tokens.json duy nhất, một thư mục ($metadata.json + các tệp theo từng set), hoặc một gói project.penpot. Với --activate, nó đăng ký thương hiệu này thành một profile, chuyển sang dùng nó, và dựng lại danh mục. Xem Cấu hình để biết gói thương hiệu và profile khớp với nhau ra sao.

Tinh chỉnh trong ứng dụng

The Dashboard's Design-system tab - the active brand shown read-only

Khi một thương hiệu đang hoạt động, trình chỉnh sửa Your brand trên dashboard (#/d) là một trình chỉnh sửa trực tiếp - đổi một màu hay một vai trò là mọi bản xem trước trên trang cập nhật ngay khi bạn gõ. Cùng thương hiệu đó được tóm tắt trên thẻ Profile → Your brand. Phông chữ là thật: chọn từ Google Fonts và Lolly lưu tệp đó ngay trên thiết bị của bạn như một tài sản thương hiệu, nên kiểu chữ của bạn vẫn dùng được khi offline và không có gì được tải về khi render.

Khi bạn đã ưng ý, xuất thương hiệu thành một gói LollyBrand - một tệp duy nhất mà đồng nghiệp có thể nhập vào để có được đúng bảng màu, phông chữ, và quy tắc y hệt. Đó là cách một thương hiệu di chuyển giữa người với người, giữa máy với máy, mà không cần server ở giữa.

Token thương hiệu đi được cả hai chiều. Vì thương hiệu của Lolly chính là token DTCG - định dạng mà Penpot đọc và ghi trực tiếp, và Tokens Studio mang vào Figma - bảng màu bạn dùng để thiết kế và bảng màu mà Lolly áp đặt là cùng một tài liệu, chứ không phải hai danh sách bạn phải tự tay đồng bộ. Xem Token thiết kế.

2. Mang vào những gì bạn đã có sẵn

Bạn không cần bắt đầu từ một trang trắng. Lolly mở được cả những thiết kế và các định dạng mở mà bạn đã có sẵn.

Tệp thiết kế mã nguồn mở

Sản phẩm hoàn thiện trong Figma, Penpot, Illustrator, InDesign, hay bất kỳ ứng dụng SVG nào không cần phải bị khoá mãi trong ứng dụng bạn đã vẽ ra nó. Mở Layout Studio, nhấn Import a design, và tệp đó sẽ mở ra như một bố cục sống - chứ không phải một bức ảnh phẳng. Mỗi lớp trở thành một khối có thể chỉnh sửa: văn bản vẫn gõ lại được, hình khối vẫn là hình khối, hình ảnh được đưa vào thư viện của bạn, và các hoạ tiết vector phức tạp được giữ nguyên trung thực. Nó xuất hiện đã sẵn tuân theo mặt chữ và quy tắc màu sắc thương hiệu của bạn.

Bạn cóMang vào dưới dạng
Một frame Figma.fig gốc (File → Save local copy), hoặc bản xuất SVG
Một thiết kế PenpotBản xuất .penpot của nó, hoặc bất kỳ SVG nào
Một tệp Illustrator.ai gốc (tương thích PDF) hoặc .pdf - mở trực tiếp
Một bố cục InDesign.idml (File → Export → InDesign Markup)
Bất kỳ thứ gì khácBất kỳ SVG nào - cánh cửa vào phổ quát

Toàn bộ quá trình nhập diễn ra ngay trên thiết bị của bạn - tệp được phân tích ngay trong trình duyệt của bạn và không có gì được tải lên. Chi tiết đầy đủ, và chính xác những gì được giữ lại, có trong Nhập một thiết kế.

Từ một lần dùng riêng lẻ thành một mẫu

Đây là phần thưởng: một bố cục đã nhập là một phiên Layout Studio bình thường, vậy nên một khi bạn lưu nó, nó sẽ tồn tại tại một URL. Bất kỳ ai có Lolly đều có thể mở URL đó, đổi chữ, thay ảnh, và render ra phiên bản của riêng họ - không cần ứng dụng thiết kế nào, và các phần bị khoá vẫn được khoá. Một thiết kế chỉ dùng một lần trở thành một công cụ có thể tái sử dụng. Đó là toàn bộ ý tưởng, đạt được mà không cần viết một dòng cấu hình nào.

Dữ liệu mở và công cụ mở

Bộ công cụ cộng đồng là mã nguồn mở và trung lập về thương hiệu - mã QR, bản đồ đường phố, bộ lọc, tiện ích quyền riêng tư - và nó render theo thương hiệu của bạn ngay khi bạn kích hoạt.

The Utilities view - the on-device workhorses like Strip Hidden Data, Compress PDF and Convert Image, all in one place

Đưa dữ liệu mở của riêng bạn vào công cụ nữa: dán hoặc thả một bảng CSV hay JSON vào, và các trường lặp lại của công cụ sẽ tự điền theo đó, mỗi hàng cho ra một tệp hoàn chỉnh.

3. Tạo ra thứ gì đó, rồi chia sẻ hoặc tự động hoá nó

"URL chính là API" phải hiểu đúng theo nghĩa chữ. Biểu đồ dưới đây không do ai vẽ ra: loại biểu đồ, tiêu đề và toàn bộ bảng dữ liệu của nó đều được gõ vào thanh địa chỉ, và cùng một liên kết sẽ render ra cùng một biểu đồ trên mọi thiết bị.

An area chart of monthly signups, every value of which arrived as a query parameter rather than a click

Với một thương hiệu đang hoạt động và tư liệu trong tay, mọi công cụ đều tạo ra một tệp hoàn chỉnh:

Đi đâu tiếp theo

Ba lối đi, tuỳ vào việc bạn ở đây để làm gì: