UXPUB

UXPUB - спільнота з 4,041 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Часть 4. Как создать дизайн-систему в Sketch
Редакція
Редакція

Опубліковано • Оновлено

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

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

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

В предыдущих частях я показал вам, как создать основы того, что станет вашей дизайн-системой в 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 x 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 Это открыло мне глаза на то, как просто создавать такие мелкие основополагающие элементы, как символы текста, цвета и иконок. Это позволяет упростить создание более крупных компонентов, а эти небольшие строительные блоки являются ключевыми для любой системы дизайна, которую вы хотите построить. 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 прямо здесь. Спасибо за прочтение статьи. Автор статьи: Марк дизайнер, автор, отец и любитель чипсов.


Перевод статьи Marc Andrew

Обговорення (0)