10 безплатни плъгини за уеб разработчици

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

Ето 10 плъгина, които могат да ви помогнат да увеличите производителността си при работа с Sketch. Има разнообразни, вариращи от генератори на съдържание, селектор на цветовата палитра, и те могат да ви помогнат да покажете измерванията на слоя или автоматично да добавите подложка към слой.

1. CSS Buddy

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

Когато този плъгин е инсталиран, просто изберете слой и след това го изберете Приложи към Избрано от менюто на приставката. Диалогов прозорец ще ви подкани да въведете стилова таблица. Добавете съдържанието на CSS без CSS класа и гледайте слоя да се оформя.

2. Материален дизайн Цветова палитра

Ако следвате тенденцията на Материалния дизайн, забележителното нещо, което ще забележите, е използването на отличителни цветове. Материалният дизайн има страхотна цветова палитра. Сега можете да го донесете до работното си пространство Материален дизайн Цвят Палитра Plug-in.

Този плъгин ще генерира цветни палитри за секунди, без да се налага да затваряте работното си пространство. Изберете Hue, Value или Swatch за генериране на цветова палитра, подходяща за вашия проект.

3. Бележник за скица

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

Бележник за скица е приставка за документиране на вашия дизайн в Sketch с лекота. Тя ще добави допълнителна странична лента към работното ви пространство, която съдържа коментари, които добавяте към всеки елемент от дизайна. Можете да пренареждате коментара, подравнявате, изтривате и превключвате видимостта на коментарите.

4. Ден на играча

Преди да използваме реални изображения в дизайна, ние често използваме изображения на контейнери за ускоряване на процеса на проектиране. За Sketch можете да използвате Ден на играча за добавяне на персонализирани резервирани места към всеки слой на работното пространство на Sketch от 6 услуги за изображения на места, включително Placehold.it, LoremPixel и Unsplash. Веднъж активирана, можете да зададете ширина, височина и друга информация.

5. Генератор на съдържание

Вече разполагаме с плъгин, за да вмъкнем изображения със запазени места, какво ще кажете за едно общо съдържание? Генератор на съдържание ви помага да добавите фиктивни данни като аватари, имена, данни за геолокация и др. Работи чудесно за дизайн на макети и за намаляване на главоболието, когато се опитвате да разберете как да генерирате данни на място.

За да добавите фиктивни данни, просто изберете слой, след което изберете Plugin> Генератор, и изберете Гео, Persona или Снимки.

6. Sketch Measure

Скица мярка е инструмент за измерване на Sketch. Той измерва дължината или размера на слой (или слоеве) във вашия дизайн. Можете също така да получите подложка и граница на слой, както и разстоянието между два слоя. Sketch Measure може също да отпечата свойствата на слоя, като цвят, граница и непрозрачност. Всички измервания могат да бъдат направени чрез клавишни комбинации.

7. Динамичен бутон

Динамичен бутон ви помага лесно да създавате бутон с фиксирани подложки. Тя автоматично ще регулира подложката въз основа на стойността, която давате, независимо от дължината на текста. С инсталирания плъгин текстът може да бъде преобразуван в структура с командата Command + J. Размерът на необходимата подложка може след това да бъде прекаран в (0: 0: 0: 0) текстов слой (под групата с гъвкави бутони).

8. Типографска скала

Типографската скала е плъгин, който превръща избрания текстов слой в типографски. За да използвате този плъгин, просто изберете текстов слой (единичен или многократен) или смесен слой, който съдържа поне един текстов слой, след което изберете Приставката> Типографска скала и коригирайте стойността в диалоговия прозорец. Резултатът е набор от мащабен текст, който следва правилата на типографската скала.

9. Модулизатор

с Modulizer можете да контролирате подложките за бутон, модул или области на дизайна с клавишната комбинация Shift + Command + M. Можете да комбинирате всичките си слоеве, да ги групирате и след това да използвате прекия път, за да коригирате автоматично подложката си въз основа на нуждата от подложка, от която се нуждаете , Гледайте демонстрацията на видеоклипа, за да видите това в действие.

10. Блейд

Замисляли ли сте се да конвертирате дизайна си от скица в HTML? Ако е така, най-вероятно трябва да получите острие, плъгин Sketch, който автоматично генерира HTML файлове от вашия дизайн. Тя ще преобразува групата в Разделение, текст в р и така нататък.

Когато използвате Blade, можете да кажете на plugin какъв DOM елемент да генерира, като добавите специално име към слоя, като [btn] или input [text], така че Blade знае какво трябва да прави. Разгледайте тази демонстрация на видео за вътрешен поглед.

Сега прочетете: 12 полезни приставки за програмисти на WordPress