Przyciski projektowe na Figmie 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 wiesz jak utworzyć przyciski na Figmie, trafiłeś we właściwe miejsce.
W tym artykule wyjaśniono, jak tworzyć przyciski i jak najlepiej wykorzystać Figmę.
Tworzenie przycisku
Przyciski są częstymi elementami używanymi przy projektowaniu funkcjonalnego interfejsu użytkownika. Możesz utworzyć przycisk w projekcie Figma. Jeśli dopiero zaczynasz korzystać z Figmy, musisz najpierw poznać podstawy.
Oto przewodnik krok po kroku dotyczący tworzenia przycisków:
- Utwórz nowy projekt Figmy.
- Dodaj ramkę, naciskając klawisz F na klawiaturze, a następnie wybierz „komputer stacjonarny” 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ę pośrodku pola tekstowego w poziomie i w pionie.
- Umieść to pole tekstowe na środku prostokąta.
- Grupuj komponenty według własnego uznania.
Możesz dodawać kolory, tworząc je za pomocą próbnika kolorów, lub możesz uzyskać dostęp do kolorów szesnastkowych z Internetu.
Kontrast
Kolor tekstu na 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 z nich działa najlepiej. Jeśli nie podoba Ci się żadna z opcji, możesz dostosować styl i kolor przycisku.
Tworzenie podstawowych przycisków
Na Figmie można utworzyć trzy podstawowe przyciski.
Przycisk główny
Przyciski podstawowe mają jednolite kolory i czarny lub biały tekst. Ten przycisk przyciąga użytkowników podczas korzystania z aplikacji. Oto jak możesz go stworzyć:
- Wybierz kolor swojego przycisku.
- Wybierz prostokąt, a następnie zastosuj wybrany kolor.
- Kolorowy tekst w kolorze białym lub czarnym, w zależności od lepszego kontrastu.
Przycisk dodatkowy
Zwykle jest to biały przycisk, ale otoczony wybranym kolorem. Tekst przycisku może również mieć ten sam kolor. To drugi najważniejszy przycisk, jaki możesz utworzyć. Powinien także 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 trzeci
Przyciski trzeciorzędne nie są tak ważne jak dwa pierwsze. Mogą pełnić funkcję przycisku linku, rezygnacji z subskrypcji lub powrotu. Często są one zapisane zwykłym tekstem i w niektórych przypadkach można je podkreślić.
- Spraw, aby prostokąt stał się biały bez obrysu.
- Zmień kolor tekstu na preferowany.
Można utworzyć przycisk trzeciorzędny przypominający przycisk główny lub dodatkowy. Możesz także zmienić szerokość obrysu, aby uzyskać lepszą widoczność.
Utwórz przycisk, używając 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 szczegółowym wskazówkom utworzenie przycisku powinno być stosunkowo proste. Aby utworzyć przycisk, musisz utworzyć warstwę tekstową, przekonwertować warstwę tekstową na ramkę z automatycznym układem i nadać styl swojemu przyciskowi.
Tworzenie warstwy tekstowej
Na tym etapie 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 obszaru roboczego i wpisz słowo „Przycisk”. Pamiętaj, że nazwa warstwy tekstowej będzie zgodna z nazwą wpisaną na kanwie, chyba że zostanie ona ręcznie zmieniona w panelu warstw.
- Jeśli nazwa warstwy wymaga zmiany, kliknij dwukrotnie lewy pasek boczny, a następnie wpisz nową wybraną nazwę.
Teraz możesz także bawić się rozmiarem czcionki, zwiększając lub zmniejszając go.
- Wybierz 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.
Konwertuj warstwę tekstową na 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 jeszcze bardziej urozmaicić wszystko. Automatyczny układ to potężna funkcja Figmy, którą można zastosować w przypadku responsywnych projektów. Projekty te automatycznie dostosowują się do zmian, takich jak rozmiar zawartości, rozmieszczenie obiektów i typ urządzenia.
Układ automatyczny można zastosować do zamiany 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 przycisku.
- Po wybraniu ramki ustawienia automatycznego układu zostaną wyświetlone na prawym pasku bocznym. Układy automatyczne można jeszcze bardziej ulepszyć.
- Zauważysz, że ramka kurczy się i powiększa wraz ze zmianami tekstu. Dzięki tak dynamicznym elementom oszczędzasz czas potrzebny na projektowanie treści oglądanych 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. To wypełnia kolor
automatycznie. Próbnik kolorów zmienia kolor. - Wybierz warstwę tekstową i dostosuj wypełnienie do #FFFFFF.
- Wybierz ramkę ponownie, a następnie użyj ustawień 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 pomiędzy tekstem a krawędzią ramki automatycznie dodawane jest dopełnienie. Wypełnienie w tym miejscu wydaje się równe ze wszystkich stron. Możesz zmienić dolne i górne dopełnienie tak, aby było mniejsze niż prawe i lewe dopełnienie.
Możesz zaktualizować dopełnienie według własnego uznania. Wypełnienie lewe i prawe lub wyściółkę górną i dolną można zmienić jednocześnie za pomocą poniższych skrótów:
- Przytrzymaj lub
, a następnie kliknij obszar dopełnienia, aby wprowadzić wartość dopełnienia dla przeciwnych stron - Przytrzymaj lub
podczas przeciągania uchwytów, aby zmienić wypełnienie dla przeciwnych stron
W tym momencie przycisk wygląda dobrze, ale nadal możesz zaktualizować etykietę. Aby umożliwić edycję, należy dwukrotnie kliknąć tekst. Wpisz słowa „Zarejestruj się”. Rozmiar przycisku zmienia się w miarę pisania. Oto sposób projektowania przycisku za pomocą narzędzia automatycznego układu i tekstu. Możesz teraz spróbować czegoś nowego, na przykład zamienić przycisk w komponent lub dodać wariant.
Tworzenie klikalnego przycisku
Z Figmy korzystają takie firmy 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 tego typu platformach.
Oto jak opracować takie przyciski w Figmie:
- W menu (po prawej) wybierz opcję „Prototyp”.
- Kliknij ikonę „Plus” (+) znajdującą się pod zakładką Prototyp. Dzięki temu możesz dodać interakcję.
- Wybierz opcję „Po kliknięciu” w oknie szczegółów interakcji.
- Wybierz opcję „Otwórz link”.
- Dodaj link do strony, do której przekieruje przycisk po kliknięciu.
- Kliknij ikonę „X”, aby wyjść z okna szczegółów interakcji.
- Przejdź do przycisku opcji „Odtwórz” w prawym górnym rogu.
- Naciśnij przycisk „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: podczas tworzenia klikalnego przycisku Figma zawsze używaj opcji „Po kliknięciu”, a nie „Po przeciągnięciu”. „Po kliknięciu” umożliwia dodanie klikalnego linku do przycisku. Nie można klikać 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ć Figmę i dodać wartościowe komponenty w bibliotece Figma.