UX Research i badania

Nowe funkcje w Figmie: doskonałość auto-layoutu i potęga zmiennych

W tym artykule przedstawimy nowe funkcje w Figmie, które są prawdziwą rewolucją dla designerów. Udoskonalenie auto-layoutu pozwala na łatwiejsze zarządzanie układem elementów na projekcie, a potęga zmiennych umożliwia szybką i efektywną personalizację stylów. Dowiedz się, jak te innowacje mogą usprawnić proces tworzenia interfejsów użytkownika i wpłynąć na efektywność pracy zespołów designerskich.

30 cze 2023

Figma, popularne narzędzie do projektowania interfejsów użytkownika, wprowadziło nowe funkcje, które znacząco usprawniają proces tworzenia projektów. Jedną z najciekawszych nowości jest poprawiony auto-layout, który pozwala na automatyczną organizację i dopasowanie elementów w projekcie już nie w jednym ale w wielu wierszach. Dzięki temu można łatwo tworzyć responsywne interfejsy, w których wszystkie elementy idealnie ze sobą współpracują. Kolejną funkcją, której warto zwrócić uwagę, są zmienne. Pozwalają one na zdefiniowanie i modyfikację wartości w jednym miejscu, co przyspiesza proces iteracji i aktualizacji projektu. Te nowości sprawiają, że praca w Figma staje się jeszcze bardziej efektywna i komfortowa dla projektantów interfejsów.

Figma

Auto-layout: doskonałe narzędzie do tworzenia układów jeszcze doskonalsze

Figma, popularne narzędzie do projektowania interfejsów użytkownika, wprowadziło nowe funkcje, które sprawiają, że tworzenie układów staje się jeszcze bardziej efektywne. Jedną z najważniejszych nowości jest udoskonalenie auto-layoutu. Auto-layout to jedna z najbardziej przydatnych funkcji w Figmie, umożliwiająca łatwą i elastyczną kontrolę układu elementów na ekranie. Dzięki auto-layoutowi projektanci mogą tworzyć responsywne interfejsy, które automatycznie dostosowują się do różnych rozmiarów ekranów. Dla przykładu, jeśli zmienisz rozmiar jednego elementu w grupie, pozostałe elementy automatycznie dostosują swoje położenie i rozmiar, zapewniając spójność i równowagę wizualną. To ogromne ułatwienie w procesie projektowania i pozwala zaoszczędzić dużo czasu. To czego brakowało dotychczas to bezpośrednie przełożenie znanego z języka CSS flexbox flex-wrap na odpowiednią funkcję auto-layoutu. Teraz elementy mogą rozmieszczać się nie tylko w jednym ale zawijać w wielu wierszach. Po ostatniej aktualizacji projektanci i front-end developerzy będą posługiwać się wreszcie tą samą logiką rozmieszczania elementów co na pewno usprawni ich współpracę i komunikację.

 

Zapoznaj się z potęgą zmiennych w Figmie

Zmiennymi w Figmie są potężnym narzędziem, które umożliwiają łatwe zarządzanie stylami i właściwościami elementów na projekcie. Dzięki zmiennym możemy tworzyć spójne projekty, zmieniając tylko jedną wartość. To znacznie przyspiesza proces tworzenia i aktualizacji projektów. Dodatkowo, zmienna może być używana w wielu miejscach jednocześnie, co zwiększa naszą elastyczność i umożliwia dostosowanie projektu do różnych potrzeb. Dlatego warto zapoznać się z potęgą zmiennych w Figmie, aby jeszcze bardziej optymalizować naszą pracę. Zmienne umożliwiają zdefiniowanie właściwości, takich jak kolory, czcionki czy marginesy, które mogą być później łatwo zmieniane na całym projekcie. Dzięki nim projektanci mogą szybko eksperymentować z różnymi stylami i wersjami projektu, co przyspiesza i ułatwia proces tworzenia. 

 

Powiązana branża

HR / HRTech

W HR pracujemy z agencjami rekrutacyjnymi, startupami hrtech i firmami, które mają własny dział HR i wyrosły z gotowych narzędzi. Problem jest zwykle ten sam: proces rekrutacyjny albo kadrowy jest rozsypany między system ATS, arkusze, maile i kalendarz, a nikt nie widzi całości. Buduje się tu przede wszystkim systemy do rekrutacji, obiegu dokumentów pracowniczych, onboardingu i szkoleń. Rzadziej chodzi o brak funkcji — częściej o to, że narzędzie nie zgadza się z procesem, który firma faktycznie stosuje. Dlaczego gotowy ATS przestaje wystarczać Gotowe narzędzia zakładają jeden uniwersalny proces rekrutacji. Tymczasem agencja pracuje inaczej niż dział HR w produkcji, a rekrutacja specjalistów IT inaczej niż masowa. Kiedy firma zaczyna prowadzić proces obok narzędzia — w arkuszach i mailach — to znak, że narzędzie przegrało. Budowę własnego systemu zaczynamy więc od zmapowania procesu takiego, jaki jest, z jego wyjątkami — dopiero potem powstaje interfejs. Widoczność firmy HR na zewnątrz to osobny wątek: strona doradztwa czy agencji musi dać się aktualizować bez programisty, bo oferta i treści zmieniają się z tygodnia na tydzień. Tak przebudowaliśmy serwis firmy doradztwa HR — na narzędziach, które zespół obsługuje samodzielnie. Drugi nurt to dokumenty: umowy, aneksy, zgody, badania, szkolenia BHP. Obieg papierowy kończy się segregatorami i pytaniem „czy to na pewno wróciło podpisane". Cyfrowy obieg z podpisem elektronicznym i automatycznymi przypomnieniami zdejmuje z kadr najbardziej mechaniczną część pracy — a pracownikowi daje jedno miejsce, w którym widzi swoje sprawy. Na co uważać przy narzędziach wewnętrznych Narzędzie wewnętrzne nie ma marketingu, który zmusi ludzi do używania — albo jest wygodniejsze od arkusza, albo umiera. Dlatego w tych projektach interfejs nie jest kosmetyką: liczy się liczba kliknięć w codziennych czynnościach, sensowne wartości domyślne i to, żeby system podpowiadał następny krok procesu. Tę część pracy wykonujemy w ramach projektowania UX/UI z testami na osobach, które będą narzędzia używać naprawdę.

Branża HR

Optymalne wykorzystanie zmiennych w projektowaniu w Figmie

Wraz z wprowadzeniem nowych funkcji w Figmie, takich jak doskonałość auto-layoutu i potęga zmiennych, projektowanie stało się jeszcze bardziej optymalne. Zastosowanie zmiennych w projektowaniu w Figmie pozwala na łatwe zarządzanie i dostosowywanie elementów interfejsu. Nie tylko ułatwia to pracę zespołom projektowym, ale także przyspiesza proces tworzenia projektów. Wykorzystanie zmiennych pozwala na szybkie wprowadzanie zmian, jednocześnie zapewniając spójność i jednolitość w projekcie. Dzięki temu, projektanci mogą skupić się na kreatywności i tworzeniu doskonałych interfejsów użytkownik. Nowa aktualizacja sprawia, że Figma coraz lepiej łączy projektowanie graficzne logiką programowania co ułatwi pracę wszystkim członkom zespołów IT.

FAQ

Najczęstsze pytania

  • Poprawiony auto-layout pozwala na automatyczną organizację i dopasowanie elementów w projekcie już nie w jednym, ale w wielu wierszach. Dotychczas brakowało bezpośredniego przełożenia znanego z CSS flexboxa flex-wrap na odpowiednią funkcję auto-layoutu — teraz elementy mogą zawijać się w wielu wierszach, dzięki czemu projektanci i front-end developerzy posługują się tą samą logiką rozmieszczania elementów.
  • Auto-layout to jedna z najbardziej przydatnych funkcji Figmy, umożliwiająca łatwą i elastyczną kontrolę układu elementów na ekranie. Dzięki niemu projektanci mogą tworzyć responsywne interfejsy, które automatycznie dostosowują się do różnych rozmiarów ekranów — jeśli zmieni się rozmiar jednego elementu w grupie, pozostałe automatycznie dostosują swoje położenie i rozmiar, zapewniając spójność i równowagę wizualną.
  • Zmienne to potężne narzędzie umożliwiające łatwe zarządzanie stylami i właściwościami elementów w projekcie. Pozwalają zdefiniować właściwości, takie jak kolory, czcionki czy marginesy, które mogą być później łatwo zmieniane na całym projekcie — modyfikacja jednej wartości w jednym miejscu przyspiesza proces iteracji i aktualizacji, a zmienna może być używana w wielu miejscach jednocześnie.
  • Zastosowanie zmiennych pozwala na łatwe zarządzanie i dostosowywanie elementów interfejsu oraz szybkie wprowadzanie zmian przy zachowaniu spójności i jednolitości projektu. Projektanci mogą szybko eksperymentować z różnymi stylami i wersjami projektu, a zespoły projektowe pracują sprawniej — dzięki czemu można skupić się na kreatywności i tworzeniu doskonałych interfejsów użytkownika.
  • Po ostatniej aktualizacji projektanci i front-end developerzy posługują się tą samą logiką rozmieszczania elementów, co usprawnia ich współpracę i komunikację. Nowa aktualizacja sprawia, że Figma coraz lepiej łączy projektowanie graficzne z logiką programowania, co ułatwia pracę wszystkim członkom zespołów IT.

Blog

Powiązane artykuły

Czytaj więcej
UX Research i badania

Drużynowy design: Najlepsze metody i wyzwania w projektowaniu UX/UI

Projektowanie UX/UI to prawdziwe wyzwanie w wielu zespołach IT. Dynamicznie rozwijająca się dziedzina, w której znalezienie właściwych metod i narzędzi jest kluczowe dla sukcesu. Czy drużynowy design to klucz do tworzenia optymalnych rozwiązań dla końcowych użytkowników? Zachęcamy do lektury naszego artykułu, gdzie przyjrzymy się bliżej temu zagadnieniu.

Agnieszka Jęchorek
27 lip 2023
UX Research i badania

Design-to-Code: co to jest i jak działa?

Design-to-Code to podejście, które skraca drogę od projektu w Figmie do działającego interfejsu w aplikacji, coraz częściej wspieranego przez AI. Zamiast ręcznie przepisywać layout, style i komponenty, część decyzji projektowych można automatycznie przenieść do kodu i szybciej zbudować pierwszą wersję UI. To nie magia, tylko zestaw konkretnych technik i narzędzi, które najlepiej działają wtedy, gdy projekt jest uporządkowany i oparty na design systemie.

Tomasz Kozon
22 lut 2026
UX Research i badania

Micro-Delays w UX: celowo projektowane mikroopóźnienia

W świecie projektowania UX szybkość działania interfejsu od lat uznawana jest za jeden z kluczowych wyznaczników jakości. Paradoksalnie jednak nie wszystkie opóźnienia są błędem - niektóre z nich są celowo projektowane, by wspierać zrozumienie, poczucie kontroli i zaufanie użytkownika. Micro-delays, czyli krótkie, kontrolowane mikroopóźnienia, mogą sprawić, że interakcje staną się bardziej naturalne i przewidywalne.

Tomasz Kozon
18 gru 2025
UX Research i badania

Scroll-Triggered Storytelling: Jak tworzyć historie, które ożywają podczas przewijania

Scroll-triggered storytelling to jedna z najbardziej angażujących form prezentowania treści w sieci, która łączy narrację z interakcją użytkownika. Dzięki animacjom i reakcjom na przewijanie historia dosłownie ożywa na ekranie, prowadząc odbiorcę przez opowieść w dynamiczny i intuicyjny sposób. Tego typu doświadczenia nie tylko zwiększają uwagę i zapamiętywanie treści, ale także budują głębsze, bardziej emocjonalne połączenie z marką lub projektem.

Tomasz Kozon
15 gru 2025