Автоматический экспорт исходника Sketch в HTML и CSS код

Launchpad – это плагин для Sketch, который позволяет дизайнерам публиковать реальные сайты непосредственно из Sketch.

Наш процесс преобразования дизайна Sketch в веб-сайт включает в себя много шагов. В основном, мы конвертируем артборды и слои Sketch в пакет файлов, который включает в себя HTML, CSS, изображения и файлы шрифтов, готовые к развертыванию.

1 2 80x43 - Автоматический экспорт исходника Sketch в HTML и CSS код
Дизайнеры и разработчики работают вместе, чтобы побороть … преступность?

Размещайте у нас или экспортируйте его

После создания файлов мы проводим множество оптимизаций для повышения скорости загрузки сайта. Такие вещи, как архивирование текстовых файлов, оптимизация PNG-файлов, использование заголовков Cache-Control для кеширования в браузере на наших серверах хостинга и многое другое.

Тем не менее, иногда наши клиенты заинтересованы в экспорте пакета файлов для размещения на своем хостинге или добавлении к нему некоторой пользовательской логики.

?? Мы считаем, что дизайн принадлежит вам. И хотя мы призываем вас размещать его на наших быстрых серверах, если вы хотите его экспортировать, то это ваше право.

В этой статье мы рассмотрим, как экспортировать ваш файл Sketch в кода HTML и как он выглядит. Если вы хотите узнать, как сделать ваш сайт отзывчивым, добавить видео, ссылки, эффекты и многое другое, изучите эти документы, или начните с этого урока 101.

Как экспортировать код

Ну, это довольно просто, нажмите Export HTML Code.

2 3 80x50 - Автоматический экспорт исходника Sketch в HTML и CSS код
В качестве примера мы использовали образец вебсайта-портфолио: http://doe.myportfolio.design/

А вот видео руководство (4:10):

Видео руководство — Экспорт Sketch в HTML, используя Launchpad

Файлы верстки

Файлы верстки – это zip-файл, содержащий HTML-файлы, CSS-файлы, изображения и шрифты.

3 1 80x37 - Автоматический экспорт исходника Sketch в HTML и CSS код
Пример пакета экспортированного файла Sketch в HTML —  Скачать

Вы можете открыть HTML-файлы локально в своем браузере.

4 1 80x59 - Автоматический экспорт исходника Sketch в HTML и CSS код

Если вы откроете файлы в текстовом редакторе, вы увидите хорошо структурированный HTML и CSS.

5 2 80x52 - Автоматический экспорт исходника Sketch в HTML и CSS код

6 1 80x52 - Автоматический экспорт исходника Sketch в HTML и CSS код

Готовы начать?

Скачайте Launchpad здесьизучите документы или начните с этого урока 101.

Часто задаваемые вопросы

Для того, чтобы ваш сайт был идеальным до пикселя, загружался очень быстро, при этом был чистый и читаемый – мы подготовили для вас некоторые решения со стилями кода.

Почему абсолютное позиционирование?

Разработчики склонны использовать относительное позиционирование в CSS, а Launchpad по умолчанию создает CSS с абсолютным позиционированием. Обеспечивает высокую точность, максимально приближая ваш дизайн в браузере к идеальному до пикселя. Вероятно, вы вряд ли увидите разрыв строки, где вы этого ожидали (минус относительного позиционирования).

Как работать с динамическим контентом?

Обычно большая часть вашего контента статична, а не динамична – например, логотипы, заголовки, кнопки меню, фоны и т. д.

Однако, если вы передаете экспортированный код разработчику и вам нужно, чтобы слои перемещались относительно друг друга, просто используйте функцию стеков (Stacks). Когда вы используете стеки, слои расширяются и давят друг на друга. Скомпилированный CSS использует Flexboxes, а не абсолютную позицию.

Стеки также поддерживают переопределение символов для текста и скрывают слои для коррекции.
Классно, что это также видно внутри Sketch ?

8 80x36 - Автоматический экспорт исходника Sketch в HTML и CSS код
Ага, вы можете увидеть, как это работает в Sketch

Как работают Breakpoints?

Breakpoints позволяют создавать артборды для каждой ширины экрана. Например, мобильный телефон, планшет и настольный ПК. При создании кода Launchpad создает из этих артбордов один HTML-файл и соответствующий CSS-файл.

Breakpoints эффективны, так как используют собственные медиа-запросы CSS. Это позволяет браузеру пропускать рендеринг всего, что не актуально для текущего размера экрана.

Еще один бонус – это то, что изображения загружаются только под размер экрана пользователя, не превышая его размер. И для большей плавности мы загружаем его сверху вниз.

9 80x103 - Автоматический экспорт исходника Sketch в HTML и CSS код

Надеемся, вам понравится создавать потрясающие веб-сайты с помощью Launchpad. Если вы хотите поделиться своими творениями, присоединяйтесь к нам https://www.facebook.com/groups/animaapp/

Свежие вакансии
                        Skywaylab Skywaylab After Effects- 2D аниматор на проектные работы удаленно! Фриланс Москва до 20 000 руб за ролик ₽
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
Все вакансии

Оригинал: Anima App

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

6
Добавить комментарий
Похожие записи

Прощай Sketch…

Часто возникает вопрос: «Какой инструмент дизайна лучший?» И долгое время ответом был Sketch, но теперь это не так.

Что ждет Sketch в 2020 году?

2019 год был одним из самых важных в истории Sketch – от объявления первого раунда привлечения инвестиций до запуска публичной бета-версии Sketch for Teams

Sketch 60 — начало вашей дизайн-системы. Новая панель компонентов, Sketch for Teams и облачные библиотеки

В Sketch 60, мы вводим ряд важных функций, которые не только облегчают совместную работу, но и ускоряют процесс работы над дизайн-системой