Figma luôn khuyến khích sự hợp tác giữa các nhà phát triển và nhà thiết kế. Nó cố gắng dựa trên một kho tàng vô tận của các plugin do cộng đồng tạo ra. Cần yếu tố 3D? Có một plugin cho điều đó. Cần SVG trừu tượng? Có một plugin cho điều đó, Quá.
Điều đó nói lên rằng, phần thiết kế của Figma luôn tương đối tĩnh - luôn hoạt động với các hình chữ nhật không thể di chuyển được kết nối với nhau thông qua các tương tác người dùng được xác định trước. Nhưng điều gì sẽ xảy ra nếu tôi nói với bạn rằng thiết kế của bạn có thể đột nhiên trở nên sống động - rằng chúng có thể hoạt hình, tương tác và thậm chí là trạng thái? Sau đó, điều gì sẽ tách khái niệm khỏi việc thực hiện?
Hình công bố vào tháng 6 rằng nó đưa các tiện ích con hỗ trợ JavaScript vào bảng. Giờ đây, các nhà thiết kế có thể duyệt và triển khai các thành phần theo hướng logic ngay trong Figma!
Gửi lời chào đến API tiện ích con! Bạn muốn biết nó là gì và làm thế nào để sử dụng nó? Đó chính xác là những gì chúng ta sẽ làm cùng nhau trong bài đăng này.
Các vật dụng Figma mở ra rất nhiều khả năng
Hãy tưởng tượng rằng bạn đang làm việc suốt ngày đêm với đối tác của mình để thiết kế một ứng dụng nhà hàng lớn. Cả hai bạn đều đã cộng tác trên cùng một bảng Figma; cả hai bạn đang chia sẻ chính xác cùng một tài liệu với những thay đổi đang diễn ra.
Chắc chắn, bạn đã biết rằng sự hợp tác bao gồm nhiều thứ hơn chỉ là quá trình thiết kế:
- quản lý dự án,
- tổ chức các cuộc thăm dò để thu thập phiếu bầu,
- nhập và trực quan hóa dữ liệu giả,
- và thậm chí có thể chơi một trò chơi nhiều người chơi để giải nhiệt sau nhiều giờ làm việc.
Chúng tôi chỉ yêu cầu một người quản lý mọi thứ và gửi các liên kết đến các thành viên khác của nhóm. Nhưng ồ, điều đó không hiệu quả lắm phải không?
Chà, đó là lúc các widget phát huy tác dụng. Chúng ta có thể hình dung được tất cả những điều đó - vâng, mọi thứ - mà không bao giờ rời khỏi Figma.
Đây chỉ là một số cách bạn có thể muốn sử dụng các widget trong Figma:
Danh sách đi tiếp tục. Như bạn có thể nói, đã có rất nhiều widget mà bạn có thể thoải mái sử dụng trong tài liệu của mình. Trên thực tế, bạn có thể thêm Widget thẳng vào bảng của mình từ menu Widgets (Shift+I).
Nhưng chúng tôi không ở đây để học cách sử dụng các widget, bởi vì điều đó rất dễ dàng. Hãy để chúng tôi làm những gì chúng tôi làm tốt nhất: chúng tôi sẽ tạo tiện ích Figma của riêng mình! Cái này sẽ được lấy cảm hứng từ Trang web báo giá thiết kế của Chris Coyier. Chúng tôi sẽ lấy API, đưa nó vào widget, sau đó hiển thị báo giá thiết kế ngẫu nhiên trực tiếp trong Figma.
Đây là những gì chúng tôi cần
Tôi không thích trở thành người đưa tin xấu, nhưng để phát triển các widget, bạn phải sử dụng Windows hoặc Mac. Tôi xin lỗi người dùng Linux, nhưng bạn không gặp may. (Bạn vẫn có thể sử dụng máy ảo nếu bạn muốn làm theo.)
Chúng ta sẽ tải xuống Figma Desktop đăng kí. Cách đơn giản nhất để bắt đầu là tạo một mẫu tiện ích con, ngay từ ứng dụng.
Hãy tạo một bảng mới bằng cách mở menu widget (Shift+ I), chuyển sang Phát triển và tạo một mục mới.
Sau đó, Figma sẽ nhắc bạn đặt tên cho tiện ích con mới và quyết định xem nó có phù hợp hơn với bảng thiết kế hoặc bảng FigJam cũng vậy. Tùy chọn trước đây là đủ cho các mục đích của bài viết này.
Và tùy chỉnh không kết thúc ở đây; Figma cũng sẽ cung cấp cho bạn tùy chọn để bắt đầu với tiện ích bộ đếm được tạo sẵn hoặc một giải pháp thay thế hỗ trợ iFrame cũng cung cấp cho bạn quyền truy cập vào các API Canvas và Tìm nạp (cũng như tất cả các API trình duyệt khác). Chúng tôi sẽ đi với tùy chọn đơn giản "Empty", nhưng cuối cùng chúng tôi sẽ tự sửa đổi nó để sử dụng API Tìm nạp.
Sau đó, bạn sẽ được nhắc lưu dự án widget mới của mình vào một thư mục đặc biệt trong hệ thống của bạn. Sau khi hoàn tất, hãy khởi chạy thiết bị đầu cuối của bạn và hướng nó đến thư mục đó. Chưa chạy bất kỳ lệnh nào - chúng tôi sẽ thực hiện điều đó sau và cố tình nhận lỗi với mục tiêu tìm hiểu thêm về API tiện ích.
Thiết kế widget
Chúng tôi đang lấy thiết kế trực tiếp từ Trang web báo giá thiết kế của Chris Coyier. Vì vậy, hãy đến đó và đi sâu vào bằng cách kích hoạt DevTools.
Hai phím tắt chính mà tôi đang sử dụng ở đây là Ctrl+Shift+C (Hoặc Cmd+Shift+C) để chuyển đổi công cụ "Chọn phần tử" và Shift+Click để thay đổi định dạng màu thành mã HEX. Chúng tôi đang làm điều này để tìm hiểu về màu sắc, phông chữ, trọng lượng phông chữ và kích thước phông chữ được sử dụng trong trang web của Chris. Tất cả thông tin này rất quan trọng để xây dựng một widget gần giống trong Figma, đây sẽ là bước tiếp theo của chúng tôi! Bạn có thể lấy thành phần được thiết kế và sử dụng nó trong canvas của riêng bạn.
Tôi sẽ không đi sâu vào chi tiết ở đây vì chủ đề chính của bài viết này là xây dựng các widget bằng cách viết mã. Nhưng tôi không thể nhấn mạnh rằng tầm quan trọng của việc chăm sóc tốt cho phong cách vật dụng… CSS-Tricks đã có rất nhiều hướng dẫn về Figma theo định hướng thiết kế; bạn sẽ không hối tiếc khi thêm chúng vào danh sách đọc của mình.
Tạo bố cục cho widget của chúng tôi
Với thiết kế độc đáo, đã đến lúc chúng ta nên sử dụng các ngón tay lập trình và bắt đầu xây dựng các bánh răng của tiện ích con của chúng ta.
Thật thú vị khi Figma chuyển các khối xây dựng thiết kế của mình sang các thành phần giống React. Ví dụ: các phần tử khung có tính năng bố cục tự động được biểu thị dưới dạng <AutoLayout /> thành phần trong mã. Ngoài ra, chúng tôi sẽ sử dụng hai thành phần khác: <Text /> và <SVG />.
Hãy xem bảng Figma của tôi… Chính xác là tôi đang yêu cầu bạn tập trung vào cây đối tượng. Đó là những gì chúng ta cần để có thể dịch thiết kế widget của mình sang mã JSX.
Như bạn có thể thấy, widget báo giá thiết kế của chúng tôi yêu cầu nhập ba thành phần. Đó là một số lượng lớn các thành phần xem xét rằng API đầy đủ chỉ chứa tám nút dựa trên lớp. Nhưng như bạn sẽ thấy, những mô-đun này là quá đủ để tạo ra tất cả các loại bố cục.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Và với điều này, chúng tôi có tất cả những gì chúng tôi cần để tiếp tục và xây dựng bộ xương của tiện ích con của chúng tôi giống như chúng tôi làm trong React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Mã này rất khó hiểu, ít nhất phải nói rằng. Hiện tại, chúng ta không thể phân biệt các lớp thiết kế. Rất may, chúng tôi có thể dễ dàng giải quyết vấn đề này thông qua việc sử dụng name bất động sản.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Và, tất nhiên, chúng tôi vẫn không thể nhìn thấy dấu ngoặc kép SVG của chúng tôi, vì vậy hãy bắt tay vào khắc phục điều đó. Các <SVG/> thành phần chấp nhận một srcthuộc tính lấy mã nguồn cho một phần tử SVG. Không có nhiều điều để nói về vấn đề này, vì vậy hãy giữ nó đơn giản và quay trở lại mã:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Tôi nghĩ rằng tất cả chúng ta có thể đồng ý rằng mọi thứ đã rõ ràng hơn nhiều! Khi chúng ta đặt tên cho mọi thứ, mục đích của chúng đột nhiên trở nên rõ ràng hơn nhiều đối với người đọc mã của chúng ta.
Xem trước tiện ích của chúng tôi trong thời gian thực
Figma cung cấp trải nghiệm tuyệt vời cho nhà phát triển khi xây dựng các widget, bao gồm (nhưng không giới hạn) tải lại nóng. Với tính năng này, chúng tôi có thể viết mã và xem trước các thay đổi đối với tiện ích con của mình trong thời gian thực.
Bắt đầu bằng cách mở menu widget (Shift+I), chuyển sang tab phát triển và nhấp hoặc kéo tiện ích con mới của bạn lên bảng. Không thể xác định vị trí tiện ích của bạn? Đừng lo lắng, chỉ cần nhấp vào menu ba chấm và nhập tiện ích con của bạn manifest.json tập tin. Vâng, đó là tất cả những gì cần thiết để đưa nó trở lại sự tồn tại!
Chờ đã, bạn có nhận được thông báo lỗi ở cuối màn hình không?
Nếu vậy, chúng ta hãy điều tra. Bấm vào "Mở bảng điều khiển”Và đọc những gì nó nói. Nếu Mở bảng điều khiển đã biến mất, có một cách thay thế để mở bảng điều khiển gỡ lỗi. Nhấp vào biểu tượng Figma, chuyển đến danh mục widget và hiển thị menu phát triển.
Lỗi đó có thể do chúng tôi chưa biên dịch TypeScript sang JavaScript. Chúng ta có thể làm điều đó trong dòng lệnh bằng cách chạy npm install và npm run watch. (hoặc yarn và yarn watch ). Không có lỗi lần này!
Một trở ngại nữa mà bạn có thể gặp phải là tiện ích không thể hiển thị lại bất kỳ lúc nào mã được thay đổi. Chúng tôi có thể dễ dàng buộc tiện ích của mình cập nhật bằng lệnh menu ngữ cảnh sau: Widgets → Tiện ích kết xuất lại.
Tạo kiểu cho widget
Như hiện tại, nhìn trong số các vật dụng của chúng tôi vẫn còn khá xa so với mục tiêu cuối cùng của chúng tôi.
Vậy làm cách nào để tạo kiểu các thành phần Figma từ mã? Có thể với CSS như chúng ta sẽ làm trong một dự án React? Phủ định. Với các vật dụng Figma, tất cả các phong cách diễn ra thông qua một tập hợp đạo cụ được ghi chép đầy đủ. May mắn cho chúng tôi, những mặt hàng này được đặt tên gần như giống hệt nhau với các đối tác của họ ở Figma.
Chúng tôi sẽ bắt đầu bằng cách định cấu hình hai <AutoLayout /> các thành phần. Như bạn có thể thấy trong đồ họa thông tin ở trên, tên prop mô tả khá rõ mục đích của chúng. Điều này giúp chúng tôi dễ dàng chuyển thẳng vào mã và bắt đầu thực hiện một số thay đổi. Tôi sẽ không hiển thị lại toàn bộ mã, vì vậy hãy dựa vào tên thành phần để hướng dẫn bạn vị trí của các đoạn mã.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Chúng tôi chỉ đạt được rất nhiều tiến bộ! Hãy lưu và quay lại Figma để xem tiện ích của chúng ta trông như thế nào. Hãy nhớ cách Figma tải lại các widget tự động khi có những thay đổi mới?
Nhưng nó vẫn chưa hoàn toàn ở đó. Chúng ta cũng phải thêm màu nền vào thành phần gốc:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Một lần nữa, hãy nhìn vào bảng Figma của bạn và để ý xem các thay đổi có thể được phản ánh gần như ngay lập tức trở lại tiện ích như thế nào.
Hãy di chuyển theo hướng dẫn này và tạo kiểu <Text> các thành phần.
Sau khi xem qua Tài liệu API tiện ích con, một lần nữa rõ ràng là các tên thuộc tính gần như giống hệt với các đối tác của chúng trong ứng dụng Figma, như có thể thấy trong đồ họa thông tin ở trên. Chúng tôi cũng sẽ sử dụng các giá trị từ phần cuối cùng mà chúng tôi đã kiểm tra trang web của Chris.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Thêm trạng thái vào tiện ích con
Tiện ích của chúng tôi hiện đang hiển thị cùng một câu trích dẫn, nhưng chúng tôi muốn lấy ngẫu nhiên từ toàn bộ các câu trích dẫn. Chúng ta phải thêm nhà nước đối với widget của chúng tôi, mà tất cả các nhà phát triển React đều biết là một biến mà sự thay đổi của nó sẽ kích hoạt kết xuất thành phần của chúng tôi.
Với Figma, trạng thái được tạo với useSyncedState cái móc; nó khá nhiều React's useState, nhưng nó yêu cầu người lập trình chỉ định một khóa duy nhất. Yêu cầu này xuất phát từ thực tế là Figma phải đồng bộ hóa trạng thái của tiện ích con của chúng ta trên tất cả các khách hàng có thể đang xem cùng một bảng thiết kế, nhưng thông qua các máy tính khác nhau.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Đó là tất cả những thay đổi mà chúng ta cần lúc này. Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách tìm nạp dữ liệu từ Internet. Cảnh báo Spoiler: nó không đơn giản như nó có vẻ.
Tìm nạp dữ liệu từ mạng
Nhớ lại khi Figma cho chúng tôi lựa chọn bắt đầu với một tiện ích hỗ trợ iFrame. Mặc dù chúng tôi không sử dụng tùy chọn đó, nhưng chúng tôi vẫn phải triển khai một số tính năng của nó. Hãy để tôi giải thích tại sao chúng ta không thể đơn giản gọi fetch() trong mã phụ tùng của chúng tôi.
Khi bạn sử dụng một tiện ích, bạn đang chạy mã JavaScript trên máy tính của chính mình do người khác viết. Mặc dù tất cả các widget đều được nhân viên Figma xem xét kỹ lưỡng, nhưng đó vẫn là một lỗ hổng bảo mật lớn như chúng ta đều biết thiệt hại có thể được tạo ra bởi ngay cả một dòng JavaScript.
Do đó, Figma không thể đơn giản eval() bất kỳ mã widget nào được viết bởi các lập trình viên ẩn danh. Tóm lại, nhóm đã quyết định rằng giải pháp tốt nhất là chạy mã của bên thứ ba trong môi trường hộp cát được bảo vệ chặt chẽ. Và như bạn có thể đoán, các API trình duyệt không khả dụng trong môi trường như vậy.
Nhưng đừng lo lắng, giải pháp của Figma cho vấn đề thứ hai này là <iframe>S. Bất kỳ mã HTML nào mà chúng tôi viết trong một tệp, tốt hơn là được gọi là ui.html, sẽ có quyền truy cập vào tất cả các API của trình duyệt. Bạn có thể tự hỏi làm thế nào chúng tôi có thể kích hoạt mã này từ tiện ích con, nhưng chúng tôi sẽ xem xét điều đó sau. Ngay bây giờ, hãy quay lại mã:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Đó là mẫu chung cho widget-to-iframe liên lạc. Hãy sử dụng nó để tìm nạp dữ liệu từ máy chủ:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>Chúng tôi không xử lý lỗi để giữ cho vấn đề này trở nên đơn giản và đúng trọng tâm. Hãy quay trở lại mã widget và xem cách chúng tôi truy cập các chức năng được xác định trong <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Như bạn có thể thấy, đầu tiên chúng tôi yêu cầu Figma tiết lộ quyền truy cập vào <iframe> và để kích hoạt một sự kiện với tên "networkRequest". Chúng tôi đang xử lý sự kiện này trong ui.html nộp hồ sơ bằng cách kiểm tra event.data.pluginMessage.type === 'networkRequest', và sau đó đăng dữ liệu trở lại tiện ích con.
Nhưng vẫn chưa có gì xảy ra… Chúng tôi vẫn chưa gọi fetchData() hàm số. Nếu chúng tôi gọi nó trực tiếp trong hàm thành phần, lỗi sau sẽ xảy ra trong bảng điều khiển:
Cannot use showUI during widget rendering.Figma đang bảo chúng ta đừng gọi showUI trực tiếp trong cơ thể chức năng… Vì vậy, chúng ta nên đặt nó ở đâu? Câu trả lời cho điều đó là một hook mới và một chức năng mới: useEffect và waitForTask. Bạn có thể đã quen với useEffect nếu bạn là nhà phát triển React, nhưng chúng tôi sẽ sử dụng nó ở đây để tìm nạp dữ liệu từ máy chủ khi thành phần tiện ích con gắn kết.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Nhưng điều này sẽ dẫn đến một "lỗi" khác trong đó tiện ích con của chúng tôi sẽ tiếp tục hiển thị với một câu trích dẫn mới, mãi mãi. Điều này xảy ra bởi vì useEffect, theo định nghĩa, sẽ kích hoạt lại bất cứ khi nào trạng thái của tiện ích con thay đổi, ngay khi chúng ta gọi fetchData. Và trong khi có một kỹ thuật chỉ gọi useEffect một khi trong React, nó không hoạt động trên việc triển khai của Figma. Từ tài liệu của Figma:
Vì cách các widget chạy,
useEffectnên xử lý việc được gọi nhiều lần với cùng một trạng thái.
Rất may, có một cách giải quyết đơn giản mà chúng tôi có thể tận dụng và gọi useEffect chỉ một lần khi thành phần đầu tiên gắn kết và bằng cách kiểm tra xem các giá trị của trạng thái có còn trống hay không:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Bạn có thể gặp phải một “truy cập bộ nhớ ngoài giới hạn ” lỗi. Của nó khá phổ biến để thấy trong phát triển plugin và tiện ích con. Chỉ cần khởi động lại Figma và nó sẽ không ở đó nữa.
Bạn có thể nhận thấy rằng đôi khi, văn bản trích dẫn có chứa các ký tự kỳ lạ.
đó là Ký tự Unicode và chúng ta phải định dạng chúng đúng cách trong mã:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>và thì đấy, widget của chúng tôi đã tìm nạp một báo giá thiết kế hoàn toàn mới mỗi khi nó được thêm vào bảng thiết kế.
Thêm menu thuộc tính vào tiện ích của chúng tôi
Mặc dù tiện ích con của chúng tôi tìm nạp một trích dẫn mới khi khởi tạo, sẽ thực tế hơn nhiều nếu chúng tôi có thể thực hiện lại quy trình này nhưng không xóa nó. Phần này sẽ ngắn vì giải pháp khá đáng chú ý. Với menu tài sản, chúng tôi có thể thêm tính tương tác vào tiện ích con của mình bằng một lệnh gọi tới usePropertyMenu móc.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Với một móc đơn giản, chúng tôi có thể tạo một nút xuất hiện gần tiện ích con của chúng tôi khi nó được chọn. Đó là phần cuối cùng mà chúng tôi cần bổ sung để hoàn thành dự án này.
Xuất bản tiện ích của chúng tôi cho công chúng
Sẽ không có ích gì nhiều trong việc xây dựng một widget nếu, tốt, không có ai sử dụng nó. Và trong khi Figma cấp cho các tổ chức tùy chọn để khởi chạy riêng widget để sử dụng nội bộ, việc phát hành các chương trình nhỏ này ra thế giới phổ biến hơn nhiều.
Figma có một quy trình xem xét tiện ích con tinh vi có thể mất từ 5 đến 10 ngày làm việc. Và trong khi tiện ích con báo giá thiết kế mà chúng tôi cùng nhau xây dựng là đã có trong thư viện widget, Tôi vẫn sẽ chứng minh làm thế nào nó đến đó. Vui lòng không cố xuất bản lại tiện ích này một lần nữa vì điều đó sẽ chỉ dẫn đến việc bị xóa. Nhưng nếu bạn đã thực hiện một số thay đổi quan trọng, hãy tiếp tục và chia sẻ tiện ích của riêng bạn với cộng đồng!
Bắt đầu bằng cách nhấp vào menu widget (Shift+I) và chuyển sang Phát triển tab để xem tiện ích của chúng tôi. Nhấp vào menu ba chấm và nhấn Xuất bản.
Figma sẽ nhắc bạn nhập một số chi tiết về tiện ích của bạn, chẳng hạn như tiêu đề, mô tả và một số thẻ. Chúng tôi cũng sẽ cần hình ảnh biểu tượng 128 × 128 và hình ảnh biểu ngữ 1920 × 960.
Sau khi nhập tất cả các nội dung này, chúng tôi vẫn cần ảnh chụp màn hình tiện ích con của mình. Đóng phương thức xuất bản (đừng lo lắng, bạn sẽ không mất dữ liệu của mình) và nhấp chuột phải vào tiện ích con để hiển thị menu ngữ cảnh thú vị. Tìm Sao chép / Dán dưới dạngphân loại và chọn Sao chép dưới dạng PNG.
Sau khi hoàn tất, hãy quay lại phương thức xuất bản và dán ảnh chụp màn hình của tiện ích:
Cuộn xuống và cuối cùng xuất bản phương thức của bạn. Kỉ niệm! 🎉
Figma sẽ liên hệ với bạn trong vài ngày tới về tình trạng xem xét phương thức của bạn. Trong trường hợp bị từ chối, bạn sẽ được cung cấp cơ hội để thực hiện các thay đổi và gửi lại.
Kết luận
Chúng tôi vừa tạo một widget Figma từ đầu! Có nhiều thứ không được đề cập ở đây, chẳng hạn như sự kiện nhấp chuột, biểu mẫu đầu vàovà nhiều hơn. Bạn có thể tìm hiểu mã nguồn đầy đủ cho tiện ích con trong repo GitHub này.
Đối với những người mong muốn nâng cao kỹ năng Figma của họ lên cấp độ cao hơn, tôi khuyên bạn nên khám phá cộng đồng Widgets và sử dụng những gì thu hút sự chú ý của bạn làm nguồn cảm hứng. Tiếp tục xây dựng thêm các widget, tiếp tục trau dồi các kỹ năng React của bạn và trước khi bạn nhận ra điều đó, bạn sẽ dạy tôi cách làm tất cả những điều này.
Các tài nguyên khác
Tôi đã phải tham khảo rất nhiều tài liệu trong khi tôi làm widget này. Tôi nghĩ rằng tôi sẽ chia sẻ những gì tôi tìm thấy để giúp đỡ nhiều nhất.
