Як створити кнопку в Figma

Кнопки дизайну на Figma можна створювати різними способами, використовуючи властивості компонентів і автоматичного макета на платформі. Таким чином, кнопки можна налаштувати за допомогою міток, розмірів і значків. Якщо ви не впевнені, як створити кнопки на Figma, ви потрапили за адресою.

Ця стаття пояснює, як створювати кнопки та як максимально використати Figma.

Створення кнопки

Кнопки — це загальні елементи, які використовуються під час розробки функціонального інтерфейсу користувача. Ви можете створити кнопку в дизайні Figma. Якщо ви новачок у Figma, ви повинні спочатку осягнути основи.

Ось покрокова інструкція зі створення кнопок:

1. Створіть новий дизайн Figma.
   
2. Додайте рамку, натиснувши клавішу F на клавіатурі, а потім виберіть «робочий стіл» або «телефон».
   
3. Додайте прямокутник висотою 50 пікселів і шириною 200 пікселів за допомогою клавіші R на клавіатурі.
   
4. Додайте текст, натиснувши «T» на клавіатурі. Відцентруйте текст так, щоб він знаходився посередині текстового поля по горизонталі та вертикалі.
   
5. Розмістіть це текстове поле в середині вашого прямокутника.
   
6. Згрупуйте компоненти так, як ви хочете.

Ви можете додати кольори, створивши їх за допомогою палітри кольорів, або ви можете отримати доступ до шістнадцяткових кольорів з Інтернету.

Контраст

Колір тексту на кнопці залежить від того, який він краще контрастує з чорним чи білим фоном. Ви можете використовувати обидва варіанти, щоб побачити, який з них працює найкраще. Якщо вам не подобається жоден із варіантів, ви можете змінити стиль і колір кнопки.

Створення основних кнопок

Є три основні кнопки, які можна створити на Figma.

Основна кнопка

Основні кнопки суцільного кольору з чорним або білим текстом. Ця кнопка приваблює користувачів, коли вони використовують програму. Ось як ви можете створити його:

1. Виберіть колір для своєї кнопки.
2. Виберіть прямокутник, потім застосуйте вибраний колір.
   
3. Забарвлення тексту в білий або чорний колір, залежно від кращого контрасту.
   

Додаткова кнопка

Зазвичай це біла кнопка, але обведена вибраним кольором. Такого ж кольору може бути і текст кнопки. Це друга найважливіша кнопка, яку ви можете створити. Це також має привертати увагу користувача.

1. Змініть колір вашого прямокутника на білий (#FFFFFF).
   
2. У прямокутник додайте обведення. Ви можете обрати колір, який вам до вподоби.
   
3. Змініть колір тексту, щоб він мав той самий колір, що й текст.
   

Третинна кнопка

Третинні кнопки не такі важливі, як перші дві. Вони можуть функціонувати як кнопки посилання, скасування підписки або повернення. Вони часто є звичайним текстом і можуть бути підкреслені в деяких випадках.

1. Зробіть ваш прямокутник білим без обведення.
   
2. Змініть колір тексту на той, який вам подобається.
   

Ви можете створити третинну кнопку, яка нагадуватиме основну або допоміжну кнопку. Ви також можете змінити ширину штриха, щоб отримати кращу видимість.

Створіть кнопку за допомогою тексту, автоматичного макета та кольору

Завдяки інструментам на платформі ви можете отримати практичний досвід використання інструментів Auto Layout і Text Tool. Завдяки покроковим інструкціям створити кнопку має бути відносно просто. Щоб створити кнопку, вам потрібно створити текстовий шар, перетворити текстовий шар на рамку автоматичного макета та оформити кнопку.

Створення текстового шару

На цьому етапі використовується текстовий інструмент.

1. Торкніться текстового інструмента на панелі інструментів або натисніть літеру «T».
   
2. Коли інструмент «Текст» активний, торкніться свого полотна та введіть слово «Кнопка». Зауважте, що назва текстового шару відповідатиме будь-якому введеному на полотні, якщо воно не змінено вручну на панелі шарів.
   
3. Якщо назву шару потрібно змінити, двічі клацніть ліву бічну панель, а потім введіть нову назву, яку ви вибрали.
   

Тепер ви також можете пограти з розміром шрифту, збільшуючи або зменшуючи його.

1. Виберіть текстовий шар.
   
2. Перейдіть до правої бічної панелі та змініть розмір шрифту в розділі «Текст». Ви також можете змінити шрифт або залишитися параметром за замовчуванням.
   

Перетворіть свій текстовий шар на рамки автоматичного макету

На цьому етапі кнопку потрібно ще більше налаштувати, щоб вона виглядала гламурно. Завдяки автоматичному компонуванню ви можете додати ще більше пікантності. Автоматичне компонування є потужною функцією Figma, і її можна застосувати для адаптивних дизайнів. Ці конструкції автоматично адаптуються до таких змін, як розмір вмісту, розміщення об’єктів і тип пристрою.

Автоматичний макет можна застосувати для перетворення шарів на рамки або на існуючі рамки. Щоб застосувати макет до наявного кадру, виберіть свій текстовий шар, а потім натисніть комбінацію клавіш «Shift» «A». Після застосування макета ви помітите деякі зміни.

• Текстовий шар буде в рамці. Автоматичний макет застосовується лише до компонентів і фреймів, тому Figma автоматично розміщує текстовий шар у новому фреймі. Рамка не має кольору заливки. Це застосовується на кроці стилізації кнопки.
• Під час вибору кадру налаштування автоматичного макета відображаються на правій бічній панелі. Автоматичні макети можна налаштувати далі.
• Ви помічаєте, що рамка зменшується та збільшується зі змінами тексту. Завдяки таким динамічним елементам ви заощаджуєте час на розробку контенту, який переглядається на різних пристроях або перекладається на інші мови.

Стилізація кнопки

Ви можете почати з додавання кольору.

1. Виберіть шар рамки, а потім виберіть «Налаштування заливки» на правій бічній панелі. Це
   автоматично заповнює колір . Пакет кольорів змінює колір.
   
2. Виберіть текстовий шар і налаштуйте заливку на #FFFFFF.
   
3. Знову виберіть рамку, а потім скористайтеся параметром правої бічної панелі, щоб налаштувати радіус кута.
   

Далі потрібно закріпити оббивку рами. Після того, як текст листа буде перетворено на макет автоматичної рамки, між текстом і межею рамки автоматично додається відступ. Відступ у цій точці виглядає рівним з усіх боків. Ви можете змінити нижнє та верхнє відступи, щоб вони були меншими, ніж праві та ліві відступи.

Ви можете оновити відступи як завгодно. Ліворуч і справа або верхню і нижню відступи можна змінити одночасно за допомогою наведених нижче комбінацій клавіш:

• Утримуйте <⌥ option=""> або , а потім клацніть область відступу, щоб ввести значення відступу для протилежних сторін
• Утримуйте <⌥ option=""> або під час перетягування маркерів, щоб змінити відступ для протилежних сторін

На даний момент кнопка виглядає добре, але ви все ще можете оновити мітку. Вам потрібно двічі клацнути текст, щоб дозволити редагування. Введіть слова «Зареєструватися». Розмір кнопки змінюється під час введення. Ось як ви створюєте кнопку за допомогою інструмента автоматичного макета та тексту. Тепер ви можете спробувати щось нове, наприклад перетворити кнопку на компонент або додати варіант.

Створення клікабельної кнопки

Figma використовується такими компаніями, як Uber, Facebook, Google і Netflix. Функція натискання кнопок полегшує дизайнерам у таких компаніях створення інтерактивних і натискаючих кнопок. Кнопки значно полегшують навігацію на таких платформах.

Ось як розробити такі кнопки у Figma:

1. У меню (праворуч) виберіть пункт «Прототип».
   
2. Натисніть значок «плюс» (+), який знаходиться під вкладкою «Прототип». Це дозволяє додати взаємодію.
   
3. Виберіть «Після натискання» у вікні деталей взаємодії.
   
4. Виберіть опцію «Відкрити посилання».
   
5. Додайте посилання на сторінку, куди спрямовуватиме кнопка після натискання.
   
6. Торкніться піктограми «X», щоб вийти з вікна деталей взаємодії.
   
7. Перейдіть до кнопки «Відтворити» у верхньому правому куті.
   
8. Натисніть кнопку «Відтворити», щоб отримати попередній перегляд дизайну.
   

Якщо навести курсор на кнопку, вона зміниться на піктограму, схожу на руку. Це означає, що кнопка тепер доступна для натискання.

Примітка. Створюючи кнопку Figma, яку можна натиснути, завжди використовуйте «Після натискання», а не «Після перетягування». «Після натискання» дозволяє додати посилання, яке можна натиснути, до кнопки. Кнопки «перетягування» не можна натискати.

Кращий дизайн із кнопками Figma

Кнопки Figma мають такі змінні, як тема, стан, внутрішнє доповнення, довжина, ширина та висота таблиці. Навчившись створювати кнопки на платформі, ви зможете максимально використати Figma та додати цінні компоненти в бібліотеку Figma.

Ви пробували створювати кнопки на Figma? Якщо так, то яким був ваш досвід? Повідомте нам у розділі коментарів нижче.