Tworzenie tabel w Figma

W tym samouczku omówimy, w jaki sposób można tworzyć tabele w Figma przy użyciu komponentów i metodologii Atomic Design. Przyjrzymy się również podstawowym elementom układu tabeli oraz sposobom dołączania komponentów do biblioteki komponentów, aby mogły stać się częścią używanego systemu projektowania.

Aby Ci to ułatwić, przygotowałem przykład makiety, który wykorzystuje wszystkie komponenty potrzebne do tego samouczka.

Aby przejść dalej, będziesz musiał przynajmniej trochę zrozumieć podstawowe koncepcje Figma, jego interfejs i jak pracować z komponentami Figma. Jeśli jednak nie masz doświadczenia z Figmą i pracujesz z danymi tabelarycznymi, polecam obejrzenie filmu „Pierwsze kroki”, który pomoże Ci lepiej zrozumieć Figma od początku do końca, a także artykułu „Jak zaprojektować złożoną tabelę internetową” który został opublikowany nie tak dawno temu w Smashing Magazine.

Aby uprościć zakres tego samouczka, załóżmy, że kolory, czcionki i efekty już istnieją jako style w projekcie Figma, który masz zamiar rozpocząć. Z punktu widzenia Atomic Design są to atomy . (Aby dowiedzieć się więcej, ludzie z littleBits napisali świetny artykuł na ten temat.)

Docelowymi odbiorcami tego samouczka są projektanci (UX, UI), którzy już przyjęli Figma do swoich przepływów pracy lub planują wypróbować Figma w swoich następnych projektach, ale nie są pewni, jak zacząć.

Więc bez zbędnych ceregieli, zajmijmy się!

Szybka uwaga : Podczas pisania tego artykułu Figma wprowadziła wtyczki. W momencie publikacji nie było dobrych do pracy z tabelami, ale wszystko może się szybko zmienić. Kto wie, może ten artykuł pomoże początkującemu programiście wtyczek Figma stworzyć naprawdę fajną wtyczkę Figma Tables, a przynajmniej mam nadzieję, że tak.

Wstęp

Wyobraź sobie stół jako organizm. Komórka tabeli jest wtedy cząsteczką, która składa się z pojedynczych atomów. W kategoriach projektowych są to właściwości komórki .

Zacznijmy więc od komórki. Posiada trzy właściwości:

1. Tło
2. Granica
3. Zawartość

Teraz przyjrzymy się bliżej każdemu z nich.

Tło

Tło będzie osobnym komponentem w Figmie. Rozmiar tak naprawdę nie ma znaczenia, ponieważ możemy rozciągnąć komponent według potrzeb, ale zacznijmy od ustawienia rozmiaru na 100×36 pikseli.

W tym komponencie dodaj prostokąt o takim samym rozmiarze jak sam komponent. Będzie to jedyny obiekt wewnątrz komponentu. Musimy dołączyć granice prostokąta do granic komponentu za pomocą więzów (ustaw ograniczenia na „Lewo i Prawo” oraz „Góra i Dół” w prawym panelu w sekcji Ograniczenia ), tak aby prostokąt automatycznie rozciągał się do rozmiaru składnik.

Jeśli chcesz zobaczyć to w akcji, obejrzyj ten samouczek na temat działania ograniczeń w Figma.

Kolor wypełnienia prostokąta określi kolor tła komórki. Wybierzmy dla niego biały kolor. Polecam wybrać ten kolor spośród stylów kolorystycznych skonfigurowanych na początku projektu.

Granica

Ten jest nieco trudniejszy niż tło. Nie możesz po prostu stworzyć jednego prostokąta za pomocą obrysu. Możemy potrzebować różnych rodzajów obramowań: jednego dla oddzielnych komórek (z obramowaniem dookoła), jednego dla całego rzędu komórek z tylko górną i dolną krawędzią lub jednego dla nagłówka tabeli, który możemy chcieć oddzielić od reszty za pomocą szersza linia. Istnieje wiele opcji.

Właściwości granicy:

• Linia graniczna (lewa, prawa, góra, dół lub brak któregokolwiek z nich)
• Szerokość linii
• Kolor linii
• Styl linii

Każda linia w obramowaniu komórki może mieć inną szerokość, kolor i styl. Na przykład, lewa może być ciągłą czerwoną linią, a górną przerywaną szarą linią.

Stwórzmy komponent o rozmiarze 100×36 pikseli (tak samo jak wcześniej). Wewnątrz komponentu musimy dodać 4 linie dla każdej granicy. Teraz zwróć uwagę na to, jak zamierzamy to zrobić.

1. Dodaj linię dla dolnej granicy o długości szerokości komponentu;
2. Ustaw jego pozycję na dolną granicę i ograniczenia, aby rozciągały się w poziomie i trzymały się dolnej granicy;
3. W przypadku górnej granicy , zduplikuj linię dolnej granicy, obróć ją o 180 stopni i przyklej do górnej części komponentu. (Nie zapomnij zmienić jego ograniczeń, aby trzymać się góry i rozciągać w poziomie.);
4. Następnie, dla lewej granicy , po prostu obróć o -90 stopni i ustaw jej położenie i ograniczenia tak, aby znajdowały się po lewej stronie, przyklejając się do lewej krawędzi i rozciągając w pionie;
5. Wreszcie, możesz utworzyć prawą ramkę , obracając ją o 90 stopni i ustawiając jej położenie i ograniczenia. Ustaw kolor obrysu i szerokość obrysu dla każdej linii odpowiednio na szary (wybierz spośród stylów kolorów) i 1 piksel.

Uwaga : możesz zadać sobie pytanie, dlaczego obróciliśmy linię dla dolnej granicy. Cóż, kiedy zmienisz szerokość obrysu linii w Figma, wzrośnie. Musieliśmy więc ustawić ten kierunek „wznoszenia” na środek komponentu. Zmiana szerokości obrysu linii (w naszym przypadku jest to rozmiar obramowania) nie wyjdzie poza komponent (komórkę).

Teraz możemy ukryć lub dostosować style osobno dla każdej granicy w komórce.

Jeśli twój projekt ma kilka stylów obramowań tabeli (kilka przykładów obramowań pokazanych poniżej), powinieneś utworzyć osobny komponent dla każdego stylu. Po prostu utwórz nowy główny komponent, tak jak robiliśmy to wcześniej, i dostosuj go tak, jak potrzebujesz.

Oddzielny komponent obrysu zaoszczędzi mnóstwo czasu i zwiększy skalowalność . Jeśli zmienisz kolor obrysu w komponencie głównym, dostosuje się cała tabela. Podobnie jak w przypadku powyższego koloru tła, każda komórka może mieć własne parametry obrysu.

Zawartość

To najbardziej złożony element ze wszystkich.

Musimy stworzyć wszystkie możliwe odmiany zawartości tabeli w projekcie: zwykły tekst, tekst z ikoną (do lewej lub prawej, różne wyrównanie), pola wyboru, przełączniki i wszelkie inne treści, które może zawierać komórka. Aby uprościć ten samouczek, sprawdź komponenty w pliku makiety. Jak tworzyć i organizować komponenty w Figma to temat na inny artykuł.

Istnieje jednak kilka wymagań dotyczących składników treści:

• Komponenty powinny łatwo rozciągać się zarówno w pionie, jak iw poziomie, aby zmieściły się w komórce;
• Minimalny rozmiar komponentu powinien być mniejszy niż domyślny rozmiar komórki (szczególnie wysokość, pamiętaj o możliwych dopełnieniach komórek);
• Unikaj marginesów, aby komponenty mogły prawidłowo wyrównać wewnątrz komórki;
• Unikaj niepotrzebnego tła, ponieważ sama komórka już je posiada.

Komponenty treści można tworzyć stopniowo: zacznij od podstawowych, takich jak komponenty tekstowe, i dodawaj nowe w miarę powiększania się projektu.

Powód, dla którego chcemy, aby zawartość znajdowała się w komponentach, jest taki sam, jak w przypadku innych elementów — oszczędza to czas pracy. Aby zmienić zawartość komórki, wystarczy przełączyć ją w komponencie.

Tworzenie Komponentu Komórkowego

Stworzyliśmy wszystkie potrzebne nam atomy: tło, granicę, treść. Czas stworzyć składnik komórki, czyli cząsteczkę zbudowaną z atomów. Zbierzmy wszystkie składniki w komórce.

Ustaw komponent tła jako dolną warstwę i rozciągnij go do całego rozmiaru komórki (ustaw ograniczenia na „Lewo i prawo” oraz „Góra i dół”).

Dodaj komponent obramowania z takimi samymi wiązaniami jak komponent tła.

Przejdźmy teraz do najbardziej skomplikowanej części — zawartości treści .

Komórka ma dopełnienia, więc musisz zrobić ramkę z zawartością komponentu. Ta ramka powinna być rozciągnięta do całego rozmiaru komórki z wyjątkiem wyściółek. Składnik treści powinien być również rozciągnięty do całego rozmiaru ramki. Sama treść musi być pozbawiona jakichkolwiek marginesów, aby wszystkie dopełnienia były ustawiane przez komórkę.

W ostatecznym rozrachunku dopełnienia komórek są jedyną właściwością w komponencie, którą ustawimy tylko raz bez możliwości późniejszej zmiany. W powyższym przykładzie zrobiłem to 4px dla wszystkich stron.

Uwaga : Jako poprawkę możesz tworzyć kolumny z pustymi komórkami (na przykład bez zawartości i szerokości 16px) z lewej i prawej strony kolumny, w której potrzebny jest dodatkowy margines. Lub, jeśli projekt Twojej tabeli na to pozwala, możesz dodać poziome dopełnienia wewnątrz komponentu komórki. Na przykład komórki w Google Material Design mają domyślnie dopełnienie 16px.

Nie zapomnij usunąć opcji „ Clip content ” dla komórki i ramki (można to zrobić w prawym panelu w sekcji Właściwości). Zawartość komórki może wyjść poza jej granice; na przykład, gdy lista rozwijana znajduje się w komórce i chcesz pokazać jej stan za pomocą wyskakującego okienka.

Uwaga : będziemy używać tego stylu komórki jako głównego. Nie martw się, jeśli Twoja tabela ma dodatkowe style — omówimy to w sekcjach Stany tabeli i Składniki, Nie zastępuje.

Opcje komórek dla standardowej tabeli

Ten krok może być opcjonalny, ale jeśli twoja tabela potrzebuje stanów, nie możesz się bez nich obejść. A tym bardziej, jeśli w tabeli jest więcej niż jeden styl obramowania.

Stwórzmy więc dodatkowe komponenty komórki, z których łatwiej będzie zbudować tabelę. Pracując z tabelą, dobierzemy odpowiedni komponent w zależności od jego pozycji w tabeli (np. w zależności od rodzaju obramowań).

Aby to zrobić, weźmy nasz komponent komórkowy i stwórzmy z niego jeszcze osiem masterów. Musimy też wyłączyć odpowiednie warstwy odpowiedzialne za granice. Wynik powinien wyglądać jak na poniższym obrazku.

Górny rząd przeznaczony jest na komórki na górze i na środku tabeli. Dolny wiersz dotyczy tylko komórek na dole. W ten sposób będziemy mogli umieszczać komórki jedna po drugiej bez przerw i zachować tę samą szerokość obrysu.

Kilka przykładów:

Uwaga : do każdego stylu obramowania utworzonego powyżej dobrze byłoby dodać główne komponenty, takie jak te opisane wcześniej.

Wykluczyliśmy więc konieczność nadpisywania instancji komórki (a dokładniej wyłączając odpowiednie warstwy). Zamiast tego używamy różnych komponentów. Teraz, jeśli na przykład kolumna używa innego stylu niż domyślny (kolor wypełnienia lub obramowanie), możesz wybrać tę kolumnę i po prostu zmienić względny komponent. I wszystko będzie dobrze. Z drugiej strony, ręczna zmiana obramowania każdej komórki (wyłączenie odpowiednich obramowań) to ból, którym nie chcesz się przejmować.

Teraz jesteśmy gotowi do tworzenia tabel (w kategoriach projektowania atomowego — organizmów) z różnych komponentów komórkowych (cząsteczek), które stworzyliśmy.

Dostosowywanie stołu

Zmiana wysokości wiersza w całej tabeli jest stosunkowo prosta: podświetl tabelę, zmień wysokość elementu (w tym przypadku wysokość komórki, H w prawym panelu w sekcji Właściwości), a następnie zmień margines pionowy z element na 0. To wszystko: zmiana wysokości linii zajęła dwa kliknięcia!

Zmiana szerokości kolumny: podświetl kolumnę i zmień rozmiar szerokości. Po przesunięciu reszty stołu do góry, zaznacz cały stół za pomocą opcji Tide Up w panelu Wyrównanie , a także pierwszą pozycję na liście rozwijanej pod ikoną po prawej stronie.

Uwaga: nie polecam grupowania wierszy i kolumn. Jeśli zmienisz rozmiar kolumny rozszerzającej elementy, otrzymasz ułamkowe wartości szerokości i wysokości. Jeśli ich nie pogrupujesz i nie przyciągniesz do siatki pikseli, rozmiar komórki pozostanie liczbą całkowitą.

Kolor tła, typ obrysu i dane zawartości można zmienić w odpowiednim komponencie lub w jednym z ośmiu głównych komponentów komórek (komórki, które miały różne style obrysu). Jedynym parametrem, którego nie można zmienić od razu, są marginesy komórek, np. dopełnienie treści . Resztę można łatwo dostosować.

Komponenty, nie nadpisuje

Patrząc na to, co ostatecznie dostaliśmy, może się to wydawać przesadą. I tak jest, jeśli w Twoim projekcie jest tylko jedna tabela. W takim przypadku możesz po prostu utworzyć jeden składnik komórki i pozostawić wyłączone składniki tła i obrysu. Po prostu uwzględnij je w komponencie komórki, utwórz tabelę i dokonaj niezbędnych dostosowań dla każdej oddzielnej komórki.

Ale jeśli komponenty są zawarte w bibliotece, z której korzysta wiele innych plików, oto najciekawsze rzeczy.

Uwaga : *Nie polecam zmiany koloru tła i obrysu w instancjach komponentów. Zmień je tylko w masterze . W ten sposób instancje z zastąpieniami nie zostaną zaktualizowane. Oznacza to, że musiałbyś to zrobić ręcznie i tego właśnie staramy się uniknąć. Pozostańmy więc przy głównych komponentach.*

Jeśli potrzebujemy utworzyć dodatkowy typ komórek tabeli (np. nagłówek tabeli), dodajemy niezbędny zestaw komponentów głównych dla komórek o odpowiednich stylach (tak jak zrobiliśmy powyżej z ośmioma komórkami, które miały różne style obrysu) i Użyj tego. Tak, trwa to dłużej niż nadpisywanie instancji komponentów, ale w ten sposób unikniesz sytuacji, w której zmiana wzorców spowoduje zastosowanie tych zmian do wszystkich układów.

Stany tabeli

Porozmawiajmy o stanach elementów stołu. Komórka może mieć trzy stany: domyślny, najechanie i zaznaczenie. To samo dla kolumn i wierszy.

Jeśli projekt jest stosunkowo mały, wszystkie stany można ustawić przez nadpisania wewnątrz wystąpień komponentów tabeli. Ale jeśli jest duży i chciałbyś mieć możliwość zmiany wyglądu stanów w przyszłości, będziesz musiał stworzyć osobne komponenty do wszystkiego.

Musisz dodać wszystkie osiem komórek z różnymi wariantami obrysu dla każdego ze stanów (może mniej, w zależności od stylu obrysu). I tak, będziemy potrzebować osobnych komponentów dla koloru tła i obrysu dla stanów.

W końcu będzie to wyglądać podobnie do tego:

Tutaj pojawia się trochę kłopotów. Niestety, jeśli zrobimy wszystko tak, jak opisano powyżej (przy zmianie stanu komponentu z jednego na inny), istnieje ryzyko utraty zawartości komórki. Będziemy musieli go zaktualizować poza przypadkiem, gdy typ zawartości jest taki sam jak w komórce głównej. W tym momencie nie możemy nic z tym zrobić.

Dodałem tabele w pliku makiety, które zostały wykonane na kilka różnych sposobów:

• Korzystanie z tego samouczka (oddzielne komponenty dla stylów komórek);
• Używanie komponentu komórki (komponenty obramowania, tła i treści);
• Używanie komponentu komórki, który łączy wszystko (z dodatkiem tylko komponentów zawartości).

Spróbuj pobawić się i zmienić style komórki.

Wniosek

Jeśli używasz tej samej biblioteki komponentów w kilku projektach i masz rozsądną liczbę tabel w każdym z nich, możesz utworzyć lokalną kopię komponentów (komponenty komórek ze stylami obrysu oraz, w razie potrzeby, komponenty komórek o różnych stanów), dostosowywać je i używać w projekcie. Zawartość komórki można ustawić na podstawie lokalnych komponentów.

Ponadto, jeśli używasz tabeli do jednego dużego projektu z różnymi rodzajami tabel, wszystkie wyżej wymienione elementy można łatwo skalować. Komponenty tabeli można ulepszyć do nieskończoności i dalej, na przykład tworzenie stanów komórek podczas najeżdżania i innych rodzajów interakcji.

Pytania, opinie, przemyślenia? Zostaw komentarz poniżej, a zrobię co w mojej mocy, aby Ci pomóc!

Pobieranie makiety stołu Figma

Zgodnie z obietnicą stworzyłem kompletną wersję makiety stołu Figma, której możesz używać do celów edukacyjnych lub czegokolwiek innego, co lubisz. Cieszyć się!

Powiązane czytanie

• „Atomowy projekt”, Brad Frost
• „Jak zaprojektować złożoną tabelę internetową”, Sława Szestopałow, Smashing Magazine
• „Tworzenie komponentów atomowych w Figma”, zespół projektowo-inżynieryjny littleBits
• „Tabele Figma: projektowanie siatki danych za pomocą pojedynczego komponentu komórki”, Roman Kamushken, Setproduct

Przydatne zasoby

• Kanał YouTube Figma
  Oficjalny kanał Figma na YouTube — to pierwsza rzecz do obejrzenia, jeśli jesteś nowy w Figma.
• Synchronizacja Arkuszy Google
  Wtyczka Figma, która pomaga pobierać dane z Arkuszy Google do pliku Figma. Powinno to działać dobrze z technikami z tego samouczka, ale musisz zainwestować trochę czasu w zmianę nazw wszystkich warstw tekstu, aby działało to poprawnie.