Apakah ada fitur "menghasilkan CSS / HTML" atau plugin di aplikasi Sketch

13

Saya telah menemukan skrip yang melakukan hal itu (menghasilkan CSS dan HTML untuk layer-layer dan menawarkan opsi untuk mengekspornya dalam nilai%) dan memotong pekerjaan untuk web-dev menjadi setengahnya untuk Photoshop. Sekarang saya ingin tahu apakah ada yang menemukan / menggunakan plugin atau dapat mengarahkan saya ke fitur asli seperti itu untuk aplikasi Sketch. Ketidakhadiran seperti itu membuat transisi saya ke Sketch sangat menyakitkan. Atau menjadi orang baru di Sketch, saya hanya melewatkan sesuatu yang berbeda secara ideologis tentang cara Sketch bekerja dengan CSS dan HTML.

css html sketch-app plugin Rakhilya Lála Ibildayeva
sumber

Jawaban:

11

Ini mungkin bukan jawaban yang Anda cari, tetapi saya merasa lebih baik daripada memberikan gaya yang dibuat-buat secara otomatis kepada para insinyur.

Markup selektif

Saya yakin Anda telah menemukan grabber CSS menu konteks Sketch. Anda dapat memilih objek sebanyak yang Anda suka dan Anda akan mendapatkan CSS di clipboard Anda lebih cepat daripada yang bisa Anda tempel.

Salin atribut Atribut CSS pria

Tidak ada penyeleksi tentunya, itu benar-benar hanya catatan CSS. Setiap blok dipanggil oleh komentar sebelumnya menggunakan nama layer, seperti:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Anotasi file

Sketch Measure adalah plug-in yang menghasilkan berbagai tingkat anotasi sesuai dengan spesifikasi Anda. Ada video demo di sini . Ide dasarnya adalah untuk membubuhi keterangan angka-angka penting dan membiarkan dev menulis kode mereka sendiri.

Plug-in Pengukuran Sketsa

Di luar anotasi

Anda juga dapat mencoba alat seperti ini, sendiri atau dalam kombinasi:

  • Zeplin menciptakan versi berdiri sendiri, dapat dibagikan dari desain Sketsa Anda untuk inspeksi dev Anda, mengeluarkan spesifikasi berdasarkan permintaan.
  • Marvel adalah alat prototyping yang mengimpor file Sketch. Tidak ada yang berkomunikasi seperti prototipe interaktif!

Generator HTML eksperimental

Saya tidak pernah menggunakan ini, dan ini jelas dalam tahap awal pengembangan tetapi, plug-in Blade terlihat menjanjikan.

Blade adalah plugin Sketch 3 untuk menghasilkan HTML secara otomatis. Ini akan menghasilkan tag <div> untuk grup, tag <p> untuk teks, dll.

masukkan deskripsi gambar di sini

Baju biasa
sumber
1
Saya meningkatkan Blade Readme dengan ikhtisar / panduan arsitektur untuk orang lain agar memiliki kesempatan lebih baik untuk memperbaikinya ... github.com/kristianmandrup/blade
2
Kami telah merilis Protoship UIPad yang melakukan hal ini. Ini adalah pembuat kode untuk Sketch yang mengubah desain Sketch menjadi komponen HTML, CSS, SASS, dan React. Ia menggunakan BEM untuk CSS dan menggunakan margin, paddings, floats, dan flexbox alih-alih penentuan posisi absolut. protoship.io/tools/uipad.html .
Jasim
"Kami telah merilis" menyesatkan - Protoship telah menjadi Daftar Tunggu selama setahun, dan sampai sekarang.
Chris Moschini
1

Lihat tautan berikut http://blog.mengto.com/the-best-hidden-features-in-sketch/

Ikuti blog Meng To untuk tetap mendapatkan informasi terbaru dengan tutorial Sketsa, tip & bahkan trik yang menarik. http://blog.mengto.com/ https://designcode.io/

Kiodour
sumber
Hai Kiodour, bisakah Anda menjelaskan sedikit lebih banyak tentang apa yang akan kami temukan di balik tautan yang Anda berikan dan mengapa itu menjawab pertanyaan? Dengan begitu, jawaban Anda tetap bernilai jika tautan rusak di lain waktu. Busuk tautan adalah alasan utama kami sangat tidak menyukai jawaban hanya tautan di sini. Terima kasih atas usaha Anda dan terus berkontribusi!
AndrewH