Я знайшов сценарій, який робить саме це (генерує CSS та HTML для шарів і пропонує опцію експорту цих у% значень) і скорочує роботу для веб-розробника навпіл для Photoshop. Зараз мені цікаво, чи хтось натрапив на плагін чи зможе вказати мені на подібну функцію для програми Sketch. Відсутність такого робить переклад на "Ескіз" справді болючим. Або будучи новим для Sketch, я просто пропускаю щось ідеологічно інше в тому, як Sketch працює з CSS та HTML.
Чи є в програмі Sketch функція "створення CSS / HTML" або плагін
Відповіді:
Це може бути не зовсім потрібною відповіддю, але я вважаю, що це краще, ніж передавати інженерам посередні, автоматично створені стилі.
Вибірна розмітка
Я впевнений, що ви відкрили контекстне меню CSS-захвата. Ви можете вибрати скільки завгодно об'єктів, і ви отримаєте CSS у буфер обміну швидше, ніж зможете вставити його.
Селекторів, звичайно, немає, це справді лише нотатки CSS. Кожен блок викликається попереднім коментарем, використовуючи назву шару, наприклад:
/* Rectangle 1: */
background: #C7C1B5;
/* Rectangle 1 Copy: */
background: #F5E618;
/* Rectangle 1 Copy 2: */
background: #FFFFFF;Анотація до файлу
Sketch Measure - це плагін, який генерує різні рівні анотацій відповідно до ваших характеристик. Тут демонстраційне відео . Основна ідея - анотувати важливі числа та дозволити розробнику написати власний код.
Поза межами анотації
Ви також можете спробувати такі інструменти, окремо або в комбінації:
- Zeplin створює окрему, обмірну версію вашого дизайну Sketch для перевірки вашого розробника, витягуючи характеристики на вимогу.
- Marvel - це засіб для прототипування, який імпортує файли Sketch. Ніщо не спілкується, як інтерактивний прототип!
Експериментальний генератор HTML
Я ніколи цього не використовував, і це, очевидно, на ранніх стадіях розвитку, але плагін Blade виглядає багатообіцяючим.
Blade - плагін Sketch 3 для автоматичного створення HTML. Він створить тег <div> для групи, тег <p> для тексту тощо.
1
Я вдосконалив Blade Readme з оглядом архітектури / керівництвом для інших, щоб мати більше шансів працювати над цим, щоб вдосконалити його ... github.com/kristianmandrup/blade
Ми випустили Protoship UIPad, який робить саме це. Це генератор коду для Sketch, який перетворює проекти Sketch у компоненти HTML, CSS, SASS та React. Він використовує BEM для CSS і використовує поля, paddings, floats та flexbox замість абсолютного позиціонування. protoship.io/tools/uipad.html .
—
Жасим
"Ми випустили" вводить в оману - Protoship вже рік є списком очікування, і досі є.
—
Кріс Москіні
Дивіться наступні посилання http://blog.mengto.com/the-best-hidden-features-in-sketch/
Слідкуйте за блогом Meng To, щоб бути в курсі цікавих навчальних посібників із ескізу, порад та навіть прийомів. http://blog.mengto.com/ https://designcode.io/
Привіт, Кіодуре, поясни, будь ласка, трохи більше, що ми знайдемо за наданим вами посиланням і чому він відповідає на це питання? Таким чином, ваша відповідь все ще має значення, якщо посилання розірветься згодом. Гниль посилань - основна причина, по якій ми дійсно не любимо відповіді лише на посилання. Дякуємо за ваші зусилля та продовжуйте робити свій внесок!
—
АндрійГ