Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
From Figma to Code: Dev Mode, Auto Layout to Flexbox, Variables to Tokens and AI-Assisted Handoff with the Figma MCP Server
Moving from Figma to code means carrying intent, not numbers: Auto Layout's FILL and HUG map to Flexbox, Variables to DTCG tokens, and design components to code components through Code Connect. We convert Bookstore's cart bar from Auto Layout JSON to CSS, measure copied pixels breaking at 768 pixels and in dark mode, catch drift between Figma variables and tokens, and describe the Figma MCP server's plan conditions from the official documentation.
What Is a Design System? Design Tokens (DTCG 2025.10), Component Libraries and Documentation
A design system is made of tokens, components, usage rules and governance, and tokens split into primitive, semantic and component layers. We move Bookstore's hand-written tokens.css into DTCG 2025.10 JSON files and a resolver for light/dark and reduced motion, generate CSS and Tailwind output with Terrazzo, and measure that 100 of 101 variables resolve exactly the same in Chromium.
Spacing, Layout Grids and Alignment: a 4/8 Spacing System, Whitespace and Responsive Grids
A consistent interface takes its spacing from a limited scale of multiples of 4 and 8, and keeps the space inside a group smaller than the space between groups. In Bookstore's catalogue we measure 12 arbitrary spacing values, card padding wider than the gap between cards and 19 borders, fix them with spacing tokens, a single left edge, background tone and a content-out auto-fill grid, compare it with a 12-column grid and add a compact density.