Phác thảo: Đối tượng di chuyển so với đối tượng / văn bản khác trong biểu tượng

Làm cách nào để làm cho một đối tượng tự động di chuyển khi tôi thay đổi văn bản có sẵn / "đính kèm" với nó?

Tôi đang cố gắng tìm hiểu làm thế nào biểu tượng mặc định này hoạt động (gif bao gồm bên dưới) và sao chép nó.

Khi tôi gõ "" vào phần ghi đè, biểu tượng wifi sẽ di chuyển bên cạnh các dấu chấm nhận. Khi tôi nhập một chuỗi dài hơn (xem gif), biểu tượng wifi sẽ tự động di chuyển theo sau văn bản.

Như thể biểu tượng wifi được neo vào KẾT THÚC của hộp văn bản "Carrrier" (không có chiều rộng cố định) và di chuyển theo thời gian của hộp văn bản. Làm thế nào điều này được thực hiện trong Phác thảo?

Artboard thực tế không có bất kỳ đặc biệt về nó:

Giải pháp nào? Xin vui lòng & cảm ơn!

Rất cám ơn người dùng twitter @kieranpblack!

Bạn phải có ít nhất 1px giữa lớp văn bản và lớp thứ hai để nó hoạt động. Hoạt động trên bất kỳ tùy chọn thay đổi kích thước, bao gồm cả mặc định kéo dài!

(Thậm chí không thể nhớ nếu tôi đã thử nghiệm điều này trước khi cập nhật Sketch 41 hay không? Có vẻ như bây giờ rất đơn giản.)

Với một chút thử nghiệm và lỗi tôi đã thu hẹp các yêu cầu.

• Căn chỉnh của văn bản cần được đặt thành Tự động
• Không gian ngang giữa văn bản và lớp khác cần phải là ≥ 0 và ≤ 19px
• Khoảng cách giữa đỉnh của khung văn bản và đỉnh của lớp kia và dưới cùng của khung văn bản và dưới cùng của lớp khác cần phải là px 8px

Văn bản có thể ở bên trái hoặc bên phải của lớp dịch chuyển.

Tôi không thể tìm thấy bất kỳ tài liệu nào về việc này, nhưng tôi đã tìm ra cách tái tạo hành vi, nếu bạn vẫn quan tâm.

1. Tạo một hình chữ nhật nền, một đoạn văn bản có chiều rộng tự động ở trên hình chữ nhật đó và một hình chữ nhật nhỏ hơn đến 20px từ cạnh phải của văn bản.
2. Chọn văn bản và hình chữ nhật nhỏ hơn và tạo một nhóm. Hãy gọi nó là 'nhóm1'
3. Đảm bảo hình chữ nhật nhỏ xuất hiện sau văn bản độ rộng tự động trong danh sách lớp.
4. Chọn hình chữ nhật nền và nhóm1, và tạo một biểu tượng.
5. Trên trang chỉnh sửa biểu tượng, chọn nhóm1 và chỉ định 'pin vào góc' làm phương thức thay đổi kích thước. Kiểm tra xem tất cả các yếu tố khác của bạn (hai hình chữ nhật và văn bản) có "kéo dài" như các phương thức thay đổi kích thước của chúng không.
6. Tạo một số trường hợp và ghi đè văn bản, nó sẽ hoạt động.

Thật khó để suy luận toàn bộ quy tắc từ thử nghiệm. Tôi ước có một hướng dẫn hoặc một cái gì đó.

Chỉ vấp phải câu hỏi này để tìm kiếm câu trả lời không có may mắn, nhưng tôi đã tìm ra một quy trình làm việc để thực hiện điều này:

Các bước:

1. Tạo một trường văn bản mà bạn muốn đối tượng của mình neo vào.
2. Căn đối tượng vào trường văn bản (Tôi chỉ thử đối tượng bên phải) .
3. Nhóm trường văn bản và đối tượng.
4. Đặt tùy chọn "thay đổi kích thước" của trường văn bản thành kéo dài và của đối tượng thành pin-to-angle.
5. Tạo biểu tượng với nhóm bạn vừa tạo.
6. Quan trọng: Trong trang biểu tượng, hãy mở rộng bảng nghệ thuật của biểu tượng mới của bạn thành chiều rộng phù hợp với tất cả các phần ghi đè bạn sẽ nhập vào trường văn bản của mình.

Bây giờ bạn sẽ có thể ghi đè văn bản của bạn và đối tượng của bạn sẽ neo vào văn bản mới của bạn.

Chúc mừng!