Web
Building sites that look the way you designed them.
Add auto layout in one keystroke
Select layers in Figma and press Shift + A to wrap them in an auto layout frame.
Figma
Browser-based interface design with real-time collaboration, components, variables and prototyping.
Variable fonts, explained for people who ship
One file, every weight and width in between. What variable fonts actually change for performance, responsive type and motion.
Set big nudge to your spacing unit
Change Figma's Shift + arrow nudge from 10 px to 8 px so every move lands on your grid.
A practical guide to motion easing
Linear motion looks mechanical because nothing in the world moves that way. How to pick curves and durations that feel physical.
FLUX
Family of image models from Black Forest Labs, with strong prompt following and openly available versions.
Penpot
Open-source design and prototyping tool built on web standards, which you can use online or self-host.
Colour systems that survive dark mode
Inverting your palette isn't a dark theme. Build colour as roles and tokens so both themes stay readable and on-brand.
Spline
Design interactive 3D scenes in the browser and embed them on websites without writing WebGL.
Flux Academy
Web design process, layout, typography and building sites in no-code tools.
Check hierarchy with the squint test
Blur your eyes at the layout. Whatever you still see first is what readers will see first.
Rive
Build interactive, state-driven animations that run in apps, games and websites from a tiny file.
Figma
Official feature walkthroughs, Config talks and tutorials on components, variables and prototyping.
Framer
Design and publish responsive websites visually, with animation, CMS and hosting built in.
DesignCourse
UI design and front-end development side by side, with frequent design critiques and live redesigns.
Grids are a decision, not a default
Twelve columns is a starting point, not a style. How to derive a grid from your content so layouts feel intentional.
Clean your SVGs before you ship them
Run exported SVGs through SVGO or SVGOMG to strip editor junk and shrink the file.
Recraft
Generates vector graphics and brand-consistent images, with style sets you can reuse across a project.
Scroll animation that helps instead of distracts
Scroll effects can guide attention or bury it. Rules for using pinning, parallax and reveals so the page still reads well.
Name layers the way developers will
Layer names like button/primary/hover become component and variant names. Your handoff gets easier.
Inkscape
Free, open-source vector editor for illustration, icons, diagrams and anything that should scale cleanly.