Ako sa buduje Figma Slides: Od hackathonu po milióny užívateľov

Figma Slides si za pomerne krátky čas od vydania získala u dizajnérov na celom svete obrovskú popularitu. Ako však tento produkt vznikal a aké výzvy stáli za jeho vytvorením? V tejto recenzii si podrobne priblížime proces, ktorý opísali dvaja poprední vývojári, Jonathan Kaufman a Noah Finer, z podcastu "The Pragmatic Engineer".

Kľúčové poznatky

• Figma Slides sa pôvodne začala ako projekt na hackathone a za necelý rok a pol sa rozrástla na významný produkt.
• Team najprv vyvinul grid view skôr ako single slide view kvôli unikátnym výzvam, ktoré prezentácia na neobmedzenom plátne priniesla.
• Vývoj prebiehal s využitím kombinácie C++ a Typescriptu, pričom bola kladená dôraz na jednotnosť zobrazenia naprieč rôznymi browsermi.
• "Vibe testing" - nový prístup k testovaniu, ktorý sa zameriava na subjektívne hodnotenie používateľskej skúsenosti.
• Unikátny testovací prístup so spustením všetkých flagov zapnutých aj vypnutých.
• Engineering crit sessions v spoločnosti Figma ponúkajú dynamickú platformu pre rýchlu spätnú väzbu.

Technológie za Figma Slides

Figma Slides využíva moderný technologický stack s dôrazom na flexibilitu a škálovateľnosť. Kľúčovým prvkom je využitie C++ pre renderovanie, ktoré sa následne zobrazuje prostredníctvom plátna v prehliadači. Týmto prístupom sa zabezpečuje rovnaký vzhľad v rôznych prehliadačoch, čo je pre dizajnérske nástroje kritické. Na druhej strane sa používajú Typescript a React pre front-endové prvky, ako sú panely a tlačidlá.

Prečo najprv Grid View?

Vývojári sa zamerali na vytvorenie gridového režimu ešte pred tvorbou single slide pohľadu z niekoľkých dôvodov. Gridový režim umožňuje dizajnérom vytvárať flexibilné a komplexné prezentácie, pričom sa značne zvyšuje náročnosť na UI z pohľadu organizácie a re-aranžovania jednotlivých prvkov. Snaha zachovať konzistentnosť a plynulosť zmeny medzi týmito dvoma režimami bola jedným z kľúčových výziev projektu.

Vibe Testing a iné inovačné prístupy

Osobitnou črtou testovania vo Figma je tzv. "vibe testing", kde sa kladie dôraz na emocionálny a estetický zážitok používateľov pri interakcii s UI. Táto metóda umožňuje získať cennú spätnú väzbu a identifikovať oblasti s potenciálom na zlepšenie, ktoré by inak zostali nepovšimnuté.

Ďalším zaujímavým prístupom je testovanie s všetkými flagmi zapnutými aj vypnutými. Tento prístup minimalizuje riziko neočakávaných regression chýb, ktoré by mohli spôsobiť výrazné problémy po odstránení konkrétnych feature flagov.

Engineering Crits: Rýchle a efektívne hodnotenie

Procesy engineering crits zahŕňajú použitie Fig Jam na rýchle a konštruktívne ohlasy od tímu prostredníctvom digitálnych náhľadov, komentárov a návrhov. Tento prístup umožňuje rýchlo a efektívne iterovať na návrhoch, čo je dôležité pri vývoji rýchlo sa meniacich produktov.

Odporúčania a zamyslenia

Figma Slides demonštruje, ako dokáže efektívne využitie modernej technológie, interdisciplinárneho prístupu a kreatívneho testovania viesť k vytvoreniu úspešného produktu, ktorý naplní potreby širokého spektra používateľov. Pre firmy, ktoré hľadajú inšpiráciu pri vývoji vlastných produktov, môžu byť práve tieto metódy dôležitým zdrojom poznatkov.

Doporučené čítanie

• Inside Figma's engineering culture
• Quality Assurance across the tech industry
• Shipping to production
• Design-first software engineering

Figma Slides ukazuje, že za úspešným produktom stoja nielen pokročilé technológie, ale aj inovácie v procesoch a testovaní. V dnešnom rýchlo meniacom sa technologickom prostredí sú práve takéto prístupy kľúčom k úspechu.

Približne 217 gCO₂ bolo uvľnených do atmosféry a na chladenie sa spotrebovalo 1.09 l vody za účelom vygenerovania tohoto článku.