Эта серия статей будет полезна новичкам, тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop, а также тем, что уже работает в Figma, но еще не освоил ее в достаточной степени, чтобы создать свою собственную дизайн-систему. Система конечно не претендует на глобальные системы для огромных проектов и порталов, но она может здорово упростить и ускорить работу начинающим дизайнерам.
Конечно всегда можно найти уже готовые подобные библиотеки компонентов, но вы рискуете так до конца и не разобраться в премудростях таких систем, а пройдя весь путь от начала до конца вы сможете сами делать и даже выставлять на продажу свои собственные библиотеки.
Начитавшись статей про атомарный дизайн, вдохновившись и поняв, что в свободном доступе найти подходящую мне дизайн-систему под Figma невозможно, я решила создать собственный шаблон, при помощи которого я буду делать свои работы.
Моей целью было построить шаблон из компонентов и стилей для цветов, текста, теней, различных эффектов и прочего. Шаблон, который будет упрощать начало работы над дизайном и сокращать время, необходимое на такие правки, как замена шрифта, цвета или толщины обводки форм во всем проекте, да и мало ли что еще может взбрести в голову заказчику.
В итоге у меня получилась заготовка, которую я успешно применяю в своей работе, и она здорово экономит мне время. Все, что у буду описывать в этих статьях, я придумывала сама, поэтому на истину в последней инстанции я не претендую. Моя цель — показать, что при помощи компонентов и стилей можно значительно сократить временные затраты на разработку и правки новых макетов.
Меняешь в одном месте, меняется везде. Такую мысль я преследовала при создании этой системы.
В этой серии статей мы попробуем воссоздать такую же удобную заготовку для будущих проектов.
Типографика
Начнем с того, что определим основные стили для текста. По опыту, минимальный базовый набор должен включать себя:
- Стили заголовков до 5-го уровня.
- Группу стилей для основного размера текста (просто текст, жирный текст, подчеркнутый текст для дизайна ссылок).
- Аналогичную группу для мелкого текста.
- Иногда необходимо также продумать набор стилей для супер-мелкого текста (какие-то подписи или мелкие детали интерфейса) и большого текста (выделения, цитаты и прочее).
- Стиль для надписей на кнопках
- Стиль для меню и прочей навигации в шапке сайта
Не переживайте, если вы что-то забудете — по мере работы над вашим проектом, вы всегда сможете добавить в свою систему необходимые стили.
Как это делается:
Создаем текстовый слой, задаем ему все необходимые параметры на панели слева: шрифт, размер, начертание. Затем нажмите на иконку с четырьмя точками на этой панели и в появившемся окошке нажмите плюс:
Система предложит создать имя для нашего стиля, после чего он появится у вас на панели слева. Я предпочитаю называть все объекты в проекте на английском языке. В крайнем случае, использую транслит. Старая привычка, оставшаяся еще с тех времен, когда была программистом.
Аналогичным образом создаются все необходимые стили для вашей дизайн системы.
Итак, мы задали необходимый минимальный набор стилей для текста — это те стили, которые по моему опыту, чаще всего требуются при дизайне среднестатистического сайта. Если впоследствии работы над проектом вам потребуются другие варианты оформления текста (к примеру, вы захотите вставить цитаты курсивом или огромные полупрозрачные фразы в дизайн), вы легко сможете вернуться к вашей дизайн-системе и добавить все необходимое.
Надеюсь, когда-нибудь фигма научится наследовать текстовые стили друг от друга, подобно тому, как это реализовано в ворде. Поменял в родительском стиле какие-либо настройки — они поменялись везде, где в наследовании этого не переопределено. Было бы круто и сэкономило бы очень много времени при копировании готовой системы в новые проекты.
Цвета
Перейдем к цветовой гамме нашего сайта. На этом этапе не важны окончательные цвета. Главное задать какой-то базовый комплект, который по мере адаптации вашего шаблона под конкретную задачу вы легко сможете поправить.
Для примера, возьмем среднестатистический сайт на светлом фоне, с какими-то вставками из светло-серого фона. Нам нужно продумать, какого цвета будут наши кнопки, как поменяется цвет при наведении на них, будет ли дополнительный комплект кнопок для действий, которые надо выделить. Продумать дополнительные цвета для мелких акцентов, цвет текста и иконок, цвет обводок. Удобнее всего это сделать, создав прямоугольник, залив его цветом и определив для этого цвета стиль. Не бойтесь изначально не попасть в идеальный для вас цвет: мы создаем систему, которая будет легко меняться и настраиваться, поэтому вы всегда сможете отредактировать цвета и они изменятся во всем вашем проекте. Также не бойтесь чего-то забыть, добавить еще один цвет в систему будет очень легко — главное потом не забывать применять все эти стили, что мы сейчас определяем.
После того, как мы закончим с цветом и текстом, мы увидим внушительный список различных стилей в правой панели у Figma:
Тени, плашки, стили обводок у форм и прочие эффекты
Думаю, пора уже нам познакомиться с компонентами.
Первым делом мы создадим компонент для плашки, настроим ее внешний вид, попутно создадим стиль для всех теней в проекте (теней для плашек в том числе).
Итак, создадим прямоугольник. Зададим ему белый цвет (обязательно из нашей палитры стилей, которую мы настроили выше). При необходимости мы также можем задать прямоугольнику радиус скругления углов и цвет обводки. Тень мы создадим чуть позже.
Выделяем наш прямоугольник и создаем новый компонент. Не забудьте задать новое имя для компонента на панели слоев слева. Я назвала его surface.
Если прокликаться до нашего прямоугольника, то в левой панели во вкладке Constraints мы увидим, что по умолчанию привязки к краям заданы как Scale. Это значит, что объект будет пропорционально масштабироваться при изменении размеров компонента. Задайте значение как на картинке:
Подробнее про constraints можно посмотреть в официальном хелпе у Figma. Это основная функция, при помощи которой мы можем настраивать адаптивность наших дизайнов. Позже мы еще не раз вернемся к этой функции
Далее выделяем наш компонент и в правой панели ищем вкладку Effects. Добавляем и настраиваем тень. Тень применится прямо к компоненту. Я предпочитаю мягкие, неяркие размытые тени, которые не слишком бросаются в глаза, но при этом мягко подчеркивают плашки.
После того, как мы задали тень, надо сразу же запомнить стиль, который мы использовали — он пригодится для других элементов нашей системы, таким же образом мы сможем выделять, например, фотографии и многое другое. При этом у нас будет единый стиль. Если мы захотим изменить тени везде — это достаточно будет сделать в одном месте.
Созданный стиль появится в нашем проекте под стилями цвета:
Итак. Базовый компонент плашки готов. Теперь я хочу расширить его функционал:
Например, мы можем добавить прямо в компонент иконку с крестиком, чтобы этот компонент можно было применять для закрываемых диалоговых окон.
Но для этого предварительно нарисуем эту иконку при помощи инструмента Pen (горячая клавиша P). Не забудьте к линиям иконки применить цвет из палитры, что мы создали ранее.
После этого выделяем все слои нашей иконки и создаем из них компонент. Определите место в вашем макете, куда вы будете складывать все иконки. Не забывайте присваивать компонентам членораздельные имена. Постепенно система будет обрастать ими.
Выделяем компонент иконки и дублируем его (Comand+D или Contrl+D). у нас создастся экземпляр компонента. При этом при любом изменении основного компонента иконки будут меняться все его экземпляры. Перетаскиваем этот экземпляр прямо в компонент с нашей плашкой и настраиваем constraints так, чтобы иконка всегда была привязана к правому верхнему углу компонента.
Теперь я хочу добавить в этот компонент небольшой треугольниктого же цвета, что и плашка, чтобы наш компонент можно было применять для каких либо подсказок, диалогов и подобных элементов. Для этого создаем этот треугольник при помощи. Необходимо поместить слой треугольника внутрь компонента, к нему также применится общая тень всего компонента. При помощи constrains и его положения можно настроить его отображение сверху и по центру плашки, можно разместить его слева, как вам удобнее. Можно создать несколько таких треугольников и скрывать лишние при необходимости.
Далее нужно скрыть в базовом компоненте треугольник и крестик. Теперь, если мы скопируем экземпляр компонента в наш проект, при необходимости мы можем отыскать в слоях наш треугольник или крестик и показать их. На рисунке ниже показан сам компонент и два его экземпляра с различными настройками отображения крестика и стрелки.
В следующей статье мы продолжим создавать нашу дизайн систему, и поработаем над кнопками.
Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, не жалейте ладошек и хлопайте, будет стимул писать дальше.
П.С. Наводим порядок
Если задать грамотные имена нашим стилям с использованием знака «/», то они сгруппируются в палитре слоев:
Примеры именования:
Также хорошим тоном считается использования описаний для стилей — это будет полезно многим:
- разработчикам, которые впоследствии будут верстать ваш проект
- коллегам, если вы работаете в команде — они смогут зайти в стиль и посмотреть его описание, понять для чего он был создан
- вам — если вы забудете, для чего вы создавали тот или иной стиль, где он может использоваться — вы сможете освежить это в памяти, прочитав комментарий к нему
Комментарий задается при редактировании стиля в поле description.
Цвета и эффекты также можно переименовать в соответствии с этими правилами, если в вашем проекте их будет слишком много и станет сложно в них ориентироваться.
Behance — мои лучшие работы
Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.
Продолжение:
- Часть 2: Кнопки
- Часть 3: Поля ввода и выпадающие списки
- Часть 4: Поиск и умный поиск
- Часть 5: Списки и Auto Layout
Перевод статьи Татьяна Маслакова
Топ коментарі (0)