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.
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.