TL;DR

Figma podwoiła swoje portfolio produktów z 4 do 8, wprowadzając Grid, Sites, Make, Buzz i Draw
Grid to nowa opcja auto-layout umożliwiająca tworzenie responsywnych układów siatki podobnych do CSS Grid
Figma Sites pozwala przekształcić projekty Figmy w działające strony internetowe z responsywnością i interakcjami
Figma Make wykorzystuje AI do tworzenia interaktywnych prototypów z kodu na podstawie designu i promptów
Figma Buzz upraszcza tworzenie materiałów marketingowych dla zespołów nietechnicznych
Figma Draw wprowadza 22 nowych funkcji wektorowych, w tym pędzle, efekty tekstur i wzory
Figma kontynuuje prace nad wydajnością, z 33% poprawą czasu ładowania dla największych plików

Podczas Config 2025 w San Francisco, Figma zaprezentowała serię aktualizacji. Jak podkreślił Dylan Field, w świecie, gdzie AI czyni budowanie oprogramowania łatwiejszym niż kiedykolwiek, design staje się jeszcze bardziej istotny. Celem tegorocznych premier jest pomoc w eksploracji większej liczby pomysłów i przyspieszenie drogi od idei do produktu.

Fundamenty i wydajność – to co niewidoczne, ale kluczowe

Zanim przejdziemy do głównych nowości, warto wspomnieć o pracy, którą Figma wykonuje „pod maską”. Jak zauważył Field, średnia wielkość plików Figmy wzrosła w ciągu roku o 18%. Zespół pracował nad optymalizacją dużych plików dla codziennych działań jak kopiowanie, wklejanie, zaznaczanie warstw czy przełączanie między stronami.

Kluczowe usprawnienia wydajności:

33% redukcji czasu ładowania dla najtrudniejszych przypadków
Inteligentne cache’owanie zmniejszające zużycie pamięci
Progresywne ładowanie prototypów i stron
Trwająca przepisanie architektury Design Systems (planowane na początek 2026)

Grid – nareszcie potężne układy siatki w Figmie

Giorgio Cavilla zaprezentował funkcję Grid Layout. To nowa opcja auto-layout, pozwalająca tworzyć dwuwymiarowe układy siatki.

Jak działa Grid:

Możliwość łatwego tworzenia siatek o dowolnej liczbie kolumn i wierszy
Automatyczne rozciąganie elementów na wiele komórek według ich rozmiaru
Możliwość ręcznego kontrolowania rozpiętości elementów przez przeciąganie
Możliwość zmiany rozmiaru poszczególnych kolumn i wierszy
Wsparcie dla pozycjonowania absolutnego w ramach siatki
Możliwość zagnieżdżania siatek wewnątrz innych siatek

Jak podkreślił Cavilla, Grid naturalnie mapuje się na właściwości CSS Grid w trybie Dev Mode, ułatwiając implementację przez programistów.

Figma Sites – od designu do działającej strony www

Tom Giannattasio i Tom Lowry zaprezentowali Figma Sites, który pozwala przekształcić projekty stworzone w Figmie w działające strony internetowe. Jak zauważył Giannattasio, jest to realizacja jego wieloletniego marzenia o narzędziu łączącym projektowanie i kod.

Kluczowe funkcjonalności Sites:

Edytor oparty na znanym interfejsie Figmy
Wsparcie dla breakpointów (desktop, tablet, mobile)
Multi-edit do synchronizacji zmian między breakpointami
Integracja z istniejącymi bibliotekami komponentów Figmy
Predefiniowane interakcje (hover, parallax, scroll transforms)
Generowanie kodu HTML i CSS w czasie rzeczywistym
Publikowanie strony jednym kliknięciem

Checklist dla rozpoczynających pracę z Figma Sites:

Przygotuj swój design w Figma Design
Przejdź do Figma Sites i wklej swój projekt
Dodaj potrzebne breakpointy (desktop, tablet, mobile)
Dostosuj układ dla każdego breakpointu
Dodaj interakcje i animacje używając panelu interakcji
Przetestuj responsywność w oknie podglądu
Opublikuj stronę za pomocą przycisku „Publish”
(Opcjonalnie) Skonfiguruj własną domenę

W prezentacji pokazano również dwie nadchodzące funkcje:

Zintegrowany CMS – tworzenie kolekcji danych i mapowanie ich do elementów designu
Code Layers – możliwość wykorzystania React i Tailwind, z opcją generowania kodu z istniejącego designu

Figma Make – prototypowanie z mocą AI

Holly Lee zaprezentowała Figma Make – narzędzie wykorzystujące AI do przekształcania projektów Figmy w interaktywne prototypy.

„Z Figma Make możesz wyjść poza wyobrażanie sobie, jak Twój projekt powinien się czuć, i po prostu go doświadczyć” – powiedziała Lee podczas prezentacji.

Jak działa Make:

Kopiujesz design z Figmy do okna promptu Make
Opisujesz naturalnym językiem, jak prototyp powinien działać
AI (Claude 3.7) generuje kod, który realizuje te interakcje
Możesz dalej iterować przez dodatkowe prompty
Dla zaawansowanych modyfikacji dostępne są narzędzia Point and Edit oraz Point and Prompt

Przykłady zastosowań Figma Make zaprezentowane podczas Config:

Aplikacja rowerowa z wizualizacją trasy i wysokości terenu
Wyszukiwarka klinik z integracją z mapami
Interaktywne wizualizacje 3D z właściwościami materiałów
Prosta gra 3D z immersyjnym światem
Aplikacja wykorzystująca śledzenie ruchów dłoni

Field dodał, że Make jest we wczesnym stadium rozwoju i wyniki mogą być „niedeterministyczne”, ale narzędzie będzie szybko ulepszane.

Figma Buzz – tworzenie materiałów marketingowych bez stresu

Damian i Lauren zaprezentowali Figma Buzz – narzędzie ułatwiające tworzenie materiałów marketingowych. Jest to odpowiedź na fakt, że w Figmie powstają miliony materiałów marketingowych i brandowych.

Główne cechy Buzz:

Uproszczony interfejs bazujący na Figmie, dostosowany dla nietechnicznych użytkowników
Dostęp do bibliotek brandingowych i szablonów
Możliwość edycji treści bezpośrednio lub przez dedykowany panel
Warianty umożliwiające szybką zmianę elementów wizualnych
Multi-edit do jednoczesnej edycji wielu assetów
Funkcja Bulk Create pozwalająca na masowe tworzenie materiałów z arkusza CSV

Checklist dla zespołu marketingowego korzystającego z Figma Buzz:

Poproś zespół designu o stworzenie szablonów w Figma Design
Otwórz Figma Buzz i wybierz odpowiedni szablon
Używaj panelu „Edit Content” do bezpiecznej modyfikacji treści
Wypróbuj różne warianty graficzne za pomocą funkcji „Swap”
Jeśli potrzebujesz stworzyć wiele podobnych materiałów, przygotuj arkusz CSV
Użyj funkcji „Bulk Create” i zmapuj kolumny do odpowiednich elementów designu
Sprawdź wygenerowane materiały i wprowadź ewentualne korekty

Figma Draw – 22 nowe funkcje wektorowe

Lauren Bedorek zaprezentowała Figma Draw – zestaw 22 nowych funkcji wektorowych. Jak wyjaśniła, zespół edytora zawsze skupiał się na potrzebach projektantów produktów, ale teraz postanowili „podnieść sufit” ekspresji wizualnej.

Najważniejsze nowości w Draw:

Możliwość jednoczesnej edycji wielu kształtów wektorowych
Narzędzie Shape Builder do łączenia i odejmowania kształtów
Selekcja lasso do precyzyjnego zaznaczania wierzchołków
Powtórzenia radialne (Radial Repeat) do tworzenia wzorów
Tekst na ścieżce (Text on Path)
Efekty tekstur dodające ziarnistość i organiczny wygląd
Progresywne rozmycie (Progressive Blur) z kontrolą gradientu
Pędzle i dynamiczne pociągnięcia
Wypełnienia wzorami
Zmienne szerokości obrysów (Variable Width Strokes)
Niestandardowe punkty obrotu (Custom Rotation Origin)

Podczas prezentacji Bedorek pokazała, jak te narzędzia mogą pomóc w tworzeniu różnorodnych stylów graficznych – od ilustracji przypominających rysunki odręczne, przez efekty druku, po mangę i style komiksowe.

Podsumowanie i dostępność

Figma podwoiła swoje portfolio produktów z czterech do ośmiu. Zgodnie z prezentacją Field, status wdrażania wygląda następująco:

Status wdrażania nowych funkcji:

Grid – dostępne od dnia konferencji dla wszystkich użytkowników Figma Design
Sites – beta dostępna dla użytkowników z pełnymi licencjami, wkrótce dla planu Starter
Make – będzie wdrażane w ciągu kilku tygodni, początkowo bezpłatne w okresie beta
Buzz – beta dostępna od dnia konferencji dla wszystkich użytkowników
Draw – dostępne od dnia konferencji dla wszystkich użytkowników

Figma wprowadza również nowy typ licencji – „content seat” – przeznaczony dla współpracowników zajmujących się tworzeniem treści w Buzz, Sites CMS i przyszłych produktach.

Jak stwierdził Field na zakończenie: „Dziesięć lat temu, wspólne projektowanie w przeglądarce uważano za radykalny pomysł. Dziś to norma. Jeśli przeniesiemy się o dekadę do przodu, lub nawet rok czy dwa, to co teraz wydaje się niemożliwe, stanie się nową normalnością.”

Ten artykuł jest częścią serii notatek z wartościowych webinarów.

Tag: Grid Layout

Podsumowanie Config 2025 – Grid, Sites, Make, Buzz i Draw #EN75