Как да експортирате скица в HTML

Автоматично генериране на HTML от Sketch Design

️Background

Плъгинът Anima за Sketch позволява на дизайнерите да създават отзивчиви и интерактивни уебсайтове точно в Sketch и да експортират пълни HTML и CSS, готови за внедряване.

Създавайте отзивчиви и интерактивни уебсайтове и експортирайте HTML. Всички вътрешни скици

Тази статия е доста техническа, тъй като се гмурка в генерирания пакет от кодове. Получаването на кода е толкова просто, колкото да кликнете върху бутон. Така че, ако искате бърз старт, ето как да създадете целева страница.

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

🖥 Хоствайте го при нас или го експортирайте

След като пакетът е генериран, правим множество оптимизации, за да подобрим скоростта на времето за зареждане на сайта. Нещо като ципиране на текстови файлове, оптимизиране на PNG файлове с изображения, използване на заглавки за кеш-контрол за кеширане на браузъра в нашите хостинг сървъри и др.

Независимо от това, понякога нашите клиенти са заинтересовани да експортират пакета от файлове, които да хоствате в тяхната услуга или да добавите някаква персонализирана логика към него.

Вярваме, че дизайнът е ваш. И макар да ви насърчаваме да го хоствате на нашите бързи сървъри, винаги когато искате да го експортирате - Е, това е ваше право.

В тази статия ще разгледаме как да експортирате вашия Sketch документ в пакет с HTML код и как изглежда. Ако искате да знаете как да направите своя уебсайт отзивчив, добавете видеоклипове, връзки, ефекти и други, разгледайте документите или започнете с този 101 урок.

Как да експортирате код

Ами това е доста просто, просто щракнете върху Export HTML.

За нашия пример използваме примерен уебсайт за портфолио: doe.myportfolio.design

Кодовият пакет

Кодният пакет е zip файл, който съдържа HTML файлове, CSS файлове, изображения и шрифтове.

Примерен пакет от експортирана скица към HTML - изтегляне

Отварянето на HTML файловете локално представя уебсайта перфектно във вашия браузър.

Ако отворите файловете в текстов редактор, ще видите добре структуриран HTML и CSS.

Създавайте отзивчиви и интерактивни уебсайтове и експортирайте HTML. Всички вътрешни скици

Готови ли сте да започнете?

Вземете Anima тук, разгледайте документите или започнете с нашия урок за целевата страница.

ЧЗВ

За да поддържате вашия уебсайт пикселен перфектен, лесно реагиращ, зареждайте луд бързо, но същевременно чист и четим - направихме за вас избор за стила на кода. Ето някои въпроси, които получаваме относно пакетите с кодове.

Защо абсолютно позициониране?

Разработчиците са склонни да използват CSS относителна позиция, докато Anima съставя CSS с абсолютна позиция по подразбиране. Нагоре тук се постига висока точност, което доближава дизайна ви възможно най-близо до перфектно за пиксели в браузъра.

Актуализация (юни-2019): Скоро базирана на Flexbox оформление!
Anima 4.0 ще въведе автоматично оформление на Flexbox.

Как да работя с динамично съдържание?

Обикновено по-голямата част от съдържанието ви е статична, а не динамична - т.е. лога, заглавия, бутони на менюто, фонове и т.н.

Ако обаче дадете изнесения си код на програмист и се нуждаете от слоеве, за да се преместят сравнително един към друг, просто използвайте функцията Stacks. Когато използвате Stacks, слоевете се разширяват и натискат един друг. Съставеният CSS използва Flex-полета, а не абсолютна позиция.

Стековете също поддържат отмяна на символа за текст и скриване на слоевете, за да се подравнят отново.
Хубавото е, че се вижда и в Sketch

Да, можете да го видите в Sketch.

Как работят точките за спиране?

Точките за прекъсване ви позволяват да създавате табла за всяка ширина на екрана - например Mobile, Tablet и Desktop. Когато генерира код, Anima прави един HTML файл и съответен един CSS файл от тези дъски.

Точките на прекъсване са ефикасни, тъй като използва местни CSS заявки. Той позволява на браузъра да пропуска рендерирането на всичко, което не е подходящо за текущия размер на екрана.

Друг бонус е, че изображенията се зареждат само за размера на екрана на потребителя, като са остри и не са с голям размер. И ние го зареждаме отгоре надолу, за да го направим още по-гладък.

Защо моите формуляри се счупиха?

Когато хоствате уебсайта си в Anima, ние ви предоставяме и мъничък резервен сървър, който да поддържа вашите формуляри. Той позволява на потребителите да изпращат до този сървър, а ние го съхраняваме за вас.

Този код от страна на сървъра не може да бъде просто експортиран и включен в кодовия пакет, тъй като той трябва да работи на сървър, а не на браузъра (който се нарича код от страна на клиента).

Следователно, когато експортирате код с формуляри, ще трябва да внедрите свой собствен сървър, за да улавяте формуляри и да съхранявате данните си.

Създавайте отзивчиви и интерактивни уебсайтове и експортирайте HTML. Всички вътрешни скици

Анима 3

Anima 3.0 Ви позволява да създавате сложни взаимодействия, анимации, да си сътрудничите със заинтересованите страни, колегите и др. Прочетете всичко за това тук.

Надяваме се да ви хареса да създавате страхотни уебсайтове с помощта на Anima. Ако искате да споделите това, което сте създали, присъединете се към нас на https://www.facebook.com/groups/animaapp/