Мини-учебник — Работа с компонентами кнопок Figma

Опубликовано: 2022-03-11

В Figma элементы пользовательского интерфейса называются компонентами. Правильно построенные, они невероятно универсальны и легко обновляются, но на что способны компоненты и как они работают? Мы продемонстрируем их мощь, работая с одним из самых распространенных элементов пользовательского интерфейса — кнопкой.

Почему кнопки?

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

*Примечание редактора: это письменное руководство было создано на основе видеоурока, созданного Дэвидом Луром из Build UX.

Задача 1: создать базовый компонент кнопки Figma

  1. Начнем с создания нового кадра и переименования его в Buttons на панели слоев.
  2. Введите текст метки кнопки. Мы будем использовать «Зарегистрироваться» для этого урока.
  3. Наш шрифт:
    • Робото Медиум
    • Размер шрифта 18
    • Высота строки 24
    • Выравнивание текста по центру
    • Выровнять по середине
    • Изменение размера = фиксированный размер
  4. После того, как вы написали метку для кнопки, дважды щелкните в правом нижнем углу текстового поля, чтобы оно автоматически изменило размер в соответствии с наименьшими ограничениями текста.
  5. Переименуйте текстовый слой в Button Label .
    6. Компонент кнопки Figma. Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 1: Шаги 1-5
  6. Создайте прямоугольник, поместите его под меткой кнопки на панели слоев и переименуйте в Button Container . Разрешить цвет контейнера кнопки оставаться серым по умолчанию.
  7. Установите фиксированную высоту для контейнера кнопки. Мы будем использовать 60 пикселей.
  8. Теперь мы добавим внутренний отступ к контейнеру кнопок.
    • Ширина метки кнопки составляет 63 пикселя.
    • Нам нужно 24 пикселя справа и слева отступа. В совокупности это равно 48 пикселям.
    • Итак, вводим ширину метки (63 пикселя) + общий отступ (48 пикселов).
  9. Выберите этикетку и контейнер и отцентрируйте их с помощью инструментов выравнивания.
Учебник по фигме Нажмите, чтобы увидеть полноразмерное изображение.
Задача 1: Шаги 6-9

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

Требуются штатные внештатные дизайнеры пользовательского интерфейса из США

Задача 2: сделать кнопку интерактивной

Чтобы сделать кнопку интерактивной, мы добавим кольцо фокусировки.

  1. Дублируйте контейнер кнопок и переименуйте его в Button Focus Ring .
  2. Убедитесь, что кольцо фокусировки находится под контейнером кнопок на панели слоев.
  3. Удалите заливку кольца фокусировки и добавьте черную внутреннюю обводку толщиной 4 пикселя.
  4. Нам также нужен зазор в 4 пикселя между контейнером кнопки и кольцом фокусировки со всех четырех сторон, поэтому мы добавим +16 к его ширине и высоте.
  5. Выберите и выровняйте по центру метку, контейнер кнопки и кольцо фокусировки.

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

    Библиотека компонентов Figma Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 2: Шаги 1-5
  6. Выберите все три элемента (ярлык, контейнер кнопок, кольцо фокусировки), щелкните правой кнопкой мыши и выберите «Создать компонент».
    7. компоненты фигмы Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 2: Шаг 6
  7. Переименуйте компонент Button/Primitive/Default .
    • Кнопка = Тип компонента
    • Примитив = вариация
    • По умолчанию = Состояние

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

Приложение Фигма Нажмите, чтобы увидеть полноразмерное изображение.
Задача 2: Шаг 7

Задача 3. Создайте сетку расположения кнопок

  1. Выберите Button/Primitive/Default , перейдите на панель дизайна и щелкните значок «+» рядом с «Layout Grid».
    2. Фигма архетип Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 3: Шаг 1
  2. Затем щелкните значок сетки, выберите «Столбцы» и введите следующие значения:
    • Количество столбцов = 1
    • Ширина = Авто
    • Желоб = 0
    • Тип = Растянуть
  3. «Маржа» обеспечивает отступ внутри контейнера кнопки.
    • Помните, нам нужно отступы по 24 пикселя слева и справа.
    • Нам также необходимо учитывать границу толщиной 4 пикселя и зазор в 4 пикселя нашего кольца фокусировки.
    • Это означает, что нам понадобится поле в 32 пикселя.
    4. Состояния компонента Figma Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 3: Шаги 2-3
  4. С добавленным полем вы заметите красную область индикатора, которая показывает внутреннее заполнение контейнера кнопки и точно соответствует ширине метки.
    5. Фигма дизайн Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 3: Шаг 4

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

  5. Выберите все три слоя внутри компонента, перейдите в «Ограничения» и закрепите их на «Слева и справа» и «По центру».
  6. На этом этапе вы можете выбрать компонент и перетащить его на любую желаемую ширину. Вы увидите, что макет работает именно так, как он был разработан.
  7. Если вы сделаете ширину кнопки меньше, чем метка, вы заметите, что метка переходит на другую строку.
Инструмент для дизайна Фигма Нажмите, чтобы увидеть полноразмерное изображение.
Задача 3: Шаги 5-7

Задача 4: настроить ширину кнопки для длины текста

Давайте посмотрим, как наша кнопка работает с более длинной меткой.

  1. Перейдите на панель ресурсов, перетащите новый экземпляр кнопки и введите «Запланировать встречу» или что-то более длинное. Что просходит? Метка переносится на следующую строку — не совсем то, что нам нужно.
    2. Дизайн интерфейса Figma Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 4: Шаг 1
  2. Вернитесь на панель слоев, выберите новый компонент, который вы только что перетащили, и используйте клавиши со стрелками, чтобы отрегулировать ширину до точного размера, который соответствует метке.
  3. Когда вы сделаете это, вы увидите, что все переменные макета остаются такими, как предполагалось: внутреннее заполнение, размещение меток, 4-пиксельная обводка и 4-пиксельный зазор кольца фокусировки. (Удалите эту кнопку-дубликат перед переходом к Задаче 5.)

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

Фигма прототип Нажмите, чтобы увидеть полноразмерное изображение.
Задача 4: Шаги 2-3

Задача 5: создание состояний наведения и фокуса

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

  1. Отключите кольцо фокусировки в кнопке по умолчанию.
  2. Удерживая клавишу Alt, перетащите новый экземпляр кнопки по умолчанию.
  3. Сделайте контейнер кнопки светло-серым цветом (#E7E7E7).
  4. Щелкните правой кнопкой мыши «Создать компонент» и переименуйте Button/Primitive/Hover .
    5. Инструменты веб-дизайна Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 5: Шаги 1-4
  5. Перетащите другой экземпляр состояния по умолчанию, включите кольцо фокусировки и сопоставьте цвет контейнера кнопки с цветом контейнера состояния наведения (#E7E7E7).
  6. Щелкните правой кнопкой мыши «Создать компонент» и переименуйте Button/Primitive/Focus .

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

Дизайн пользовательского интерфейса Figma Нажмите, чтобы увидеть полноразмерное изображение.
Задача 5: Шаги 5-6

Задача 6: реализовать темы кнопок

Теперь мы создадим стилистические вариации.

  1. Удерживая клавишу Alt, перетащите другой экземпляр Button/Primitive/Default .
  2. Измените цвет контейнера, чтобы он соответствовал желаемому цвету темы (#204ECF).
  3. Сделайте метку кнопки белой (#FFFFFF), включите кольцо фокусировки, измените обводку на нужный цвет темы (#204ECF) и выключите.
  4. Щелкните правой кнопкой мыши «Создать компонент» и переименуйте Button/BrightBlue/Default .
    5. Фигма UX Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 6: Шаги 1-4
  5. Перетащите два экземпляра этой новой кнопки по умолчанию: один для состояния наведения и один для состояния фокуса.
  6. Измените цвет контейнера кнопки, чтобы он соответствовал желаемому цвету темы (#678FFF), щелкните правой кнопкой мыши «Создать компонент» и переименуйте Button/BrightBlue/Hover .
  7. Примените тот же цвет к контейнеру кнопки фокусировки, включите кольцо фокусировки, щелкните правой кнопкой мыши, «Создать компонент» и переименуйте Button/BrightBlue/Focus .

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

Фигма веб-дизайн Нажмите, чтобы увидеть полноразмерное изображение.
Задача 6: Шаги 5-7

Задача 7: Созерцайте красоту компонентов Figma

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

  1. Выберите свой Button/Primitive/Default , добавьте угловой радиус, и вы увидите, что все экземпляры вашей кнопки обновляются автоматически.
    2. Инструмент макета Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 7: Шаг 1
  2. Затем перейдите на панель компонентов. Все экземпляры вашей кнопки можно перетащить в любую часть вашего дизайна.
    3. Онлайн-инструмент для дизайна Нажмите, чтобы увидеть полноразмерное изображение.
    Задача 7: Шаги 2
  3. Кроме того, поскольку мы использовали это соглашение об именах, теперь мы можем заменить любую кнопку на альтернативный экземпляр/тему. Чтобы увидеть это в действии, перетащите один экземпляр кнопки, затем перейдите в «Экземпляр» на панели дизайна, выберите любой нужный вам экземпляр, и он сразу изменится.
Инструменты UX-дизайна Нажмите, чтобы увидеть полноразмерное изображение.
Задача 7: Шаг 3

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

• • •

Дальнейшее чтение в блоге Toptal Design:

  • Сила Figma как инструмента дизайна
  • Figma против Sketch против Axure — обзор на основе задач
  • Оптимизируйте совместный дизайн с Figma
  • Дизайн кнопок на протяжении многих лет — Хронология Dribbble
  • Учебное пособие по Framer: 7 простых микровзаимодействий для улучшения ваших прототипов