Persoonlijke projecten

Ontwerpers die met OutSystems werken, beschikken zelden over tools die de conventies van het platform standaard begrijpen. Dit project is een afsplitsing van Sil Bormüllers open-sourcefigma-cli, uitgebreid en opnieuw getraind specifiek voor OutSystems-ontwerpwerk bij PhoenixDX.

De fork voegt aangepaste componentprompts en context toe die zijn afgestemd op OutSystems, samen met ontwerptokenregels die zowel ODC als O11 omvatten. Door het te koppelen aan Claude Code krijgt u een CLI waarmee u Figma-ontwerpen en ontwerpsystemen kunt maken en beheren via natuurlijke taal, met praktische kennis van het platform waarvoor het daadwerkelijk wordt gebouwd in plaats van generieke webconventies.

Het is een project in ontwikkeling, gevormd door het dagelijkse ontwerpwerk bij een OutSystems-partnerbedrijf. Het doel is een workflow waarbij de tooling al de taal spreekt, zodat ontwerpers minder tijd kwijt zijn aan het vertalen tussen Figma en OutSystems bij elk project.

Het samenstellen van dit portfolio kwam voort uit een frustratie over oplossingen die net hun werk doen. Ik wilde iets dat echt interactief was in plaats van weer een kant-en-klaar product, dus elk onderdeel is zo ontworpen dat het reageert, of dat nu op bewegingen van de gebruiker is of op simpele nieuwsgierigheid.

De stack, Next.js 15 en Framer Motion, gaf me de prestaties die ik nodig had, inclusief naadloze meertalige ondersteuning dankzij de DeepL API. Ik heb AI gedurende het hele proces als een volwaardige medewerker behandeld, met behulp van de Google Antigravity IDE en gestructureerde "Agent Directives" om de vervelende taken van het genereren van bestanden en het coördineren van mapping te automatiseren. Daardoor had ik de handen vrij om me te concentreren op de UX-beslissingen die er echt toe doen.

Als ontwerper bij een OutSystems-partnerbedrijf liep ik steeds tegen hetzelfde probleem aan: Figma-variabelen en OutSystems CSS raakten uit synchronisatie door omslachtige handmatige overdrachten. Daarom heb ik een plug-in gebouwd om dit te verhelpen. Ontwerptokens stromen nu rechtstreeks van Figma naar OutSystems Developer Cloud via een beveiligde server-naar-server REST API, waardoor Figma de enige bron van waarheid is in plaats van een startpunt dat stilletjes stroomafwaarts opnieuw wordt geïnterpreteerd.

AI-tools maakten de meer complexe technische problemen beter aanpakbaar. Om door de strikte cloudarchitectuur van ODC te navigeren, zoals CORS-beperkingen en JSON-serialisatie, was traditioneel een full-stackteam nodig. Door voortdurend samen te werken met AI-agenten, kon ik snel door die hindernissen heen werken en iets opleveren dat klaar was voor productie. Voor mij is het een goed bewijs dat ontwerpers niet hoeven te stoppen bij de overdrachtsgrens.

Werken met grote pictogrambibliotheken wordt al snel vervelend. Rommelige laagstructuren, verkeerd uitgelijnde vectoren en het handmatige werk om formaten aan variabelen te koppelen, leidden me steeds weer af van de daadwerkelijke ontwerpbeslissingen. Simplify Icons is ontstaan uit die frustratie en is ontwikkeld om het repetitieve opschoonwerk te doen, zodat ik dat niet hoef te doen.

Wat ik leuk vond aan dit project was hoe het tot stand kwam. Door mijn kennis van ontwerpsystemen te combineren met AI-tools in de Antigravity IDE kon ik echt complexe vereisten aanpakken, zoals recursieve laagafvlakking, strikte variabele scoping en WCAG-conforme UI, zonder dat ik hoefde te vertragen en over te schakelen naar de volledige engineeringmodus. Wat weken had kunnen duren, was in een fractie van de tijd klaar. Het is nu een betrouwbaar onderdeel van mijn workflow geworden en een herinnering dat ontwerpers die bereid zijn hun eigen tools te bouwen, niet hoeven te wachten tot iemand anders hun problemen oplost.