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

#sketch #designsystem

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

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

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

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

Давайте приступим ... Для компонентов кнопки я выбрал 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. Теперь, желая соблюдать сетку в 8pt и используя небольшое количество вычислений, я отрегулировал ширину и высоту слоя кнопки, чтобы текстовый слой, который я только что добавил, был выровнен на 8pt сверху и снизу кнопки и 32pt с левого и правого края. При соответствующем изменении размера слоя кнопки и выравнивании слоя текста я выбрал оба слоя и преобразовал их в символ, назвав – Button/Large/Default. Теперь, работая с недавно созданным символом кнопки, я выбрал текстовый символ внутри него... ... и из ограничений изменения размера в панели инспектор, прикрепил к левому и правому краям и зафиксировал высоту. Теперь, когда я изменяю размер этого символа кнопки внутри своих проектов, я знаю, что текст внутри него будет идеально выравниваться. Теперь, вставив этот символ в проект, у меня в распоряжении есть множество опций (переопределений), что позволяет мне с минимальными усилиями настроить этот компонент. Иконка кнопки. Я снова, просто вставил символ Shape/Fill/Radius – 4px, который я создал ранее, переименовал его, а затем скорректировал его на более квадратную фигуру. Затем из моих символов добавил одну из иконок, которые я создал ранее, переименовал слой (иконку), изменил его переопределение цвета на белый... ...и затем, используя инструмент масштабирования, увеличил его размер до 32 x 32px. Затем я отрегулировал размеры слоя фигуры, поэтому выровнял символ иконки под 8pt со всех краев. После правильного выравнивания слоя кнопки и текстового слоя я выбрал оба слоя и преобразовал их в символ, назвав его – Button/Large Icon. Работая с вновь созданным символом кнопки, я выбрал символ иконки внутри него, а с помощью ограничений при изменении размера установил ширину и высоту. Это позволяет избежать искажения иконки при изменении размера символа внутри ваших проектов. Переходя к символу Button/Large/Left Icon, следуя действиям аналогичным с предыдущими кнопками, которые я создал, я вставил Shape/Fill /Radius – 4px символ, а затем слегка изменил его размеры (180px x 47px, если вы хотите знать точные размеры)... Затем я вставил символ иконки, переименовал его, масштабировал до 32 x 32px и изменил цвет переопределения на белый. И из текстовых символов, созданных ранее, я добавил символ Text/Button/Large/Left/White и переименовал слой на Text. И еще раз, придерживаясь системы сеток 8pt, я выровнял символ иконки, поэтому он был 8pt сверху, снизу и с левого края. Тоже самое для текстового символа, поэтому он был на 16pt справа от иконки, 8pt сверху и снизу символа кнопки, и используя ручки изменения размера, отрегулируйте его так, чтобы его ограничивающая рамка была 16pt с правого края символа кнопки. Теперь, когда выбраны все 3 слоя (текст, иконка и кнопка), я преобразовал их в символ и назвал его Button/Large/Left Icon. Работая с вновь созданным символом кнопки, я сначала выбрал иконку и прикрепил ее к левому краю, а затем зафиксировал ее ширину и высоту. Затем привязал выбранный текстовый символ к левому и правому краям и зафиксировал его высоту. Наконец, для символа Button/Large/Right Icon я выполнил аналогичный процесс, как с предыдущими кнопками.

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

Затем, выравнивание и изменение размера (ограничивающая рамка) текстового символа, таким образом, чтобы было 16pt от левого края, 8pt от верхнего и нижнего края кнопки и 16pt от левого края иконки. И для символа иконки, чтобы он был 8pt справа, сверху и снизу. Затем я выбрал все 3 слоя (текст, значок и кнопка) и еще раз преобразовал в символ Button/Large/Right Icon. И, наконец, с помощью ограничений изменения размера прикрепил текстовый слой к левому и правому краям и зафиксировал его высоту. И для иконки, приколол ее к правому краю и зафиксировал ее ширину и высоту. После того, как были добавлены символы большой кнопки, я затем перешел к среднему и малому вариантам, следуя почти аналогичному процессу, что я показал вам, но на этот раз вставляя, например, символ Text/Button/Medium/Center/White и масштабируя символ иконки соответственно, но все еще придерживаясь системы сеток 8pt. И вот у меня стало 12 довольно замечательных компонентов. Затем я создал такие компоненты, как элементы формы, меню и раскрывающиеся окна, навигацию, разбивку на страницы и многое другое. Ключевые элементы для любого проекта, над которым вы работаете, но в форме, которая теперь легко настраивается и позволяет мне не отвлекаться на мелочи при работе над проектом. Это открыло мне глаза на то, как просто создавать такие мелкие основополагающие элементы, как символы текста, цвета и иконок. Это позволяет упростить создание более крупных компонентов, а эти небольшие строительные блоки являются ключевыми для любой системы дизайна, которую вы хотите построить. http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-1/ http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-2/ http://ux.pub/kak-sozdat-dizajn-sistemu-v-sketch-chast-3/ Не хотите создавать дизайн-систему сами? Вы можете приобрести копию Cabana прямо здесь. Спасибо за прочтение статьи. Автор статьи: Марк – дизайнер, автор, отец и любитель чипсов.