Hi, I'm Ana 👋
I'm a senior UI/UX designer and design technologist with 10 years of experience. I design product interfaces, data-heavy dashboards and brand systems, then build them in React and TypeScript so the design holds up in production.
Figma libraries, component standards and documentation for several enterprise brands at RG Pacific. Design tokens from Figma variables feed Tailwind CSS and the React component library, which cut the design-to-engineering cycle by 40%.
Brand identity and responsive website redesigns for 25+ enterprise clients, each starting with stakeholder workshops on strategy, success metrics and phasing. Improved flows and A/B testing raised conversion by 38% and engagement by 44%.
Redesigned data-visualization dashboards and parametric search at Supplyframe, used by 10M+ hardware engineers and buyers: data tables, interactive charts, advanced filters and inspection panels. Reusable React components cut time-to-task by 32%.
Design tokens only help if design and code read from the same source. Here's how I set up a pipeline where Figma variables become Tailwind theme values and React props, and what I learned about naming along the way.
The heart at the bottom of every article on this site is a tiny full-stack feature. Here's how it works, from the SQLite table and API route to optimistic updates and batched requests.
Springs make interfaces feel alive. Instead of picking a duration and an easing curve, you describe how something should move, and physics does the rest. Let's build an intuition for stiffness and damping with a live playground.
Data-heavy screens fail when every number shouts at once. A practical guide to hierarchy, tables, filters and progressive disclosure for dashboards that engineers and analysts use all day.
justify-content or align-items? Main axis or cross axis? If you still guess which property to use, this interactive guide will fix that for good.