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.

Tomasz Kozon - CEO Boring Owl

Tomasz Kozon

CEO

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

Powiązane case studies

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ę.

 

Powiązana usługa

UX/UI Design

Projektujemy UX/UI aplikacji webowych, mobilnych i systemów B2B - od analizy potrzeb użytkowników i pierwszych makiet po gotowy interfejs oraz design system w Figmie. Nie projektujemy ekranów w oderwaniu od produktu. Sprawdzamy ścieżki użytkowników, dane z analityki i ograniczenia technologiczne, żeby stworzyć rozwiązanie, które jest wygodne w użyciu i możliwe do sprawnego wdrożenia. Po uruchomieniu produktu możemy wrócić do heatmap, nagrań sesji, analityki i rozmów z użytkownikami. Dzięki temu kolejne zmiany wynikają z danych, a nie z przypuszczeń.

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

Wraz z rozwojem firmy standardowe narzędzia HR nie zawsze nadążają za jej procesami. Pojawiają się dodatkowe arkusze, ręczne działania, osobne formularze i informacje przechowywane w kilku miejscach. Projektujemy dedykowane systemy HR oraz rozwijamy i integrujemy istniejące rozwiązania. Mogą obejmować rekrutację, onboarding, obieg dokumentów, obsługę wniosków pracowniczych, szkolenia czy komunikację z kandydatami. Nie zawsze trzeba budować cały system od podstaw. Czasem najlepszym rozwiązaniem jest dodatkowy moduł lub integracja, która uzupełnia narzędzia już wykorzystywane przez zespół. 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 korzystania — albo jest wygodniejsze od arkusza, albo umiera. Interfejs nie jest tu kosmetyką: liczy się liczba kliknięć w czynnościach powtarzanych codziennie, sensowne wartości domyślne i to, żeby system podpowiadał kolejny krok. Tę część pracy wykonujemy w ramach projektowania UX/UI , z testami na osobach, które będą z narzędzia korzystać naprawdę.

hrtech

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.

Tomasz Kozon
27 lip 2023
UX Research i badania

ProtoPie: czym jest i kiedy warto go używać?

ProtoPie to narzędzie do budowania prototypów, które zachowują się jak prawdziwa aplikacja: przyjmują tekst, liczą, reagują na przechylenie telefonu i łączą kilka urządzeń. Wyjaśniamy, czym różni się od prototypu w Figmie, ile kosztuje i kiedy się opłaca.

Tomasz Kozon
30 lip 2026