W ciągu ostatnich kilku lat Figma szybko zyskała na popularności i nic dziwnego. Bezpłatne oprogramowanie w chmurze jest łatwo dostępne na wszystkich urządzeniach i nie wymaga żadnych rat ani pobierania. Od projektowania interfejsów aplikacji mobilnych po tworzenie postów w mediach społecznościowych, dzięki Figma możesz eksperymentować z różnymi funkcjami projektowania graficznego i poszerzać swoje umiejętności.
Aby uzyskać jeszcze większą spójność w swoich projektach, możesz rozważyć użycie komponentów w swojej pracy. Komponenty to elementy interfejsu użytkownika (UI), które mogą być używane w wielu plikach na Figma. Mogą one często stanowić mocny dodatek do Twoich projektów i poprawiać ich ogólną jakość.
Niezależnie od tego, czy jesteś nowy w Figma, czy używasz go od jakiegoś czasu i nie masz pewności, jak skutecznie używać komponentów, jesteśmy tutaj, aby Ci pomóc.
W tym artykule dowiemy się, jak korzystać z komponentów Figma i jak może to pomóc w usprawnieniu pracy.
Jeśli chcesz dowiedzieć się więcej, czytaj dalej.
Jak korzystać z komponentów w Figma
Opanowanie korzystania z komponentów może pomóc w organizacji i spójności podczas obsługi Figma. Te elementy interfejsu użytkownika mogą być używane wielokrotnie w różnych projektach, nad którymi możesz pracować. Komponent można utworzyć w postaci ikony, przycisku i innych elementów, w zależności od projektu.
Wspaniałą rzeczą we wprowadzaniu komponentów do doświadczenia Figma jest to, że oszczędza to dużo czasu. Wszelkie zmiany, które możesz wprowadzić w jednym komponencie, są automatycznie aktualizowane w innych. Może to być szczególnie przydatne, jeśli masz napięte ramy czasowe lub współpracujesz z innymi projektantami i chcesz przyspieszyć przepływ pracy.
Zaczynając, zauważysz, że po każdej stronie głównego płótna znajdują się dwa paski boczne. Możesz użyć narzędzi z dowolnego z tych pasków bocznych, aby wprowadzić zmiany w swoim projekcie.
Pasek boczny po prawej stronie zapewnia dostęp do dowolnych ustawień prototypu i umożliwia dostosowanie lub edycję dowolnych właściwości komponentów. Jednak pasek boczny po lewej stronie przedstawia warstwy, zasoby i strony używane w projekcie. Nazywa się to panelem warstw.
Komponenty należy wprowadzać do swojej pracy dość wcześnie. Pomagają zachować spójność projektów i pozwalają przyspieszyć tempo wprowadzania zmian w projektach. Składnik składa się z dwóch kluczowych elementów:
- Komponent główny (lub główny) (ikona poczwórnego diamentu)
- Komponent instancji (ikona pojedynczego diamentu)
Komponenty główne
Przede wszystkim musisz najpierw stworzyć Komponent Główny. Aby to zrobić, wykonaj poniższe czynności:
- Kliknij prawym przyciskiem myszy warstwę, grupę lub ramkę.
- Wybierz opcję Utwórz komponent.
- Po lewej stronie ekranu zobaczysz menu rozwijane z napisem Komponent. Kliknij na to.
- Z tego miejsca zobaczysz menu, w którym możesz wprowadzać zmiany w swoim komponencie i przeprojektowywać style w różnych projektach.
Innym sposobem tworzenia Komponentu Głównego jest użycie skrótów:
- Opcje + Command + K dla komputerów Mac
- Ctrl + Alt + K dla Windows
Oczywiście ta metoda działa tylko wtedy, gdy używasz Figma na komputerze PC.
Natychmiastowe składniki
Komponent błyskawiczny to kopia komponentu głównego. Kiedy Komponent Główny jest edytowany w jakikolwiek sposób, Instancja jest automatycznie aktualizowana, aby pasowała do wprowadzonych zmian. Jeśli budujesz stronę internetową, to narzędzie może być szczególnie przydatne i zaoszczędzić dużo czasu. Na przykład minęłyby czasy ręcznego wchodzenia do wszystkich komponentów w celu powtórzenia tych samych edycji. Zamiast tego Figma zmienia je wszystkie za Ciebie.
Może nadejść moment, w którym utworzyłeś wiele instancji i chciałbyś wrócić do swojego głównego komponentu, aby dokonać szybkiej zmiany we wszystkich swoich komponentach. Aby uzyskać dostęp do składnika głównego, wykonaj następujące czynności:
- Kliknij prawym przyciskiem myszy dowolne wystąpienie.
- Kliknij Przejdź do głównego komponentu.
- Komponent główny pojawi się na pasku bocznym po lewej stronie.
Chociaż tworzenie elementów pojedynczo jest stosunkowo proste; możesz przyspieszyć działanie, robiąc je zbiorczo. Aby to zrobić, wykonaj następujące kroki:
aktualizacje są wyłączone przez administratora chrome
- W panelu warstw wybierz warstwy, w których chcesz utworzyć komponenty.
- Kliknij ikonę strzałki skierowaną w dół znajdującą się obok ikony Komponent główny w panelu Warstwy.
- Z dostępnych opcji wybierz opcję Utwórz wiele komponentów.
- Stamtąd Figma utworzy komponent dla każdej warstwy ramki.
Dodatkowe często zadawane pytania
Jak zastąpić lub odłączyć instancję?
Może się zdarzyć, że zechcesz wprowadzić zmiany we właściwościach konkretnej instancji bez zmiany wszystkich pozostałych. Możesz tworzyć wariacje różnych komponentów. W Figmie określa się to jako nadpisywanie.
Gdy nadpiszesz instancję, wszelkie zmiany dokonane w głównym komponencie nie będą miały na nią wpływu. Aby to zrobić, zapoznaj się z poniższymi krokami:
1. Kliknij na swój składnik instancji.
2. Z panelu Właściwości po prawej stronie ekranu wybierz Komponent.
3. Z rozwijanego menu, które się pojawi, wybierz Odłącz instancję.
Jeśli chcesz usunąć zastąpienie, wybierz komponent, a następnie wybierz Resetuj instancję z górnego środkowego paska na ekranie.
Co mam zrobić, jeśli przypadkowo usunę mój główny komponent?
Kiedy spędzasz cały dzień na edytowaniu treści, czasami możesz przypadkowo pomylić się i usunąć coś ważnego, na przykład komponent główny. Nie obawiaj się, ponieważ przywrócenie go jest tak proste, jak 1-2-3. Wystarczy wykonać te podstawowe kroki, aby odzyskać brakujący składnik główny:
1. Przejdź do jednej z instancji komponentu.
2. W panelu Właściwości po prawej stronie ekranu wybierz Przywróć składnik główny.
3. Komponent główny pojawi się natychmiast.
Jak dodać opis do moich komponentów?
Podczas tworzenia komponentów dodanie opisu i łącza do dokumentacji do każdego z nich może pomóc w lepszym poruszaniu się po projekcie. Jest to również przydatne dla wszystkich współpracowników, z którymi możesz pracować, aby mieć dostęp do dodatkowych notatek. Aby dodać opis, przejdź do panelu Właściwości po prawej stronie strony i wybierz Dodaj opis.
Gdy to zrobisz, wszyscy widzowie z zewnątrz mogą uzyskać dostęp do tych informacji, przechodząc do panelu kontrolnego na prawym pasku bocznym.
Jak zaimportować komponenty do Figma?
Możesz importować wszystkie rodzaje plików do komponentu Figma. Najłatwiej to zrobić z pulpitu. Po prostu wykonaj następujące kroki:
1. W Figma otwórz stronę, do której chcesz zaimportować plik.
2. Z plików wybierz konkretny plik, którego chcesz użyć.
3. Przeciągnij i upuść wybrany plik na swoją stronę Figma.
4. Po zakończeniu kliknij Gotowe.
Droga do sukcesu
Figma to świetne narzędzie do użycia, niezależnie od tego, czy dopiero zaczynasz projektować, czy jesteś w grze od lat. Oprogramowanie oferuje przyjazny dla początkujących system edycji, w którym projektanci mogą tworzyć treści od podstaw lub w razie potrzeby korzystać z szablonu.
Zrozumienie, jak skutecznie używać komponentów w Figma, może zaoszczędzić dużo czasu podczas prowadzenia projektu. Ucząc się, jak stworzyć wysokiej jakości system komponentów, będziesz mógł rozwijać się jako projektant. Nie tylko to, ale może również pomóc w utrzymaniu spójnego przepływu pracy podczas całej podróży twórczej i umożliwić przyszłym współpracownikom łatwe znalezienie Twojej pracy.
Czy próbowałeś używać Figmy do swoich kreatywnych projektów? Jak znalazłeś używanie komponentów? Daj nam znać więcej o swoim doświadczeniu w sekcji komentarzy poniżej.
