Пади ... наистина просто решение на проблем, който всички имаме, докато проектираме бутони ...

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

Създаването на динамичен бутон в Sketch with Paddy е лесно. Ще ви преведа чрез настройка на вашия бутон, намиране на стойностите на подплънките и използване на символи, за да видите реалната стойност на този плъгин. Ще създадем и бутон с икона. Преди да започнем, не забравяйте да изтеглите приставката тук: https://github.com/DWilliames/paddy-sketch-plugin или използвайте SketchRunner, за да го инсталирате.

За тези бутони ще използваме функцията Layer padding. Ръководствата за другите функции ще идват по-късно.

СТЪПКА 01: Създайте своя бутон и му дайте обикновен етикет.

нищо фантазия тук ... все още ...

СТЪПКА 02: Определяне на вашите стойности за подплънки.

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

разстоянието се изчислява от краищата на бутона до граничното поле на текста.

СТЪПКА 03: Групирайте елементите на бутоните си.

Изберете своя текст и бутон и щракнете върху бутона Group в лентата с инструменти или използвайте прекия път, CMD + G.

СТЪПКА 04: Веднъж групирани, можем да използваме Пади.

Първо изберете вашия групиран бутон. След това изберете Paddy от менюто на плъгините или използвайте SketchRunner. Не забравяйте да изберете „Подложка за избор“

СТЪПКА 05: Добавете стойностите на подплънките.

Диалоговият прозорец за Пади е доста прост. Всичко, което трябва да направите, е да въведете стойностите, които намерихме по-рано, 12 16 12 16. Пади задава тези стойности в този ред, горе вдясно долу вляво. Това е точно като CSS. Пади също ви позволява да променяте тези стойности като CSS. Например, можете да използвате една стойност като 20, която ще бъде 20 за всички 4 страни. Можете също да използвате две стойности като 20 40, които ще се прилагат 20 отгоре и отдолу и 40 отдясно и отляво. За този пример ще използваме 12 16 12 16. (бихме могли да използваме и 12 16) След като направите това, просто щракнете върху ОК.

СТЪПКА 06: Пади магия.

След като направите това, вашият бутон няма да изглежда много по-различно. Но. сега можем да направим някоя магия на Пади! Щракнете вътре в бутона си към текста и го променете на нещо дълго като „Добрите дизайнери искат да се окажат грешни, лошите дизайнери се надяват да бъдат доказани правилно.“ (Това е хубав цитат от Анди Буд) След като направите това, вие само трябва да кликнете извън текстовия етикет и voilà !, вашият бутон ще преоразмерите до подложката, която сме задали.

Ако погледнете подробности за бутона в панела със слоеве, ще видите, че слоят на бутона има прикрепен към него [12 16]. Това е всичко, което плъгинът прави, той добавя тези стойности към най-долния слой в групата, всъщност можете да промените стойностите там и ще приложите приставката, сякаш сте използвали диалоговия прозорец Paddy.

СТЪПКА 07: Пади също работи със символи!

Улеснява смяната на етикетите на бутоните. Нека опитаме. Първо, създайте символ от нашия бутон, като щракнете върху бутона „Създаване на символ“ (няма пряк път, освен ако не нещо по поръчка.) Ще се появи диалоговият прозорец „Създаване на нов символ“. Нека дам името на този символ нещо просто, „бутон за текст“ и щракнете ОК.

СТЪПКА 08: Отменете този символ.

Сега, когато бутонът ни е символ, е много лесно да променим етикета и да позволим на Пади да промени размера на бутона. Изберете новия символ на бутона. Един отдясно ще се появи панела Overrides. Въведете новия си етикет и натиснете enter / return. Това е! бутонът ви е прясно Paddy.

СТЪПКА 09: Нека да направим малко по-фантазиран бутон и да добавите икона.

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

СТЪПКА 10: Повторете

Останалото е просто. Групирайте трите елемента точно както направихме в стъпка 3. Пуснете Paddy и използвайте стойностите, които намерихме в стъпка 9, 8 16 7 8. Нека да пропуснем напред и да го превърнем в символ и да го наречем „бутон на иконата“

Сега има едно специално нещо, което трябва да направите, за да сте сигурни, че нашата икона няма да се разтегли, когато сменим етикета си. Щракнете върху страницата „Символи“ в панела „Страници“ отляво на интерфейса на скицата. След това щракнете върху иконата, така че да бъде избрана. От дясната страна на интерфейса Sketch ще видите панела Ограничения. Тук можем да кажем на иконата как да се държим, когато бутонът е оразмерен. Не забравяйте да изберете „Fix Width“ и „Fix Height.“ Също така изберете горната и лявата дръжки, като кажете иконата да остане прикована до горната и лявата страна на бутона.

СТЪПКА 11: Задайте някои ограничения

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

Ако искате иконата от дясната страна, можете да направите същото, както е споменато по-горе, просто обърнете мястото, където сте поставили етикета и иконата.

Извод: Това е всичко! Сега можете да направите бутони, които винаги ще поддържат формата си. Помислете за цялото време, което ще спестите, без да се налага да преоразмерявате бутоните през целия ден!

Ако обичате този плъгин, защо да не извикате на Дейвид Уилиамс (създателят на Пади) кафе ️ чрез PayPal, за да сподели любовта! Определено ще му помогне да може да поддържа допълнително този плъгин. Можете също да го последвате в Twitter @davidwilliames

** Забележка ** Откакто публикувах това, Дейвид каза, че е поискана поддръжка на вложени символи за много и че работи върху нея. Следете се!

Това е първата от поредица статии, които скоро ще идват на sketchtools.co. Все още няма нищо, но ме последвайте в Twitter или тук на Medium, за да разберете кога има.