Poniższy artykuł stanowi notatki z oficjalnego livestreamu Figma Release Notes z lipca 2025. Wszystkie przedstawione przemyślenia, obserwacje i demonstracje pochodzą od zespołu produktowego Figmy podczas prezentacji prowadzonej z biura w Nowym Jorku.

TL;DR

Figma Make dostępne na wszystkich planach – włącznie z darmowym planem starter
Video fills w Figma Sites – możliwość dodawania filmów jako tła i elementów strony
Figma Buzz z obsługą video – import/export plików MP4, multi-platform creation i „Add All Templates”
Focus View i interaktywna inspekcja w Dev Mode – dynamiczne testowanie breakpointów i responsywności
Nowe narzędzia wektorowe – Simplify Vector i Offset Vector w Figma Draw
Grid improvements – mixed math editing, min/max values, API extensions
Variable authoring i browser notifications – lepsze zarządzanie design systemami i powiadomienia jak w desktopie

Demokratyzacja AI w designie

Figma Make trafia do wszystkich użytkowników, w tym do posiadaczy darmowego planu starter. Alex, menedżer produktu odpowiedzialny za Make, podkreślił podczas prezentacji, że narzędzie pozwala teraz każdemu członkowi zespołu „promptować pomysły do życia” – niezależnie od roli w projekcie.

Kluczowe nowości w Make:

Style Context – tworzy CSS-ową wersję systemu designu wraz z wytycznymi
Mobile Preview – zapewnia odpowiednie wyświetlanie na różnych urządzeniach
Supabase Integration – przekształca prototypy w prawdziwe aplikacje z bazą danych
Named Versions – automatyczne nazywanie każdej wersji dla łatwego powrotu
Community Sharing – publikowanie projektów na Figma Community

Podczas demonstracji Alex pokazał pełny proces tworzenia aplikacji do zarządzania projektami naukowymi. Rozpoczął od prostego prototypu, następnie przeszedł do działającej aplikacji z prawdziwą bazą danych, przesyłaniem plików i systemem logowania. „Teraz mamy prawdziwą aplikację wspieraną przez prawdziwy backend” – podsumował swoje demo.

Point Edit umożliwia szybkie modyfikacje bez dodatkowych promptów. To narzędzie pozwala precyzyjnie wskazać element na projekcie i wydać mu polecenie, na przykład „zmień font”, bez potrzeby pisania kolejnego długiego promptu.

Sites z video i personalizacją

Katie, menedżerka produktu Figma Sites, zaprezentowała znaczące rozszerzenie możliwości platformy. Video fills pozwalają teraz na zastępowanie statycznych obrazów filmami z pełną kontrolą nad odtwarzaniem.

Nowe funkcje Sites:

Video fills – filmy jako tła z kontrolą autoplay i loop
Custom subdomains – personalizowane adresy zamiast losowych linków
Code layers – napędzane przez Make dla zaawansowanych interakcji
Embed improvements – bezpośrednia integracja z Typeform i innymi narzędziami

Demonstracja Katie pokazała tworzenie portfolio video z karuzelą, gifami i filmami w tle – wszystko z jednego interfejsu. Podczas prezentacji custom domains żartobliwie skomentowała: „Nie chcę wysyłać komuś linka 'banana-pancakes’, choć uwielbiam naleśniki bananowe”.

W przygotowaniu są custom fonts dla pełnej spójności brandowej oraz password protection dla bezpiecznego udostępniania prac w toku. Jak zaznaczyła Katie, custom fonts „uwolnią projektantów od konieczności udawania fontów za pomocą zrzutów ekranu”.

Buzz – od brandingu do video

Jasmine, odpowiedzialna za Figma Buzz, skoncentrowała się na rozwiązaniu dwóch kluczowych problemów: zachowaniu spójności marki i tworzeniu angażujących treści z video.

Default Libraries Integration rozwiązuje frustrację zespołów brandingowych. Administratorzy mogą teraz ustawić biblioteki brand kitów jako domyślne w Buzz, co oznacza automatyczne pojawianie się kolorów, fontów i komponentów. Jasmine komentowała pokazując wcześniejszy proces ręcznego wybierania kolorów: „Zespół brandingowy prawdopodobnie nie polubi tego”.

Możliwości video w Buzz obejmują:

Import i eksport plików MP4
Video jako tła w assets z kontrolą odtwarzania
Preview w canvas przed eksportem
Automatyczne dopasowywanie do formatów platform

Multi-platform creation stanowi prawdziwą magię Buzz. Jeden asset można przekształcić automatycznie w Instagram Story, Facebook Post, LinkedIn Portrait i X Post – wszystko z zachowaniem video w tle i automatycznym dopasowaniem wymiarów dla każdej platformy.

Usprawnienie użyteczności to nowy przycisk „Add All Templates” dla większych plików. Jak wyjaśniła Jasmine: „To świetne rozwiązanie dla większych plików. Może masz 20, 50, 100 assetów w jednym pliku” – jeden klik dodaje wszystkie templaty do canvas.

W przygotowaniu są usprawienia w publikowaniu templateów oraz integracje z narzędziami ważnymi dla workflow zespołów.

Współpraca w FigJam i Slides

Aktualizacje narzędzi kolaboracyjnych koncentrują się na diagramach i mobilności. FigJam otrzymał setki nowych kształtów z AWS, Azure, Google Cloud, Kubernetes i Cisco – umożliwiając mapowanie architektury chmurowej i infrastruktury sieciowej w jednym miejscu.

Jednak to nie wszystko. Jasmine podkreśliła również usprawnienia w snap i align dla connectorów, nowy wygląd toolbar oraz możliwość komentowania bezpośrednio z paska narzędzi zamiast przechodzenia do prawego górnego rogu canvas.

Z kolei Figma Slides zyskało pełną funkcjonalność mobilną – swipe navigation, pinch-to-zoom i full screen mode po obróceniu telefonu. To idealne rozwiązanie dla przeglądania slajdów w podróży.

Dev Mode z interaktywną inspekcją

Akbar, developer advocate w Figmie, zaprezentował przełomową funkcję „interactive inspection”. Deweloperzy mogą teraz przejść do Focus View i korzystać z funkcji pozwalającej na dynamiczne testowanie designów zamiast oglądania statycznych ekranów.

Funkcja ta, jak wyjaśnił Akbar, powstała by uchwycić „niuans i dynamiczną naturę projektu”, pokazując co dzieje się pomiędzy statycznymi breakpointami. „Tradycyjnie widzimy wiele ekranów statycznie reprezentowanych obok siebie dla różnych breakpointów i motywów. To nie oddaje niuansów i dynamicznej natury designu” – wyjaśnił podczas demonstracji.

Interactive Inspection umożliwia:

Dynamiczne zmiany szerokości i wysokości designu w czasie rzeczywistym (np. 1200x800px)
Przełączanie między light/dark mode jednym kliknięciem
Testowanie „scaled text” dla accessibility
Preview różnych breakpointów bez tworzenia wielokrotnych ramek
Lepsze zrozumienie responsywności auto layout

MCP Server otrzymał znaczące usprawnienia:

Annotations support – AI czyta notatki z designów dla lepszego kontekstu kodu
Local placeholder images – bezpośrednie używanie obrazów z plików Figma
Design system rules – narzędzie do tworzenia instrukcji dla AI agents

W rezultacie deweloperzy mogą lepiej zrozumieć intencje designerów i tworzyć kod, który faktycznie odpowiada wizji projektu.

Draw – zaawansowane narzędzia wektorowe

Miggy zaprezentował trzy kluczowe funkcje dla Figma Draw. Variable Width Stroke otrzymało użyteczne usprawnienia – tab navigation między węzłami, możliwość wpisywania konkretnych wartości oraz edycję multiple nodes jednocześnie.

Dwie całkowicie nowe funkcje to:

Simplify Vector – redukcja punktów wektorowych za pomocą intuicyjnego suwaka
Offset Vector – rozszerzanie profili wektorowych z opcją zaokrąglania krawędzi

Demonstracja na przykładzie ilustracji ośmiornicy pokazała, że wszystkie narzędzia można aplikować zarówno do obiektów, jak i bezpośrednio do obrysu. Mimo to Offset Vector sprawdza się szczególnie dobrze do tworzenia cieni i konturów.

Design – siatki i dostępność

Figma Design otrzymało szereg ulepszeń koncentrujących się na grid systems i accessibility. Mixed math editing pozwala na jednoczesną edycję wielu siatek o różnych layoutach – jak zademonstrował Miggy, dodając kolumny do jednej siatki i rzędy do drugiej jednocześnie.

Grid Improvements obejmują:

Min/max values – kontrola elastyczności dla frames i children
Grid item swap – prawdziwe przestawianie elementów (nie tylko ruch w jednym kierunku)
Column/row reflow – automatyczne przearanżowanie przy usuwaniu elementów siatki
Gap/padding variables – dynamiczne wartości dla odstępów

Dlatego też accessibility improvements stanowią odpowiedź na potrzeby wszystkich użytkowników. Lepsze wsparcie dla klawiatur i czytników ekranu, możliwość nawigacji bez myszy oraz Accessibility Color Picker sprawdzający kontrast na wielu selekcjach jednocześnie.

Zespół wprowadził również zaktualizowane Apple UI kits z Glass Effect – nową funkcją pozwalającą na dodawanie efektów szkła do ramek z kontrolą nad refrakcją, głębią i dyspersją. Bonus stanowią czcionki SF Pro wbudowane domyślnie ze wszystkimi wariantami i wagami.

Tworzenie zmiennych otrzymało znaczące usprawnienia: „filter search” i „expand options” dla panelu zmiennych ułatwiają znajdowanie konkretnych zmiennych w rosnących systemach designu. Dostępny jest też tryb pełnoekranowy dla panelu zmiennych.

Powiadomienia przeglądarki to kolejny krok w kierunku zgodności z wersją desktopową. W rezultacie użytkownicy mogą teraz otrzymywać powiadomienia push z Figmy bezpośrednio w przeglądarce – tak samo jak w aplikacji desktopowej.

Grid API extensions pozwalają na rozszerzanie funkcjonalności przez plugin i REST API, umożliwiając budowanie niestandardowych narzędzi i automatyzację aktualizacji.

Niespodziewany gość

Wydarzenie uatrakcyjnił nieplanowany telefon do Dylan Field, CEO Figmy. Zapytany o ulubioną funkcję, Field wskazał na Offset Vector jako odpowiedź na długoletnie prośby użytkowników oraz usprawienia MCP z obietnicą „dużo więcej do nadejścia”.

„Widzę dużo możliwości i świetnie jest obserwować feedback społeczności” – skomentował CEO, patrząc na hołd złożony jego słynnemu avatarowi Chain Runner przez Miggy’ego.

Praktyczne checklisty

✅ Pierwsze kroki z Figma Make (teraz darmowe)

[ ] Przygotuj ramki designu do skopiowania
[ ] Użyj Style Context – dołącz swój design system przez bookmark
[ ] Napisz jasny prompt opisujący funkcjonalność
[ ] Przetestuj Mobile Preview na różnych urządzeniach
[ ] Rozważ integrację z Supabase dla prawdziwej bazy danych
[ ] Opublikuj na Community dla inspiracji innych

✅ Multi-platform assets w Buzz

[ ] Ustaw default libraries w panelu administratora
[ ] Stwórz master asset z video w tle
[ ] Użyj „Add All Templates” dla projektów z wieloma assets (20-100 elementów)
[ ] Zmień asset type dla każdej platformy (Instagram, Facebook, LinkedIn, X)
[ ] Sprawdź preview video przed eksportem
[ ] Wyeksportuj wszystkie formaty jednocześnie

✅ Efektywne zarządzanie Design System

[ ] Wykorzystaj filter search w panelu zmiennych dla szybkiego znajdowania
[ ] Przejdź na full screen mode przy pracy z dużymi systemami zmiennych
[ ] Włącz browser notifications dla śledzenia zmian w czasie rzeczywistym
[ ] Sprawdź kontrast kolorów przez Accessibility Color Picker na wielu selekcjach
[ ] Rozważ Grid API extensions dla automatyzacji workflow

✅ Testowanie w Dev Mode – Interactive Inspection

[ ] Przetestuj responsywność – użyj interaktywnej inspekcji do płynnych zmian szerokości
[ ] Sprawdź zachowanie w różnych motywach – przełącz między jasnym a ciemnym
[ ] Poszukaj adnotacji – nowy MCP Server odczyta notatki projektanta o interakcjach
[ ] Testuj zachowanie Auto Layout między breakpointami
[ ] Sprawdź scaled text dla różnych potrzeb accessibility

Perspektywy rozwoju

Zespół Figmy zapowiedział dalsze inwestycje we wszystkie produkty portfolio. Sites otrzyma custom fonts dla pełnej spójności brandowej i password protection dla bezpiecznego udostępniania prac w toku.

Mimo to Buzz będzie rozwijany w kierunku usprawień w publikowaniu templateów oraz integracji z narzędziami ważnymi dla workflow zespołów – co może oznaczać połączenia z popularnymi platformami marketingowymi.

Z kolei Grid zostanie rozszerzony o więcej możliwości przez plugin i REST API, a zespół obiecuje również nadejście HUG – funkcji długo wyczekiwanej przez społeczność.

Jednak jak podsumował Miggy: „Rozszerzamy nasze portfolio, ale wciąż inwestujemy w Figma Design” – podkreślając, że mimo dywersyfikacji produktowej, podstawowe narzędzie designerskie pozostaje priorytetem.

Kluczowy insight

Projekt to symulator, nie specyfikacja

Standardowo myślimy: Projektanci przekazują deweloperom statyczne ekrany (specyfikacje), a deweloperzy muszą na ich podstawie odtworzyć logikę i responsywność.

W praktyce okazuje się, że: Dzięki interaktywnej inspekcji plik projektowy staje się dynamicznym symulatorem. Deweloper może „bawić się” projektem, testując jego zachowanie w różnych warunkach, zanim napisze linijkę kodu.

Dlaczego to jest istotne: To przesuwa odkrywanie problemów z logiką i responsywnością z etapu kodowania (drogiego) na etap projektowy (taniego). Eliminuje zgadywanie i fundamentalnie zmienia rozmowę na linii projektant-deweloper.

Test na jutro: Następnym razem gdy otrzymasz nowy projekt do zakodowania, zamiast od razu przechodzić do analizy poszczególnych komponentów, spróbuj wejść w Dev Mode, uruchomić interaktywną inspekcję i przez 10 minut dynamicznie zmieniać szerokość ekranu oraz przełączać motywy. Sprawdź ilu pytań o zachowania „pomiędzy” breakpointami udało Ci się uniknąć.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Materiał pochodzi z oficjalnego livestreamu Figma Release Notes z lipca 2025.

Tag: Dev Mode Interaktywny

Figma Release Notes lipiec 2025: Make za darmo, video w Sites i interaktywna inspekcja #EN245