{"id":9253,"title":"\u0427\u0442\u043e \u0434\u0430\u0440\u0438\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u0435","url":"\/redirect?component=advertising&id=9253&url=https:\/\/vc.ru\/mos.ecology\/322605-chto-darit-klientam-sotrudnikam-i-partneram-chtoby-ne-navredit-okruzhayushchey-srede&placeBit=1&hash=f7f2e59c93d6bf99b4de7eb426299419c5e5dc01833ead4a2d9b746713d07b81","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 комментария
Популярные
По порядку

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

2

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

0

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

0

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

0
Читать все 4 комментария
Почему вас больше не существует: рождение и смерть субъекта в истории философии

Десять лекций — десять историй о том, как развивалось понятие о философском субъекте — носителе сознания. Вместе с доктором философских наук Дианой Гаспарян и аудиторией открытого лектория Сигнум мы прошли долгий путь от древнегреческой философии до исследований XX века и рассказываем о курсе подробнее.

«Сбермегамаркет» и «Эльдорадо»: оплаченный заказ Xbox Series X выборочно отменен избранным покупателям

Итак, продолжение рассказа о ситуации с тем, как «Сбермегамаркет» и «Эльдорадо» приняли многочисленные оплаченные заказы на консоль Xbox Series X, выдали людям чеки об этом, а затем через несколько дней благополучно отменили заказы.

Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

Сервис доставки в почтаматы 5post обманывает и присваивает посылки

Совсем недавно я решил заказать с АлиЭкспресс несколько товаров для домашнего бара. По отдельности они не дорогие, но для общей картинки нужны все. Через неделю после заказа мне приходит смс с номера "5post" о том, что одна из этих посылок ждёт меня в ближайшей пятерочке. Я скачал приложение, зарегистрировался там и увидел, что моя посылка будет…

Дайджест новостей Сбера: сайт Digital Пётр, сценарии для умного дома и платина от Forbes

Прошлый дайджест мы целиком посвятили 180-летию Сбера, поэтому новостей накопилось много. Среди них — запуск сайта по распознаванию рукописей Петра I, большое обновление на платформе умного дома Sber и другие. Рассказываем всё самое интересное.

Картинка, сгенерированная ruDALL-E по запросу «рыжий котик»
Американский сервис экспресс-доставки продуктов 1520 с основателями из России закрывается после года работы — Insider Статьи редакции

Стартап не смог найти финансирование и рассчитывал на сделку с конкурентом, но она не состоялась, говорят источники.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
​Почему от коронавируса в Японии умирают по 0-3 человека в день?

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

SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

Маленький стартап против гигантов: Kytch может починить ломающиеся машины для мороженого McDonald's — сети это не нужно Статьи редакции

Джереми О’Салливан и Мелисса Нельсон придумали устройство, которое предотвращает поломку автоматов для мороженого — проблемы с ними есть в 10% ресторанов McDonald’s. Несмотря на убытки франчайзи, сеть его запретила и почти уничтожила Kytch.

Wired
Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

null