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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9 3 80x53 - Как создать дизайн-систему в 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)…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: Marc Andrew

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

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

Прощай Sketch…

Часто возникает вопрос: «Какой инструмент дизайна лучший?» И долгое время ответом был Sketch, но теперь это не так.

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma