Jak utworzyć przycisk w Figma

2023/08/17

Przyciski projektowe na Figma można tworzyć na różne sposoby, wykorzystując właściwości komponentów i automatycznego układu na platformie. W związku z tym przyciski można dostosowywać za pomocą etykiet, rozmiarów i ikon. Jeśli nie jesteś pewien, jak tworzyć przyciski na Figma, dobrze trafiłeś.

W tym artykule wyjaśnimy, jak tworzyć przyciski i jak najlepiej wykorzystać Figma.

Tworzenie przycisku

Przyciski są powszechnymi elementami używanymi podczas projektowania funkcjonalnego interfejsu użytkownika. Możesz stworzyć guzik w projekcie Figma. Jeśli jesteś nowy w Figma, musisz najpierw zrozumieć podstawy.

Oto przewodnik krok po kroku dotyczący tworzenia przycisków:

Stwórz nowy projekt Figmy.
Dodaj ramkę, naciskając klawisz F na klawiaturze, a następnie wybierz „komputer” lub „telefon”.
Dodaj prostokąt o wymiarach 50px wysokości i 200px szerokości za pomocą klawisza R na klawiaturze.
Dodaj tekst, naciskając „T” na klawiaturze. Wyśrodkuj tekst tak, aby znajdował się na środku pola tekstowego w poziomie iw pionie.
Umieść to pole tekstowe na środku prostokąta.
Grupuj komponenty tak, jak chcesz.

Możesz dodawać kolory, tworząc niektóre za pomocą próbnika kolorów, lub możesz uzyskać dostęp do kolorów szesnastkowych z Internetu.

Kontrast

Kolor tekstu w przycisku zależy od tego, czy lepiej kontrastuje z czarnym czy białym tłem. Możesz użyć obu opcji, aby zobaczyć, która działa najlepiej. Jeśli nie podoba Ci się żadna z opcji, możesz dostosować styl i kolor przycisku.

Tworzenie podstawowych przycisków

Istnieją trzy podstawowe przyciski, które można utworzyć na Figma.

Przycisk główny

Przyciski podstawowe to jednolite kolory z czarnym lub białym tekstem. Ten przycisk przyciąga użytkowników podczas korzystania z aplikacji. W ten sposób możesz go utworzyć:

Wybierz kolor dla swojego przycisku.
Wybierz prostokąt, a następnie zastosuj wybrany kolor.
Kolor tekstu w kolorze białym lub czarnym, w zależności od lepszego kontrastu.

Przycisk pomocniczy

Zwykle jest to biały przycisk, ale obrysowany wybranym kolorem. Tekst przycisku może również mieć ten sam kolor. To drugi najważniejszy przycisk, jaki możesz utworzyć. Powinien również przyciągać wzrok użytkownika.

Zmień kolor prostokąta na biały (#FFFFFF).
W prostokącie dodaj obrys. Tutaj możesz wybrać preferowany kolor.
Zmień kolor tekstu, aby miał ten sam kolor co tekst.

Przycisk trzeciorzędny

Przyciski trzeciorzędne nie są tak ważne jak dwa pierwsze. Mogą pełnić funkcję przycisku linku, anulowania subskrypcji lub powrotu. Często są napisane zwykłym tekstem iw niektórych przypadkach mogą być podkreślone.

Spraw, aby twój prostokąt był biały bez obrysu.
Zmień kolor tekstu na preferowany.

Możesz utworzyć przycisk trzeciorzędny, który przypomina przycisk główny lub dodatkowy. Możesz także zmienić szerokość obrysu, aby uzyskać lepszą widoczność.

Utwórz przycisk za pomocą tekstu, automatycznego układu i koloru

Dzięki narzędziom na platformie możesz zdobyć praktyczne doświadczenie w korzystaniu z automatycznego układu i narzędzia tekstowego. Dzięki wskazówkom krok po kroku utworzenie przycisku powinno być stosunkowo proste. Aby utworzyć przycisk, musisz utworzyć warstwę tekstową, przekonwertować warstwę tekstową na ramkę układu automatycznego i nadać styl przyciskowi.

Tworzenie warstwy tekstowej

W tym kroku używane jest narzędzie tekstowe.

Dotknięcie narzędzia tekstowego na pasku narzędzi lub naciśnięcie litery „T”.
Gdy narzędzie Tekst jest aktywne, dotknij płótna i wprowadź słowo „Przycisk”. Zwróć uwagę, że nazwa warstwy tekstowej będzie zgodna z tym, co wpisano na płótnie, chyba że zostanie ręcznie zmieniona w panelu warstw.
Jeśli nazwa warstwy wymaga zmiany, kliknij dwukrotnie lewy pasek boczny, a następnie wpisz wybraną nową nazwę.

Teraz możesz także bawić się rozmiarem czcionki, zwiększając ją lub zmniejszając.

Wybierz swoją warstwę tekstową.
Przejdź do prawego paska bocznego i zmień rozmiar czcionki w sekcji „Tekst”. Możesz także zmienić czcionkę lub pozostać przy opcji domyślnej.

Przekształć warstwę tekstową w ramki z automatycznym układem

W tym momencie przycisk należy jeszcze bardziej ulepszyć, aby wyglądał efektownie. Dzięki automatycznemu układowi możesz trochę urozmaicić. Automatyczny układ to potężna funkcja Figmy, którą można zastosować w projektach responsywnych. Te projekty automatycznie dostosowują się do zmian, takich jak rozmiar zawartości, rozmieszczenie obiektów i typ urządzenia.

Układ automatyczny można zastosować w celu przekształcenia warstw w ramki lub w istniejące ramki. Aby zastosować układ do istniejącej ramki, wybierz warstwę tekstową, a następnie naciśnij skrót „Shift” „A”. Po zastosowaniu układu zauważysz pewne zmiany.

Warstwa tekstowa będzie znajdować się w ramce. Układ automatyczny jest stosowany tylko do komponentów i ramek, więc Figma automatycznie umieszcza warstwę tekstową w nowej ramce. Ramka nie ma koloru wypełnienia. Jest to stosowane na etapie stylizacji guzików.
Podczas wybierania ramki ustawienia automatycznego układu są wyświetlane na prawym pasku bocznym. Układy automatyczne można dalej modyfikować.
Zauważysz, że ramka kurczy się i powiększa wraz ze zmianami tekstu. Dzięki takim dynamicznym elementom oszczędzasz czas poświęcony na projektowanie treści wyświetlanych na różnych urządzeniach lub tłumaczonych na inne języki.

Stylizacja przycisku

Możesz zacząć od dodania koloru.

Wybierz warstwę ramki, a następnie wybierz „Ustawienia wypełnienia” na prawym pasku bocznym. Spowoduje to automatyczne wypełnienie koloru
. Próbnik kolorów zmienia kolor.
Wybierz warstwę tekstową i dopasuj wypełnienie do #FFFFFF.
Wybierz ramkę ponownie, a następnie użyj ustawienia prawego paska bocznego, aby dostosować promień narożnika.

Następną rzeczą jest naprawa wyściółki ramy. Po przekonwertowaniu tekstu litery na układ automatycznej ramki, między tekstem a obramowaniem ramki jest automatycznie dodawane dopełnienie. Wyściółka w tym miejscu wydaje się równa ze wszystkich stron. Możesz zmienić dopełnienie dolne i górne, aby było mniejsze niż prawe i lewe dopełnienie.

Możesz aktualizować wyściółkę, jak chcesz. Lewe i prawe wypełnienie lub górne i dolne wypełnienie można zmienić w tym samym czasie za pomocą poniższych skrótów:

Przytrzymaj <⌥ Option> lub <Alt>, a następnie kliknij obszar dopełnienia, aby wprowadzić wartość dopełnienia dla przeciwległych boków
Przytrzymaj <⌥ Option> lub <Alt> podczas przeciągania uchwytów, aby zmienić dopełnienie przeciwległych boków

W tym momencie przycisk wygląda dobrze, ale nadal możesz zaktualizować etykietę. Aby zezwolić na edycję, należy dwukrotnie kliknąć tekst. Wpisz słowa „Zarejestruj się”. Rozmiar przycisku zmienia się podczas pisania. W ten sposób projektujesz przycisk za pomocą narzędzia automatycznego układu i tekstu. Możesz teraz wypróbować coś nowego, na przykład zamienić przycisk w komponent lub dodać wariant.

Tworzenie klikalnego przycisku

Figma jest używana przez firmy takie jak Uber, Facebook, Google i Netflix. Funkcja klikalnego przycisku ułatwia projektantom w takich firmach tworzenie interaktywnych i klikalnych przycisków. Przyciski znacznie ułatwiają nawigację na takich platformach.

Oto jak opracować takie przyciski w Figma:

Wybierz opcję „Prototyp” w menu (po prawej).
Kliknij ikonę „Plus” (+) znajdującą się pod zakładką Prototyp. Pozwala to dodać interakcję.
Wybierz „Po kliknięciu” w oknie szczegółów interakcji.
Wybierz opcję „Otwórz link”.
Dodaj link do strony, do której przycisk będzie kierował po kliknięciu.
Stuknij ikonę „X”, aby wyjść z okna szczegółów interakcji.
Przejdź do przycisku opcji „Odtwórz” w prawym górnym rogu.
Dotknij przycisku „Odtwórz”, aby wyświetlić podgląd projektu.

Jeśli najedziesz kursorem na przycisk, zmieni się on w ikonę przypominającą dłoń. Oznacza to, że przycisk można teraz kliknąć.

Uwaga: Tworząc klikalny przycisk Figma, zawsze używaj opcji „Po kliknięciu”, a nie „Po przeciągnięciu”. „Na kliknięcie” umożliwia dodanie klikalnego linku do przycisku. Nie można kliknąć przycisków „Po przeciągnięciu”.

Projektuj lepiej dzięki przyciskom Figma

Przyciski Figma mają zmienne, takie jak motyw, stan, wewnętrzne wypełnienie, długość, szerokość i wysokość tabeli. Ucząc się, jak tworzyć przyciski na platformie, możesz w pełni wykorzystać Figma i dodawać wartościowe komponenty w bibliotece Figma.

Czy próbowałeś tworzyć przyciski na Figma? Jeśli tak, jakie były twoje doświadczenia? Daj nam znać w sekcji komentarzy poniżej.