{"id":47572,"date":"2022-10-22T13:57:22","date_gmt":"2022-10-22T11:57:22","guid":{"rendered":"https:\/\/firmbee.com\/?p=47572"},"modified":"2023-01-13T09:14:03","modified_gmt":"2023-01-13T08:14:03","slug":"jak-uzywac-biblioteki-stylow-i-komponentow-w-figmie","status":"publish","type":"post","link":"https:\/\/firmbee.com\/pl\/jak-uzywac-biblioteki-stylow-i-komponentow-w-figmie","title":{"rendered":"Jak u\u017cywa\u0107 biblioteki styl\u00f3w i komponent\u00f3w w Figmie? | Figma dla pocz\u0105tkuj\u0105cych #6"},"content":{"rendered":"

Jak tworzy\u0107 biblioteki styl\u00f3w i komponent\u00f3w w Figmie? Jak u\u017cywa\u0107 ich w swoich plikach i udost\u0119pnia\u0107 innym cz\u0142onkom zespo\u0142u? Odpowied\u017a znajdziesz w poni\u017cszym artykule. Dzi\u0119ki stosowaniu styl\u00f3w \u0142atwiej jest utrzymywa\u0107 sp\u00f3jno\u015b\u0107 w projektach zespo\u0142owych.\u00a0<\/strong><\/p>\r\n\r\n

Jak u\u017cywa\u0107 biblioteki styl\u00f3w i komponent\u00f3w w Figmie? – om\u00f3wione zagadnienia:<\/h2>\r\n
    \r\n
  1. Styles<\/a><\/li> \t\r\n
  2. Components<\/a><\/li>\r\n
  3. Biblioteka styl\u00f3w i komponent\u00f3w – jak publikowa\u0107?<\/a><\/li>\t\r\n<\/ol>\r\n\r\n

    Styles<\/h3>\r\n

    S\u0105 to zestawy w\u0142a\u015bciwo\u015bci, kt\u00f3re mo\u017cna zastosowa\u0107 do warstw w projektach. Aby utworzy\u0107 styl musisz najpierw zaznaczy\u0107 obiekt, kt\u00f3rego w\u0142a\u015bciwo\u015bci chcesz zapisa\u0107. Nast\u0119pnie kliknij ikon\u0119 Style w Properties panel przy wybranej w\u0142a\u015bciwo\u015bci, nast\u0119pnie kliknij ikon\u0119 +.<\/p>\r\n\r\n\"libraries\r\n\r\n

    Otworzy si\u0119 okno, w kt\u00f3rym musisz wpisa\u0107 nazw\u0119 tworzonego stylu i kliknij Create style.<\/strong><\/p>\r\n\r\n\"libraries\r\n\r\n

    Utworzone style zobaczysz w Properties panel, gdy nie b\u0119d\u0105 zaznaczone \u017cadnych obiekt\u00f3w.\u00a0\u00a0<\/p>\r\n\r\n\"libraries\r\n\r\n\r\n

    W panelu Edit styles<\/strong> mo\u017cesz doda\u0107 opis i edytowa\u0107 w\u0142a\u015bciwo\u015bci ka\u017cdego stylu. Za ka\u017cdym razem, gdy dokonasz zmian we w\u0142a\u015bciwo\u015bciach wybranego stylu, zmiany te zostan\u0105 zastosowane do wszystkich obiekt\u00f3w, kt\u00f3re go u\u017cywaj\u0105.<\/p>\r\n\r\n\"libraries\r\n\r\n

    Mo\u017cesz tworzy\u0107 style dla:\u00a0<\/p>\r\n\r\n

    Color (paints) styles<\/strong>– do wype\u0142nie\u0144 i obrys\u00f3w obiekt\u00f3w, tekstu i t\u0142a, a nawet dla obraz\u00f3w i gradient\u00f3w.<\/p>\r\n

    Text styles<\/strong> mo\u017cesz definiowa\u0107 style nag\u0142\u00f3wk\u00f3w i tekstu g\u0142\u00f3wnego.\u00a0\r\nText styles mo\u017cesz stosowa\u0107 do ca\u0142ego bloku tekstu lub tylko do cz\u0119\u015bci tekstu w bloku. Mo\u017cesz \tdefiniowa\u0107: font family, size, line height, spacing.<\/p>\r\n\r\n

    Wskaz\u00f3wka:<\/strong> za pomoc\u0105 text styles nie mo\u017cna ustawi\u0107 wyr\u00f3wnania tekstu.\u00a0<\/p>\r\n\r\n

    Effects<\/strong> – mo\u017cesz zdefiniowa\u0107 atrybuty shadow i blur<\/p>\r\n\r\n

    Layout grids<\/strong> – tworzenie styl\u00f3w Layout grids jest przydatne, je\u015bli chcesz powiela\u0107 okre\u015blon\u0105 struktur\u0119 w wielu projektach.<\/p>\r\n\r\n

    \u00a0Aby zastosowa\u0107 styl w aktywnej warstwie, kliknij ikon\u0119 Style w Properties panel obok wybranej w\u0142a\u015bciwo\u015bci i wybierz styl z listy.<\/p>\r\n\r\n\r\n\"libraries\r\n\r\n

    Aby usun\u0105\u0107 styl z aktywnej warstwy, kliknij w Detach style. Jest to przydatne kiedy chcesz dokona\u0107 zmian w danym obiekcie bez ingerowania w styl.<\/p>\r\n\r\n\"libraries\r\n\r\n

    Zadanie 6.1.<\/strong> Po\u0107wicz tworzenie styl\u00f3w w Figmie.\u00a0\r\nStw\u00f3rz styl dla:<\/p>\r\n