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

Создание ваших компонентов

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

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

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

Давайте приступим …

Для компонентов кнопки я выбрал 3 размера

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

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

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

  • Default (без иконки)
  • Icon (без текста)
  • Left Icon (с текстом)
  • Right Icon (с текстом)

Достаточно для разнообразия в 99,9% проектов, которые вы создадите на более позднем этапе.

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

Радиус закругления символов

Затем я переименовал слой просто в Button и отметил, что только с этим слоем у меня в распоряжении также есть переопределения символов (состояние кнопки и цвет). Очень удобно!

Состояние кнопок и цвет

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

Как создать дизайн-систему в Sketch (Часть 4) - 1

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

Кнопка в дизайн системе Sketch

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

Дизайн система в Sketch (часть 4) - 2

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

Дизайн система в Sketch (часть 4) - 3

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

Дизайн система в Sketch (часть 4) - 5

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

Дизайн система в Sketch (часть 4) - 6

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

Затем из моих символов добавил одну из иконок, которые я создал ранее, переименовал слой (иконку), изменил его переопределение цвета на белый…

Дизайн система в Sketch (часть 4) - 7

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

Дизайн система в Sketch (часть 4) - 8

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

Дизайн система в Sketch (часть 4) - 9

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

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

Дизайн система в Sketch (часть 4) - 10

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

Дизайн система в Sketch (часть 4) - 11

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

Дизайн система в Sketch (часть 4) - 12

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

Дизайн система в Sketch (часть 4) - 13

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

Дизайн система в Sketch (часть 4) - 14

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

Дизайн система в Sketch (часть 4) - 15

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

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

Дизайн система в Sketch (часть 4) - 16

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

Дизайн система в Sketch (часть 4) - 17

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

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

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

Дизайн система в Sketch (часть 4) - 18

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

Дизайн система в Sketch (часть 4) - 19

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

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

Дизайн система в Sketch (часть 4) - 20

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

Дизайн система в Sketch (часть 4) - 21

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

Дизайн система в Sketch (часть 4) - 22 Дизайн система в Sketch (часть 4) - 23

И вот у меня стало 12 довольно замечательных компонентов.

Дизайн система в Sketch (часть 4) - 24

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

Дизайн система в Sketch (часть 4) - 25

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

Как создать дизайн-систему в Sketch (Часть 1)

Как создать дизайн-систему в Sketch (Часть 2)

Как создать дизайн-систему в Sketch (Часть 3)

Не хотите создавать дизайн-систему сами? Вы можете приобрести копию Cabana прямо здесь.

Спасибо за прочтение статьи.

Автор статьи: Марк — дизайнер, автор, отец и любитель чипсов.