Jak dodawać ikony w Figma

Dowiedz się, jak dodawać ikony w Figma za pomocą wtyczek, przesyłania plików SVG i bibliotek projektowych. Instrukcja krok po kroku, aby ulepszać projekty interfejsu dzięki ikonom niestandardowym i gotowym.

Twórz efektowne wideo produktowe i dokumentację z AI

Ten samouczek został utworzony z Trupeer w mniej niż 5 minut

Twórz za darmo

Korzystanie z wtyczek ikon:

Zainstaluj wtyczkę: Przejdź w menu Figma do "Plugins",
wybierz "Browse all plugins...", a następnie wyszukaj wybraną wtyczkę z ikonami (np. Iconify, Material Design Icons, Font Awesome).
Zainstaluj wtyczkę: Kliknij "Install", aby dodać ją do pliku Figma.
Przeglądaj i dodaj: Uruchom wtyczkę (kliknij prawym przyciskiem -> Plugins -> [Plugin Name]), przeglądaj bibliotekę ikon i albo kliknij, aby zaimportować, albo przeciągnij i upuść icon na swój obszar roboczy.
Dostosuj: Tak jak w przypadku zaimportowanych plików SVG, możesz w razie potrzeby dostosować ikony w ramach wtyczki.
Przykład: Korzystanie z Material Design Icons: Otwórz wtyczkę Material Design Icons, wyszukaj ikonę (np. "home") i kliknij, aby dodać ją do projektu.

Instrukcja krok po kroku: Jak dodawać ikony w Figma

Krok 1

Wybierz opcję "Actions".

Krok 2

W konsoli wyszukiwania wpisz "Iconify", aby znaleźć potrzebną wtyczkę.

In the search console, enter "Iconify" to find the necessary plugin.

Krok 3

Gdy pojawią się wyniki wyszukiwania, kliknij opcję "Iconify".

After the search results appear, click on the "Iconify" option.

Krok 4

Następnie wybierz ikonę,

Krok 5

Kliknij opcję "Import as a component".

Click the "Import as a component" option.

Krok 6

Teraz zobaczysz ikonę dodaną do swojej ramki. Dostosuj ikonę w razie potrzeby, aby spełniała wymagania projektu.

You will now see the icon added to your frame. Adjust the icon as necessary to meet your project specifications.

Pro tipy dotyczące dodawania ikon w Figma

Używaj wbudowanych wtyczek ikon
Figma ma kilka darmowych wtyczek, takich jak „Iconify”, „Feather Icons” i „Material Design Icons”. Aby z nich skorzystać, przejdź do górnego menu, kliknij „Resources”, wybierz zakładkę „Plugins” i wyszukaj wybraną wtyczkę z ikonami. Po zainstalowaniu możesz przeciągać i upuszczać ikony bezpośrednio do swojego projektu.
Kopiuj ikony z zewnętrznych bibliotek
Możesz odwiedzić darmowe biblioteki ikon, takie jak Font Awesome lub Google Material Icons, a następnie skopiować wersje SVG ikon i wkleić je do pliku Figma. Jest to przydatne, gdy potrzebujesz ikon dopasowanych do marki lub powszechnie rozpoznawalnych.
Importuj pliki SVG
Jeśli masz zapisane ikony jako pliki SVG na swoim komputerze, możesz je zaimportować do Figma, po prostu przeciągając je na obszar roboczy. Figma zachowa jakość wektorową i umożliwi łatwe skalowanie oraz dostosowanie kolorów.
Używaj komponentów dla spójności
Konwertuj często używane ikony na komponenty. Dzięki temu, jeśli kiedykolwiek będziesz musiał zaktualizować jedną z nich, automatycznie zaktualizują się wszystkie wystąpienia w Twoim projekcie.
Porządkuj ikony w bibliotece
Utwórz wspólną bibliotekę komponentów ikon dla swojego zespołu. To zwiększa spójność i oszczędza czas, ponieważ często używane ikony są dostępne z jednego, centralnego miejsca.

Najczęstsze pułapki i jak ich uniknąć

Nie konwertuj do konturów
Niektóre ikony wklejone z zewnętrznych źródeł mogą nie być edytowalne. Kliknij prawym przyciskiem ikonę i wybierz „Outline Stroke” lub „Flatten”, aby przekonwertować je na edytowalne kształty.
Używanie zbyt wielu stylów
Unikaj mieszania różnych stylów ikon (np. wypełnionych, konturowych, duotone) w jednym projekcie. Trzymaj się jednego stylu w całym układzie, aby zachować spójny wygląd.
Importowanie obrazów niskiej jakości
Zawsze używaj formatów SVG lub wektorowych zamiast PNG lub JPG, aby zachować czytelność w każdym rozmiarze.
Skalowanie bez przytrzymania Shift
Podczas zmiany rozmiaru ikon przytrzymaj Shift, aby zachować proporcje i uniknąć zniekształceń.
Zapominanie o nazwach warstw
Zawsze nazywaj warstwy lub komponenty ikon jasno. Ułatwia to organizację i sprawia, że wyszukiwanie jest łatwiejsze, zwłaszcza w większych plikach projektowych.

Najczęstsze pytania dotyczące dodawania ikon w Figma

Czy mogę dostosować kolor ikon w Figma?
Tak, jeśli ikona jest wektorem (SVG), możesz łatwo zmienić jej kolor wypełnienia i obrysu w panelu właściwości po prawej stronie.
Czy wtyczki są płatne?
Większość wtyczek z ikonami, takich jak Iconify, jest darmowa. Niektóre zaawansowane wtyczki mogą mieć płatne funkcje, ale podstawowe biblioteki ikon zwykle są dostępne bez opłat.
Czy mogę używać własnych niestandardowych ikon?
Tak, możesz zaimportować własne projekty ikon do Figma, przesyłając je lub przeciągając do swojego pliku.
Jak utrzymać spójność ikon w całym projekcie?
Używaj komponentów i stylów. Utwórz system projektowy, w którym wszystkie ikony są oparte na tych samych zasadach dotyczących rozmiaru, grubości i koloru.
Czy mogę animować ikony w Figma?
Możesz zastosować podstawowe przejścia za pomocą funkcji prototypowania w Figma, ale w przypadku bardziej zaawansowanych animacji możesz potrzebować narzędzi takich jak Figmotion lub wyeksportować ikony do użycia w zewnętrznych aplikacjach.
Jak nagrać ekran na mac?
Aby nagrywać ekran na komputerze Mac, możesz użyć Trupeer AI. Umożliwia przechwycenie całego ekranu i oferuje funkcje AI, takie jak dodawanie awatarów AI, dodawanie lektora, dodawanie przybliżenia i oddalenia w filmie. Dzięki funkcji tłumaczenia wideo z użyciem AI w trupeer możesz przetłumaczyć wideo na 30+ języków.
Jak dodać awatara AI do nagrania ekranu?
Aby dodać awatara AI do nagrania ekranu, musisz użyć narzędzia do nagrywania ekranu z AI. Trupeer AI to narzędzie do nagrywania ekranu z użyciem AI, które pomaga tworzyć filmy z wieloma awatarami oraz ułatwia stworzenie własnego awatara do wideo.
Jak nagrać ekran na windows?
Aby nagrywać ekran w systemie Windows, możesz użyć wbudowanego paska gier (Windows + G) lub zaawansowanego narzędzia AI, takiego jak Trupeer AI, aby uzyskać bardziej zaawansowane funkcje, takie jak awatary AI, lektor, tłumaczenie itd.
Jak dodać lektora do wideo?
Aby dodać lektora do filmów, pobierz rozszerzenie trupeer ai do Chrome. Po rejestracji prześlij wideo z dźwiękiem, wybierz wybrany lektor w trupeer i wyeksportuj edytowane wideo.
Jak powiększyć obraz podczas nagrywania ekranu?
Aby przybliżyć obraz podczas nagrywania ekranu, użyj efektów zoom w Trupeer AI, które pozwalają przybliżać i oddalać w określonych momentach, zwiększając wizualny efekt Twoich treści wideo.