figma – komponenty

Components & instances

Komponent – symbol 4 małych rombów zamkniętych w kształcie rombu () – jeden główny master element na którym dokonujemy zmian.

Instancje – symbol pustego rombu () – kopie komponentu zamieszczone w projekcie, zmiana komponentu master, propaguje się na instancje.

Komponenty przechowuj zawsze w oddzielnym, wydzielonym miejscu, najlepiej zdefiniowanym do tego Page.

Tworzenie komponentu

Aby zmienić element (lub grupę elementów, jak pasek nawigacji, wpis bloga) na komponent, zaznaczamy go i z menu górnego wybieramy ikonę Create component lub używamy skrótu klawiaturowego alt+cmd+K, wtedy element przed swoja nazwą ma symbol 4 wypełnionych rombów, zamkniętych w kształcie rombu ().

Stworzony komponent ma purpurowe oznaczenie, jego nazwa w drzewie i nad elementem jest koloru purpurowego, jaki jego outline w projekcie po zaznaczeniu.

Tworzenie instancji

• kopiując komponent master i wklejając go w projekt poprzez cmd+C / cmd+V
• przy zaznaczonym komponencie master, wciśnięcie alt i przeciągnięcie jego kopi
• przeciągnięcie komponentu z sekcji Local components z zakładki Assets z lewego panelu
• poprzez wyszukanie nazwy komponentu z Resources

Stworzone instancje mają symbol pustego rombu () i mają purpurowe oznaczenie, ich nazwa w drzewie i nad elementem jest koloru purpurowego, jaki jego outline w projekcie po zaznaczeniu.

Lista stworzonych komponentów

Każdy stworzony komponent, będzie widoczny w panelu po lewej stronie, w zakładce Assets w sekcji Local components.

Nadpisywanie widoku instancji

Dobrym podejściem jest zachowanie w  komponentu w jak najbardziej neutralnym stylu, zbliżonym trochę do wireframe, czyli zamiast obrazka dajemy samo szare tło o odpowiednim wymiarze, zamiast konkretnego nagłówka wstawiamy tekst typu 'Headline, Title”.

Aby sprawdzić z jakiego komponentu pochodzi dana instancja, wystarczy ze zaznaczysz komponent, i w prawej sekcji odnajdziesz jego nazwę a koło niej powinien znaleźć się symbol wypełnionych 4 rombów, z podpisem: 'Go to main component’ i po kliknięciu przeniesie widok do głównego komponentu.

Następnie w stworzonych instancjach, klikając podwójnie w nagłówki, wprowadzasz do nich ich docelowy tekst.

Tak samo postępujemy z img, choć tu mamy parę możliwości:

• klikamy na szary prostokąt i w opcjach Fill wybieramy img,
• wklejamy skopiowany wcześniej obraz,
• importujemy grafiki z dysku poprzez skrót shift+cmd+K

Oczywiście będą również sytuacje w których już w samym komponencie zamieszczasz docelowe treści, np. button back, który zawsze, gdzie go nie zamieścisz ma mieć ten sam tekst. Aby uniemożliwić nadpisanie tych wartości, w sekcji Layers po prawej stronie, przy nazwie stworzonego komponentu kliknij ikonkę kłódki, tak by była zamknięta (), wtedy zablokujesz możliwość edytowania.

Co możemy nadpisać w instancji

• kolor
• obraz
• tekst
• style
• opacity
• efekty (cień, rozmycie)
• widoczność

Ale nie zawsze jest to uzasadnione, tak by nie wprowadzić niepotrzebnych wątpliwości w stworzonym designie, stosuje się zasadne by nadpisywać tylko te treści które beda pochodzić z bazy danych, jak obrazki i treści tekstowe.

Aby zmodyfikować kolor tła, np w elemencie po najechaniu kursorem, czyli stan hover, najlepiej jeśli użyjesz wariantów.

Są jeszcze dwie opcje przydatne przy wprowadzaniu zmian do instancji, które wybierasz z prawego panelu, przy nazwie instancji klikamy symbol 3 kropek ()

• kiedy zmiany nie zostały zaakceptowane i chcemy wrócić do wyglądu instancji, takiej jak komponent – opcja reset all changes – przywraca podstawowy wygląd instancji
• kiedy zmiany w instancji są na tyle dobre, ze chcemy wprowadzić je do głównego komponentu i zpropagować je na wszystkie pozostałe instancje – opcja Push changes to main component – wprowadza zmiany do głównego komponentu oraz do zamieszczonych na jego podstawie instancji