Figma novinky z Config 2023: Proměnné, podpora vývojářů a více AI funkcí

Design Ondřej Dúbravčík

Minulý týden proběhla v San Franciscu konference Config 2023, tedy konference představující nové a vylepšené funkce grafického nástroje Figma. A my jsme si tuto událost nemohli nechat ujít, třebaže virtuálně.

A než se ponoříme do toho, co nám představili na výživné úvodní Keynote, musíme pochválit Keynote jako takovou. Její dramaturgie nás totiž nadchla. Byl to čerstvý závan starých dob technologických představení, které kdysi dělal Jobs a jeho Apple. Řečníci se střídali před živým publikem, byla na nich vidět lehká nervozita, ale o to přirozenější to bylo, publikum interagovalo a reagovalo, jak mělo, zkrátka, všechno si skvěle sedlo.
Nebyla to žádná umělohmotná robotická show, jako když prezentuje Tim Cook a jeho Melody Makers.

V úvodní přednášce se rychlým průletem odprezentovaly největší bomby velkého updatu Figmy. Byly rozděleny do tří logických úseků:

  1. Design tokeny
  2. Prototypování
  3. Podpora vývoje

Design tokeny a lokální proměnné

Hned ze začátku se Dylan Field, CEO Figmy, omluvil obecenstvu, že nativní podpora, po které všichni tak dlouho toužili, nebude.

Bude totiž něco lepšího. Takzvané lokální proměnné. To jsou designové tokeny na steroidech. Vylepšují ve všech ohledech nejen komponenty v design systémech, ale v podstatě všechny aspekty parametrů designu.


Dylan Field, CEO Figmy

Ony proměnné můžeme využívat v:

  • Themingu. Tvořit light a dark verze designu je odteď až směšně snadné..
  • Responzivním designu. Proměnné totiž nejsou jenom otázkou barev a velikostí fontů, ale mohou být použity nově i na rozměry prvků.
  • Překladech. A u rozměru to nekončí, dynamické mohou být i texty. Již není nutné používat pro nový překlad nový design a vše může být na jednom místě.

Přehlednější prototypování i složitých návrhů

Samotné prototypování ve Figmě je poměrně jednoduché. Jenže jakmile komponujete trochu složitější návrh, začíná to celé být dost nepřehledné. Jak řekli na stagi, někdy to podle těch tisíců vláken přes obrazovku vypadá, že se vám do návrhu naboural Spiderman…

A právě na tohle se ve Figmě zaměřili a celou situaci se pokusili dát zase dohromady. Celé prototypování zpřehlednili, a nejen to. K proměnným přidaným do prototypování přihodili podmínky. Člověk už tak nemusí řešit každý stav vlastní komponentou nebo screenem.


Hezky to ukázali třeba na košíku aplikace. Frontální útok na Axure.

Nativní podpora AI

S příchodem spousty nástrojů generovaných (nebo generujících za pomocí) AI se trh během posledních několika měsíců značně proměnil. A také Figma nám chce pomocí umělé inteligence zjednodušit práci.

AI ve Figmě zrychluje pracovní postup a pomáhá designérům vyjadřovat se vizuálně. Figma už nějakou chvíli využívá Chat GPT-3 pro generování designových nápadů na základě jednoduchého zadání, na konferenci v San Franciscu oznámila, že převzala Diagram, společnost, která se zaměřuje na vývoj nástrojů a funkcí, které propojují design a AI.

Po převzetí společnosti se očekává, že týmy Figmy a Diagramu spolu budou pracovat na rozšíření AI funkcí napříč celou platformou, což přinese ještě širší možnosti pro designéry než doposud. Figma totiž už teď disponuje téměř 100 vlastními pluginy poháněnými umělou inteligencí.

Vylepšený layout

Figma zlepšila automatické rozvržení, a to včetně schopnosti zalamování a nastavení maximální a minimální šířky a délky. Kromě toho vylepšuje výběr písma a aktualizuje prohlížeč souborů. Figma je tak zase ještě přehlednější, ještě intuitivnější a ještě jednodušší na používání, než kdy dřív.

Podpora vývojářů v podobě dev módu

Tato část je extrémní posun vpřed. Figma vždycky myslela spíš na designéry, zatímco vývojáři, tedy hlavní realizátoři zkomponovaného návrhu, zůstávali trochu stranou. A to byla škoda. Frontend vývojáři jsou s Figmou totiž úzce spjatí, a my v Cognito si myslíme, že dokonce stejně jako samotní designéři.

Konečně si to plně uvědomili i ve Figmě a přidali for dev mód. Ten přepne celé rozhraní tak, aby užitečné pro vývoj webu a poskytovalo zdroj vývojářům. Z Figmy se tak stává něco jiného. Vývojář vidí screen verzi, může si prohlédnout, co se změnilo, co přibylo. Figma mu navíc napovídá, jak komponenty integrovat do react a typescript skriptů. Přináší mu i nativní podporu Githubu, Storybooku nebo přímo VS Code IDE. V něm bylo představeno skvělé demo, které zobrazovalo Figma plátno, screeny a napovídání přímo v rozhraní VS Code.

Tyto integrace a dev tooly jsou totiž vyhlášením války Zeplinu. Jak ten se k tomu postaví a jestli zvládne stíhat rychlé vývojové tempo Figmy, je otázkou.

Podtrženo, sečteno, CEO a CTO Figmy toho během zhruba hodinové prezentace předvedli opravdu hodně. Kdo by chtěl vědět ještě víc, další přednášky z konference Config 2023 najdete TADY.

Co si dále přečíst