Poradnik wideo: stylowanie warstw Figmy z arkusza kalkulacyjnego dzięki synchronizacji stylów CSS

Ten film pokazuje, jak stylować warstwy Figmy z arkusza kalkulacyjnego dzięki synchronizacji stylów CSS we wtyczce CopyDoc.

Jeśli na przykład masz w Figmie warstwy tekstowe o nazwie #SectionHeading, możesz zmienić ich rozmiar i kolor fontu, dodając font-size: 40px; color: #999999; w wierszach pod kolumną #SectionHeading w arkuszu.

Gdy zsynchronizujesz arkusz z Figmą, style wszystkich pasujących warstw Figmy zostaną automatycznie zaktualizowane, o ile dana wartość CSS jest obsługiwana i dotyczy tego typu warstwy.

Obsługiwane właściwości CSS do stylowania warstw Figmy

Różne typy warstw obsługują różne właściwości CSS. Aby zastosować do warstwy kilka właściwości naraz, wpisz je w tej samej komórce arkusza,

na przykład color: #000000; font-size: 24px; font-weight: bold;

#HeroBlock	#Menu	#CardFrame	#StaffName
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;

Poniżej znajdziesz właściwości CSS obecnie obsługiwane przez synchronizację arkuszy:

Warstwy tekstowe

Te właściwości CSS możesz stosować do dowolnych warstw tekstowych w Figmie.

• color (na przykład color: #CCCCCC;)
• font-size (na przykład font-size: 40px;)
• line-height (na przykład line-height: 48px;)
• font-family (na przykład font-family: Arial;)
• font-weight (na przykład font-weight: bold;)
• font-style (na przykład font-style: italic;)
• text-align (na przykład text-align: center;)
• text-transform (na przykład text-transform: uppercase;)
• vertical-align (na przykład vertical-align: middle;)

Stosowanie stylów tekstu do wszystkich warstw podrzędnych. Jeśli zastosujesz style CSS warstw tekstowych (na przykład font-size: 30px) do warstwy zawierającej warstwy podrzędne (na przykład Frame, Group, Component, Instance), styl zostanie automatycznie zastosowany do każdej warstwy tekstowej wewnątrz tej pasującej warstwy.

Inne warstwy

Te właściwości CSS możesz stosować do innych warstw Figmy (obrazów, prostokątów, ramek itp.):

• width (na przykład width: 100px;)
• height (na przykład height: 100px;)
• opacity (na przykład opacity: 0.5;)
• background-color (na przykład background-color: #CCCCCC;)
• border (na przykład border: 1px solid #CCCCCC;)
• border-radius (na przykład border-radius: 20px;)

Właściwości pozycjonowania

Te właściwości CSS możesz stosować do dowolnych warstw Figmy (w tym tekstów, obrazów, prostokątów, ramek itp.).

Transform

Właściwość transform w CSS pozwala wizualnie zmieniać położenie, obrót i skalę elementu bez wpływu na zajmowane przez niego miejsce w układzie. Często używa się jej w Figmie i podobnych narzędziach projektowych do odwzorowania przesunięć, obrotów i zmian rozmiaru zachodzących wewnątrz ramki, a nie względem przepływu dokumentu.

Najczęściej używane funkcje transform:

• translate Przesuwa element wzdłuż osi X i Y. Przykład: transform: translate(10px, 20px) → przesuwa element o 10px w prawo i o 20px w dół.

• translateX Przesuwa element poziomo wzdłuż osi X. Przykład: transform: translateX(10px) → przesuwa element o 10px w prawo.

• translateY Przesuwa element pionowo wzdłuż osi Y. Przykład: transform: translateY(20px) → przesuwa element o 20px w dół.

• rotate Obraca element wokół jego punktu początkowego. Przykład: transform: rotate(45deg) → obraca element o 45 stopni zgodnie z ruchem wskazówek zegara.

• scale Zmienia rozmiar elementu o podany współczynnik na osiach X i Y. Przykład: transform: scale(1.5) lub transform: scale(2, 1.5) → powiększa element 1,5× w obu kierunkach lub 2× w poziomie / 1,5× w pionie.

Możesz łączyć kilka funkcji transform po kolei. Przykład: css transform: translateX(10px) rotate(45deg) scale(1.2); Kolejność ma znaczenie, bo każda funkcja działa na wyniku poprzedniej.

Pozycja X/Y

W przeciwieństwie do transformacji wartości X i Y w Figmie odpowiadają pozycji bezwzględnej elementu w ramce nadrzędnej lub układzie współrzędnych. W CSS tę pozycję określają takie właściwości jak:

• top Określa przesunięcie w pionie od górnej krawędzi elementu nadrzędnego. Przykład: top: 100px; → umieszcza element 100px poniżej górnej krawędzi kontenera.

• left Określa przesunięcie w poziomie od lewej krawędzi elementu nadrzędnego. Przykład: left: 100px; → umieszcza element 100px od lewej krawędzi kontenera.

Różnica w porównaniu z transform: - top i left określają pozycję elementu w układzie. - transform: translate() przesuwa element wizualnie, bez wpływu na otaczające elementy i przepływ układu.

Automatyczne powtarzanie jednej warstwy z Figmy dla wierszy arkusza

Na kartach synchronizacji Content i Styles możesz automatycznie powtarzać jedną warstwę z Figmy, włączając przełącznik Auto Repeat. Wtyczka skopiuje wtedy oryginalnie zaznaczoną warstwę i powieli ją tyle razy, ile wierszy zawierają dane w arkuszu.

Dzięki temu jedna karta, pozycja katalogu lub układ kampanii zamienia się w wypełniony projekt dla każdego wiersza arkusza. Warstwy tekstowe i warstwy obrazów w projekcie korzystają z pasujących kolumn arkusza.

Jeśli zaznaczysz komponent główny, CopyDoc utworzy instancję dla każdego wiersza. Zaznaczenie istniejącej instancji powiela tę instancję, a zaznaczenie ramki powiela ramkę.

Jeśli zaznaczona warstwa z Figmy znajduje się bezpośrednio w innej warstwie z włączonym Auto Layout, zostanie automatycznie powielona w tej warstwie nadrzędnej. W przeciwnym razie CopyDoc utworzy nową ramkę z Auto Layout i tam powieli nowe warstwy.

Dynamiczne nazwy powtarzanych warstw nadrzędnych

Aby nadać każdej powielonej warstwie z Figmy nazwę z arkusza, dopasuj nazwę zaznaczonej warstwy szablonu do nagłówka kolumny. CopyDoc użyje wartości z tej kolumny w każdym wierszu jako nowej nazwy warstwy.

Pojedynczy # na początku jest opcjonalny: warstwa o nazwie #Title może pasować do kolumny Title, a warstwa o nazwie Title do kolumny #Title. Jeśli istnieją oba nagłówki, pierwszeństwo ma dokładne dopasowanie, także gdy jego wartość jest pusta. Wielkość liter i spacje nadal muszą się zgadzać.

Jeśli w arkuszu nie ma pasującej nazwy warstwy, wtyczka CopyDoc użyje oryginalnej nazwy warstwy z Figmy i doda do niej numer wiersza (na przykład My Frame Layer (Row 3)).