Как да създадете бутон във Figma

Бутоните за дизайн на Figma могат да бъдат създадени по различни начини чрез използване на компоненти и свойства за автоматично оформление на платформата. Като такива, бутоните могат да бъдат персонализирани с помощта на етикети, размери и икони. Ако не сте сигурни как да създавате бутони на Figma, попаднали сте на правилното място.

Тази статия ще обясни как да създавате бутони и как да извлечете максимума от Figma.

Създаване на бутон

Бутоните са общи елементи, използвани при проектирането на функционален потребителски интерфейс. Можете да създадете бутон в дизайн на Figma. Ако не сте запознати с Figma, първо трябва да разберете основите.

Ето ръководство стъпка по стъпка за създаване на бутони:

1. Създайте нов дизайн на Figma.
   
2. Добавете рамка, като натиснете клавиша F на клавиатурата, след което изберете „десктоп“ или „телефон“.
   
3. Добавете правоъгълник с размери на височина 50px и ширина 200px, като използвате клавиша 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? Ако е така, какъв беше вашият опит? Уведомете ни в секцията за коментари по-долу.