Sketsa: Objek bergerak relatif ke objek / teks lain dalam simbol

11

Bagaimana cara membuat objek secara otomatis bergerak ketika saya mengubah teks sebelumnya / "melekat" itu?

Saya mencoba mencari tahu bagaimana simbol default ini bekerja (termasuk gif di bawah) dan mereplikasi itu.

Ketika saya mengetikkan "" ke override, simbol wifi bergerak di sebelah titik penerimaan. Ketika saya mengetik string yang lebih panjang di (lihat gif), simbol wifi secara otomatis bergerak sesuai dengan setelah teks.

Seolah-olah simbol wifi ditambatkan ke AKHIR kotak teks "Carrrier" (yang tidak memiliki lebar tetap), dan bergerak sesuai dengan berapa lama kotak teks itu. Bagaimana ini dilakukan dalam Sketsa?


Demo mengubah teks dalam simbol dengan objek bergerak tergantung pada panjang simbol

Artboard yang sebenarnya tidak memiliki spesial di dalamnya:

Lapisan Artboard

Ada solusi? Tolong & terima kasih!

text sketch-app symbols jess
sumber
2
Bagaimana ini dilakukan? Sebagai contoh, saya membuat simbol dengan teks dan mengatakan, kotak tepat di sebelah kotak teks, ketika saya mengedit teks, kotak tidak bergerak. Saya ingin kuadrat secara otomatis bergerak ketika saya mengubah teks dalam penggantian.
jess
Tidak dapat mereproduksi perilaku yang diinginkan ini di salah satu saran. Apakah masih ada cara untuk mencapai ini dengan Sketchapp Version 51.2 terbaru? Sayangnya, juga posting ini sepertinya tidak akurat / berfungsi untuk Versi Sketchapp terbaru. Cheerio
UX Brewer

Jawaban:

4

Banyak terima kasih kepada pengguna twitter @kieranpblack!

Anda harus memiliki setidaknya 1px antara lapisan teks dan lapisan kedua agar dapat berfungsi. Bekerja pada opsi pengubahan ukuran apapun, termasuk peregangan default!

(Bahkan tidak ingat apakah aku menguji coba ini sebelum pembaruan Sketch 41 atau tidak? Tampak begitu sederhana melihatnya sekarang.)

jess
sumber
4

Dengan sedikit trial and error saya mempersempit persyaratan.

  • Penyelarasan teks perlu diatur ke Otomatis
  • Ruang horizontal antara teks dan layer lainnya harus ≥ 0 dan ≤ 19px
  • Jarak antara bagian atas bingkai teks dan bagian atas lapisan lainnya dan bagian bawah bingkai teks dan bagian bawah lapisan lainnya harus ≤ 8px

Teks bisa di sebelah kiri atau kanan dari lapisan yang dipindahkan.

Mark Horgan
sumber
Kondisi ini sangat membantu, terima kasih banyak.
Shravan Veer Kohli
0

Saya tidak dapat menemukan dokumentasi tentang ini, tetapi saya telah menemukan cara untuk mereproduksi perilaku, jika Anda masih tertarik.

  1. Buat persegi panjang latar belakang, sepotong teks lebar otomatis di atas persegi panjang itu, dan persegi panjang yang lebih kecil hingga 20px dari tepi kanan teks.
  2. Pilih teks dan kotak yang lebih kecil dan buat grup. Sebut saja 'group1'
  3. Pastikan kotak kecil datang setelah teks lebar otomatis di daftar lapisan.
  4. Pilih persegi panjang latar belakang dan grup1, dan buat simbol.
  5. Pada halaman edit simbol, pilih group1 dan tentukan 'pin to corner' sebagai metode mengubah ukuran. Pastikan semua elemen Anda yang lain (dua persegi panjang dan teks) memiliki 'regangan' sebagai metode ukurannya.
  6. Buat beberapa contoh dan timpa teks, itu harus berfungsi.

Sulit untuk menyimpulkan aturan penuh dari eksperimen. Saya berharap ada manual atau sesuatu.

Joshua
sumber
Saya sudah mencoba langkah Anda tetapi sayangnya tidak bisa meniru itu ... Saya menghargai bantuan Anda! Ini juga membuat frustasi karena pada simbol yang sebenarnya, tidak ada pengelompokan atau "Ubah ukuran khusus" pin ... Saya mungkin mengirim pesan kode Bohemian bertanya tentang hal itu.
jess
Apakah Anda mendengar kabar dari Bohemian? Anda dapat menemukan detail tentang bagaimana kontrol 'pengubahan ukuran grup' bekerja di mana-mana. Coba di sini: medium.com/sketch-app-sources/…
Joshua
Belum pernah mendengar kabar dari mereka. Saya memahami fitur pengubahan ukuran grup tetapi ini tidak terasa seperti itu karena saya belum tentu mengubah ukuran objek secara keseluruhan ... hanya mengubah teks di salah satu yang ditimpa. Semua opsi pengubahan ukuran pada simbol asli hanya diatur ke "peregangan" default.
jess
0

Hanya tersandung pada pertanyaan ini untuk mencari jawaban tanpa hasil, tetapi saya menemukan alur kerja untuk mewujudkannya:

Langkah:

  1. Buat bidang teks yang Anda ingin jangkar objek Anda.
  2. Sejajarkan objek ke bidang teks (Saya hanya mencoba objek di sebelah kanan) .
  3. Kolom bidang teks dan objek.
  4. Setel opsi "mengubah ukuran" bidang teks untuk merentangkan dan objek ke pin-to-sudut.
  5. Buat simbol dengan grup yang baru saja Anda buat.
  6. Penting: Di halaman simbol, rentangkan papan-seni simbol baru Anda ke lebar yang akan mengakomodasi semua penggantian Anda, Anda akan memasukkan ke dalam bidang teks Anda.

Anda sekarang harus dapat menimpa teks Anda dan objek Anda akan berlabuh ke teks baru Anda.

Bersulang!

Andrew Munoz
sumber