{"id":10861,"title":"\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0438\u043b\u043e\u0442 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 PwC Venture Hub","url":"\/redirect?component=advertising&id=10861&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=4330fcc6373e035951e6ff64a3ae572ba5f30463fe8776204270bbc0bd091c81","isPaidAndBannersEnabled":false}

Figma Starter Kit: как дизайнеру работать быстрее (часть 2. Кнопки)

Привет друг!
Я закончил работу над большим проектом, поэтому снова готов уделять время статьям и обучению. Во время столь длительного отсутствия я составил большой список полезных материалов, которыми обязательно поделюсь с тобой позже, поэтому не забудь подписаться. 😉
Ладно, давай ближе к делу!
Прошлый раз мы начали формировать Starter-kit, который сбережет твоё время при создании однотипных элементов в дизайне. Если ты не читал первую статью, то обязательно ознакомься: Figma Starter Kit: (pt.1)

Кнопки

Трудно представить web или mobile дизайн без кнопок. Мне кажется, это один из самых основных элементов интерфейса, именно поэтому речь сегодня пойдет об их создании. Давай я немного расскажу о типах кнопок и правилах их создания, а ниже приложу макет с уже готовыми.

1. Типы кнопок

Существует огромное количество типов кнопок и вариаций расположения контента в них, но для нашей цели я хочу выделить 3 основных типа:

  • Текстовая кнопка
  • Иконка + текст (Иконка может располагаться слева от текста или справа)
  • Кнопка — иконка

2. Анатомия кнопки

Основные элементы, из которых состоит кнопка:

  • Текст
  • Заливка (бэкграунд)
  • Обводка
  • Иконка

3. Состояние кнопки

Для себя я выделаю 4 основных состояния, в которых может пребывать кнопка:

  • Normal — стандартное состояние кнопки, на которую не оказывается никакого взаимодействия
  • Hover — это промежуточное состояние при наведении курсора на кнопку
  • Pressed — состояние нажатой кнопки
  • Disabled — неактивное состояние

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

Цвета

В прошлой статье мы делали цветовую палитру, и там я подробно рассказал о цветовых наборах. Для кнопок применяются те же правила, что и для других элементов. Используем 5 цветовых решений:

  • Primary
  • Danger
  • Warning
  • Info
  • Success

Домашнее задание

Ниже я приложу небольшой Figma-исходник, в котором будет лежать небольшой набор кнопок. Но они будут в одном размере — Big, твоя задача сделать этот набор в двух размерах: Medium, Small. И в следующей статье ты сверишь свой получившийся набор с моим.
Figma- исходник

Забегай в мой Telegram

Предыдущая статья- Figma Starter Kit: (pt.1)

0
4 комментария
Популярные
По порядку
Pontus_Frykter

Дабы эта кнопка была выключена, у белого цвета нужно поставить 50% заливки. У вас же это просто кнопка. Серая, но просто кнопка. Эффект выключенности достигается за счет уменьшения показателя контрастности текста на ней.

Ответить
2
Развернуть ветку
Макс О дизайне

Благодарю за верное замечание!

Ответить
0
Развернуть ветку
Uladzislau Sabbage

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

Ответить
0
Развернуть ветку
T K

можно файл пример пжл?

Ответить
0
Развернуть ветку
Читать все 4 комментария
Сервис массового аутсорса несложных задач «джунам»: в Skypro придумали решение проблемы дорогих разработчиков Статьи редакции

Бизнес сможет не тратить время и силы на поиск специалистов, а сервис — трудоустроить своих учеников.

Режим Хеджирования
Что такое аномалии фондового рынка
Бывшие сотрудники Илона Маска открыли новые компании: как появилась и чем занимается «мафия Tesla» Статьи редакции

Экс-коллеги предпринимателя из Parallel Systems разрабатывают железнодорожные платформы, из Redwood Materials — перерабатывают аккумуляторы, а Aurora Innovation создаёт свою версию автопилота.

Как я решил производить велопарковки для Австрии
Я готов месяц счищать снег с тротуара перед зданием ЦБ РФ в костюме жабы

Вот уже полгода мы подстраиваем свою работу под требования 259 федерального закона, чтобы создать полностью легальную криптоплощадку на территории РФ. Я потратил несколько миллионов долларов на разработку платформы, работу юристов и оценщиков.

Доллар на бирже превысил 79 рублей впервые с 2020 года, ЦБ остановил покупку иностранной валюты на неопределённый срок Статьи редакции

Что происходит 24 января: в падении рубля виновата геополитика, но ему могут помочь высокие цены на нефть.

Кейс Pirelli: переводим станки на человеческий язык
ArchTech – технологии, которые изменят мир!
Главные новости недели: Microsoft и Activision Blizzard, часы с солнечной батареей и перенос чатов WhatsApp

Привет, это продолжение 7-го сезона подкаста Telegram-канала ForGeeks с Сергеем Кузнецовыми Павлом Бесединым. Сегодня поговорим про самую громкую покупку недели, какими будут новые Apple Mac Pro, зачем люди пользуются WhatsApp и нужны ли человечеству часы с зарядкой от Солнца. Слушайте свежий выпуск подкаста, читайте и подписывайтесь.

null