---
url: "/pl/copydoc/sync/styles.md"
description: "Oprócz aktualizowania tekstów w warstwach Figmy funkcja **Sync Content** może w ten sam sposób automatycznie stosować style CSS do warstw."
---

# Style CSS w arkuszu do aktualizacji stylów warstw Figmy

> Oprócz aktualizowania tekstów w warstwach Figmy funkcja **Sync Content** może w ten sam sposób automatycznie stosować style CSS do warstw.

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

[Video](/assets/videos/copydoc/sync/spreadsheet-styles-sync.mp4)

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 {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

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 {#text-layers}

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;`)

> **Tip:** **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 {#other-layers}

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 {#positioning-properties}

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 {#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**.

> **Note:** 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 {#x-y-position}

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.

> **Note:** **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 {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

[Video](/assets/videos/copydoc/sync/auto-repeat-sync.mp4)

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 {#dynamic-auto-repeating-parent-layer-names}

[Video](/assets/videos/copydoc/sync/auto-renaming-frames.mp4)

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)`).