{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}

Дизайн-библиотека в Figma: типографика, цвета и стили

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

Библиотека компонентов и стили в Figma Татьяна Маслакова 

Рассказываю, как автоматизировать свою работу в Figma, создать удобную и гибкую библиотеку компонентов, которую можно будет легко настраивать под новые проекты. Объясняю, как пользоваться стилями для текста, цвета, эффектов.

На подобную систему меня вдохновили статьи про атомарный дизайн. В своих поисках я перелопатила множество ресурсов с бесплатными UI-китами, но так и не нашла ту систему, которая была бы совершенно понятна и удобна мне. Так возникла идея создать свою собственную дизайн-библиотеку, развивать ее и переиспользовать в своих проектах.

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

В итоге у меня получилась болванка, которую я успешно использую в своей работе, и она сильно экономит мне время.

Меняешь в одном месте, меняется везде. Такую основную мысль я преследовала при создании этой системы.

Типографика. Готовим стили для текста

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

  • Стили заголовков до 5-го уровня.
  • Группу стилей для основного размера текста (просто текст, жирный текст, подчеркнутый текст для дизайна ссылок).
  • Аналогичную группу для мелкого текста.
  • Иногда необходимо также продумать набор стилей для супер-мелкого текста (какие-то подписи или мелкие детали интерфейса) и большого текста (выделения, цитаты и прочее).
  • Стиль для надписей на кнопках, для меню и прочей навигации в шапке сайта.

Не переживайте, если вы забудете сделать какой-либо стиль — по мере работы над вашим проектом, вы всегда сможете его добавить в свою систему.

Итак, создаем текстовый слой, задаем ему шрифт, начертание, размер, отступы и другие параметры на панели слева. Затем нажимаем на иконку с четырьмя точками на этой панели и в появившемся окошке жмем +:

​Создание стиля для текста в Figma Татьяна Маслакова

Задаем имя стиля, далее он появится у вас на панели слева.

​Стиль текста в Figma Татьяна Маслакова

Таким же образом создаем все остальные стили для нашей дизайн-системы.

​Таблица текстовых стилей в дизайн-библиотеке в Figma Татьяна Маслакова

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

Цвета

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

Не бойтесь не попасть с первого раза в идеальный для вас цвет: наша библиотека будет легко настраиваться, цвета можно будет поправить в процессе работы, при этом они изменятся во всем вашем проекте.

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

​Создания стиля заливки в Figma Татьяна Маслакова

После определения всех стилей они отобразятся в правой панели в Figma:

​Стили заливки и текста в Figma Татьяна Маслакова

Создаем плашку, изучаем стили эффектов

Наконец-то переходим к созданию первого компонента в нашей библиотеке.

Это будет вспомогательный компонент для плашки, который мы будем в дальнейшем применять в других компонентах библиотеки.

Настройки внешний вид плашек. Создаем прямоугольник. Задаем ему белую заливку из нашей палитры стилей. Задаем необходимые скрепления, цвет обводки (из палитры стилей). Тень мы создадим чуть позже.

Выделяем прямоугольник и запаковываем в компонент. Не забудьте задать имя для компонента слева в панели слоев.

​Создание компонента в Figma Татьяна Маслакова

Внутри компонента выделяем прямоугольник и настраиваем Constraints как на картинке:

​Constraints в Figma Татьяна Маслакова

Выделяем наш компонент, в правой панели ищем вкладку Effects. Здесь можно добавить и настроить тень.

Тень в Figma​ Татьяна Маслакова​

Важно: после создания тени сразу же запомним стиль, который мы использовали — в дальнейшем этот стиль пригодится для других элементов библиотеки и проектов, созданных на ее основе (например, выделение фото в проекте и так далее). Таким образом изменение этого стиля позволит очень быстро изменить все тени в нашем проекте.

​Добавляем новый стиль для теней в Figma Татьяна Маслакова
Стиль заливки в Figma​ ТатьЯна Маслакова​

Расширим функциональность компонента плашки:

К примеру, добавим иконку с крестиком для закрытия диалоговых окон.

Предварительно нарисуем эту иконку при помощи инструмента Pen не забываем к обводам применить ранее созданный для них стиль. Если у вас нет такого стиля — создайте его так же, как было описано ранее.

​Применение стиля цвета к иконке в Figma Татяна Маслакова

Выделяем все слои нашей иконки и запаковываем в компонент.

Зарезервируйте в вашей библиотеке, куда вы будете складывать все будущие иконки.

Дублируем компонент иконки. При этом создастся экземпляр компонента. При любом изменении основного компонента меняются все его экземпляры.

Созданный экземпляр перетаскиваем в компонент с нашей плашкой и настраиваем constraints: top и right.

​Constraints в Figma Татяна Маслакова

Нарисуем при помощи pen небольшой треугольник, поместим его внутрь компонента плашки, к нему также применится общая тень всего компонента (обратите внимание, ранее тень была применена к самому компоненту, а не к слою прямоугольника внутри него).

Настроим constrains там, где вам удобнее его разместить. У меня он будет сверху-слева, соответственно constrains настроим аналогично. У плашки может быть несколько скрытых слоев треугольников в зависимости от того, как вы хотите впоследствии применять этот компонент (например, для создания плашки диалога, удобно расположить треугольник сбоку).

Скрывая или показывая нужные слои, мы будем кастомизировать компонент под нужные ситуации.

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

​Вариации одного компонента в Figma при помощи скрытых слоев Татьяна Маслакова

Наводим порядок

Есть удобный способ именования стилей в Figma. Стили можно удобно сгруппировать в палитре, задавая им имена с использованием знака «/». Например headers/h1 и так далее:

Правильное ​именование стилей в Figma Татьяна Маслакова

Таким же образом именуются стили заливок, стили эффектов и даже сами компоненты.

В других своих статьях я рассказываю, как создавать кнопки, Поля ввода, выпадающие списки, поиск, списки и преимущества.

Читайте продолжение здесь.

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

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами. Новые статьи о дизайн-системе также публикуются здесь.

0
26 комментариев
Популярные
По порядку
Написать комментарий...

тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop

этих дремучих колхозников уже не исправишь, у них Фотошоп мозга.

Исключение - всякие шаблонщики, работающие на стоках, ибо стоки до сих пор требуют исходники в PSD

4

стоки.. ох уж эти стоки.. там тоже многое устарело. вот эти стоки и подсаживают молодняк на фотошоп

2

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

0

Я тоже всячески стараюсь либо уговорить людей на фигму, либо избегать заказов с фотошопом. Вот кстати свежачок с тостера, залез сегодня в ленту после долгого отсутствия и тут как раз: 

0

На скрине ответ не верный. Фигма не предназначена для вёрстки визиток и буклетиков. Там нет CMYK.

0

Не предназначена, но к счастью для малостраничной полиграфии _теперь_ достаточно и РГБ.

Уже пару лет как делаю визитки, брошюры и прочую мелкую бумажную парашу в фигме. И заебись.

2

Воистину. 

1

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

Кстати ф в фигме и лого рисую, потом уже перегоняю их в другие векторные редакторы, чтобы подобрать цвета из cmyk - палитры (чтоб потом у заказчиков при печати с ними не было проблем)

0

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

0

Подача супер, спасибо! Вот только скрытые слои в компоненте - не очень хорошая история, т.к. они увеличивают вес проекта количеством слоев...

1

Спасибо. Возможно вы правы. Можно еще такое реализовать наследованием компонента с добавлением треугольника, правда тут уже придется думать как сделать плашку с тенью нормально, что то городить - сейчас треугольник и сама плашка сливаются с одной общей тенью, за счет того, что тень назначена на сам компонент. Ну и дальнейшая его замена в instance позволила бы менять разные виды пашек. Путей  тут несколько.

0

Надо поэкспериментировать, спасибо :)

0

с instance я вот тут поэкспериментировала. Cделала много компонентов для разных инпутов и выпадушек в разных состояниях с легкой их заменой через instance.

1

Типа в статье кроме скрытых слоев проблем нет) В нормальной дизайн-системе куча вариантов заголовков может быть. Все это дело надо группировать сразу через слеш.

А иногда и стили в компоненты оформлять для атомарки

0

Подписался. Как раз пытаюсь уговорить на работе людей, что нам нужна дизайн-система.

А опыта с ней у меня нет, и тут как раз статьи эти :)

0

Спасибо. Удачи вам в уговорах.

1

я правильно понял – шаблон в самой фигме пощупать нельзя?

0

Пока что нет. Возможно когда закончу цикл статей, сделаю общий файл со всеми компонентами разом.

0

Почему кстати нельзя?
Есть же кнопка Present, после которой открывается макет в окне браузера, который можно увидеть не как изображение, а как страницу сайта со скролом и даже кликами по ссылками с переходами между страницами. Или я не правильно понял вопрос?

0

Просто просмотр не поможет увидеть связи внутри компонентов. Но на самом деле у меня уже много статей вышло, так что возможно через какое то время оформлю все это в какой то красивый вид и сделаю файлик.

1

Большое спасибо вам за ваши статьи. Подписался.

0

спасибо за подписку. Буду стараться дальше

0

 а поделитесь знанием как на бехансе прикреплять резюме?) как здесь у вас https://www.behance.net/tat_fom/resume

0

точно уже не помню, но по-моему так:
заходим в свой профиль. под фотографией жмем "Edit your profile". далее
ищем вкладку WORK EXPERIENCE, там тыркаем  Edit Work Experience и все заполняем

0

Спасибо за полезную статью!

0

Татьяна, подскажите, существуют ли какие-либо общие требования по наименованию стилей и компонентов? Или же это зависит лишь от договоренности между дизайнером и программистом?

0
Читать все 26 комментариев
eBay: 64% покупателей не жалеют о своих покупках в Черную пятницу

Черная пятница — одно из главных событий этой недели: тысячи покупателей находятся в поиске лучших скидок. А что происходит после Черной пятницы? eBay опросил около 1000 россиян и выяснил, считают ли они выгодными покупки, совершенные во время самой большой распродажи года.

«Как иронично, что фирме в сфере психического здоровья плевать на психическое здоровье собственных работников» Статьи редакции

Сотрудники Spring Health жалуются на соучредительницу Эйприл Го: она запугивает их, увольняет при всех, вынуждает работать по 70 часов в неделю и не нанимает тех, кто спрашивает про переработки. Го объясняет: «Мы носимся как безголовые цыплята, потому что на кону человеческие жизни».

Эйприл Го — на ноябрь 2021 года самая молодая женщина-директор компании с оценкой более $1 млрд Slush
Плюшки – от робота, а преференции – для резидента

Как наладить взаимовыгодное сотрудничество на территории ОЭЗ «Технополис Москва».

Зимний набор на оплачиваемую стажировку в Тинькофф Старт: какие задачи решают стажеры

Стажировка пройдет по направлениям: аналитика, QA, бэкенд-разработка (Java, C++, Python, Scala, .Net, Golang), фронтенд, мобильная разработка (iOS и Android), ML, маркетинг и менеджмент образовательных проектов.

Как обустроить домашнюю студию звукозаписи при скромном бюджете Статьи редакции

Почему сведённый трек нужно проверять на паршивой Bluetooth-колонке, какие плагины выгоднее брать новичку и с каким синтезатором работал Ханс Циммер, создавая саундтрек к «Тёмному рыцарю», — в пересказе Pitchfork.

AudioMunk
IKEA начала сдавать в Токио квартиры в 10 м² за $0,86 в месяц, чтобы показать, что в них тоже можно жить Статьи редакции

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

Разговор PRO: аналитика рекламы

Эксперты компании Registratura, входящей в iConText Group, вместе со своим клиентом «Олант» приняли участие в спецпроекте AdIndex.ru, где поговорили о рекламной аналитике.
Сергей Ерофеев, генеральный директор Registratura, Андрей Сахаров, руководитель отдела продаж Registratura, и Филипп Иванов, директор по интернет-маркетингу и e-commerce «Олант»…

Кейс «АнтиШколы»: мы впустую потратили два года на разработку своей платформы и выжили в пандемию благодаря Edvibe

После вуза мы с партнером запустили неформальную АнтиШколу по английскому — с кофе, печеньками, играми и атмосферой антикафе. Но столкнулись с проблемой в онлайне: два года разрабатывали приложение для студентов и потратили порядка $40 тысяч в никуда. Рассказываю, как это было.

Так мы занимаемся английским на крыше! Никаких унылых парт

Фото: Курьер Delivery Club из Рыбинска в ретро-форме Статьи редакции

Сотруднику выдали шинель и фуражку, а рюкзак поменяли на ящик с кожаными ремешками.

null