Germán Freixinós

@[email protected]
26 Followers
195 Following
208 Posts
Front-end Developer focused on UI, UX, Accessibility, Design Systems, and Web Standards.
Location: Murcia, Spain
«Y qué pequeños nos verán los que no volaron nunca» 🪁
Websitehttps://germanfrelo.dev
Blueskyhttps://bsky.app/profile/germanfrelo.dev
GitHubhttps://github.com/germanfrelo
Tags#A11y • #CSS 💜 • #DesignSystems • #Frontend • #UX • #WebStandards
Germán FreixinósOct 16

For those of you who implement Figma designs, do you know of any reliable plugins for exporting and converting Figma text styles into code, such as JSON or CSS? I see tons of plugins, but I'd like to know which ones are the most recommended by developers.

#figma #webdev #css #designtokens

Show threadGermán FreixinósAug 5, 2025
For now, he's got a "beautiful" collection of seven incorrect kits... Seven!!! 😅
Today is the 8th time he's called customer service. After some apologies and a bit of music on hold, they've told him that the kit that'll arrive in a few days will definitely be the right one. Will it? Place your bets!
Germán FreixinósMar 25, 2025

I'm trying to implement the animations of the following video using scroll-driven animations (scroll-driven-animations.style). I have the text part, but I am stuck with the images. Any hint would be appreciated 🙏.

Reduced test case: https://codepen.io/germanfrelo/pen/PwoBExL

Original web:

Scroll-Driven Animations — Reduced test case

...

Germán FreixinósDec 30, 2024
Which of these two options is more appropriate or correct for browsers that don't support the CSS light-dark() function?
#CSS
Germán FreixinósOct 28, 2024
Trying @astro for the first time! (better late than never 😅).
Germán FreixinósJul 29, 2024

Today I Learned that you can put a SVG icon in CSS and don't give up color inheritance, for example. Instead of using `background-image`, use `mask-image`(or its shorthand `mask`).

More info:
- https://frontendmasters.com/blog/mask-your-icons/
- https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Real example: icon arrows in external links at https://wordpress.org/themes/twentytwentyfour/.
Screenshoot:

#TIL #CSS #SVG

Making your SVG icons CSS masks instead of inline HTML or backgrounds has some benefits – Frontend Masters Boost

I’m a fan of just chucking SVG icons right into the HTML where you need them:This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too. This converter is handy. For […]