Создание ключевых символов

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

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

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

Скала любит хорошие дизайн-системы (Однажды он писал это в Twitter. Я думаю в 2012?)

Итак, если вы следовали указаниям, вы увидите, что теперь у нас есть базовые цвета, наложения и т. д. А также созданы общие стили (например, Fill / Primary).

Мы также создали нашу типографику и другие различные стили, такие как тени, градиенты и т. д.

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

Давайте начнем…

Меньше слов. Больше дела. Приступим!

Символы цвета

Символы цвета в Sketch

Я сконцентрируюсь только на основном цвете, который мы создали для этого урока, иначе, как я уже упоминал, это превратится в 12-часовое руководство.

Я сам создал страницу «Символы» (да, это неортодоксальный способ делать что-то, но, честно говоря, в конце это будет иметь смысл), а затем начертил прямоугольник (100×100) и применил общий стиль Fill / Primary, а затем переименовал этот слой на Base.

Символы цвета в Sketch - 1

Затем я просто создал новый символ и назвал его Color / Primary.

Символы цвета в Sketch - 2

Я удалил оригинал, поэтому я просто остался с новым символом — Color/Primary

Затем это был просто вопрос дублирования этого нового символа, выбора слоя Base, выбора других разделяемых стилей заливки, которые я создал ранее, и последующего переименования символа в списке слоев.

Символы цвета в Sketch - 3

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

Символы текста

Символы текста в Sketch

Но прежде чем мы это сделаем, давайте создадим несколько текстовых символов. Да, это то, что вы должны сделать вручную, пока Sketch не создаст удивительное обновление, которое позволит нам обойти этот довольно рутинный процесс. Надеемся и ждем!

Я хотел получить 2 набора текстовых символов. Один для кнопок, а другой для форм ввода. Использовал семейство шрифтов № 1 (Poppins) для кнопок и семейство шрифтов № 2 (Open Sans) для форм ввода, ярлыков, сообщений и т. п.

Я выбрал определенные стили текста, которые я создал ранее:

  • Черный
  • Зеленый
  • Серый
  • Светло серый
  • Основной
  • Красный
  • Белый

Затем я выбрал 3 размера для каждого из моих текстовых символов. Большой, средний и малый. А затем сделал символы для текста с выравниванием по левому краю, по правому краю и по центру.

Символы текста в Sketch - 1

Размещение текстового стиля на странице моих символов (например, H5 / Семейство шрифтов # 1 / По центру / Черный / Полужирный). Затем я отредактировал текст и создал символ (Text/Button/Large/Center/Black).

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

Символы текста в Sketch - 2

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

Поэтому к тому времени, когда я в конце концов закончил создание текстовых символов, у меня было что-то вроде следующего…

Следуя соглашению о присваивании имен символов:

  • Text/Button/Large/Center/Black
  • Text/Button/Medium/Center/Black
  • Text/Button/Small/Center/Black

Разумеется, выравнивание по левому краю / по правому краю и цветовые варианты (т. е. Text/Button/Large/Left/Green).

Я сделал нечто похожее для символов ввода, используя для этого семейство шрифтов № 1 (Open Sans)…

Символы текста в Sketch - 4

Символы иконок

Символы иконок в Sketch

Я выбрал иконки для Cabana (не менее 90% из них) из набора иконок Google Material. У этого набора не хватало разнообразия, поэтому мне пришлось взять еще один набор иконок, чтобы заполнить пробелы.

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

Я просто создал прямоугольник (24×24, который придерживается 8pt сетки), который будет действовать, как ограничивающий прямоугольник для моих иконок, чтобы помочь с выравниванием и визуальной последовательностью в будущем.

Символы иконок в Sketch - 1

Я поместил свой символ Color/Primary поверх него и изменил его до того же размера (24×24)…

Символы иконок в Sketch - 2

Затем я пошел дальше и перетащил соответствующую иконку (я использовал для этого надежный IconJar), изменил размер и выровнял его соответствующим образом. Он был добавлен внутрь папки, поэтому я взял слои формы из этой папки и удалил папку (боюсь, вы не можете создавать маски с папками).

Затем я удалил у иконки «Заполнить» (Fill) с панели «Инспектор» и превратил их в маску (щелкнув правой кнопкой мыши по иконке и выбрав Mask), пока у меня не получилось следующее…

Символы иконок в Sketch - 3

Затем я выбрал все элементы (Color Symbol, Icon Shape и Bounding Box Shape) и преобразовал в символ…

Символы иконок в Sketch - 4

Я удалил оригинал, пока не остался со свежим символом, а затем, наконец, выбрал слой Bounding Box Layer и используя ограничения изменения размера, закрепил его со всех сторон.

Символы иконок в Sketch - 5

Используя тот же процесс, что и выше, я пошел дальше и создал все остальные символы иконок. Около 150! Я создал их в рекордные сроки (сказал саркастичным тоном). Теперь у меня было большое количество символов иконок, которые я мог бы изменять в других символах, с дополнительным бонусом переопределения цвета, который теперь доступен мне.

Символы иконок в Sketch - 5

В третьей статье этой мини-серии из 4-х частей (можно ли считать ее мини-серией в 4 частях?), я покажу вам создание кнопок и состояний кнопок, а также различных состояний ввода. Затем в 4-й и заключительной части я покажу вам, как объединить эти небольшие символы, чтобы создать полнофункциональные компоненты. Ура!

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

Используйте код MEDIUM25, чтобы получить 25% скидку.

Cabana

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

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