Blog
Find out what we’re up to at Obra Studio. Here you can learn about UX/UI, product design, product management and front-end development. Stay up to date by subscribing to our newsletter or RSS feed.
Obra Icons is now open source
We explain the reasoning behind making our Obra Icons set open source.
Obra shadcn/ui kit public beta officially released
We released the public beta of our shadcn/ui kit, along with the two official colors and icons add-on.
The work behind designing the Obra shadcn/ui Figma library
We talk about some of the design decisions behind the Obra shadcn/ui library.
Why design a shadcn/ui Figma library?
We talk about why we're creating an open source and free shadcn/ui library for Figma.
What is shadcn/ui?
We'll be releasing a free and open source shadcn/ui kit for Figma soon. But... what is shadcn?
My top 7 Figma plugins
Guide to designing interfaces with AI: now directly on this website
We published our guide to designing interfaces with AI straight on our website.
Who moved my (virtual) cheese?
Musings on redesigning software, user's mental models and guidelines on what to do when redesigning.
Updated design services
Three months into the company, we're revised our offering. In this post we discuss our updated design services.
A guide to designing interfaces with AI
We wrote a free guide to designing interfaces with AI. We are using these techniques get to better prototypes for validation faster.
We're live
We finally put the new Obra website live.
Our logo design process
A client might come to us with the question to design a logo; but in our minds, it’s the start of a larger branding process.
HTML prototyping with AI
The last two workdays were spent using a combination of Claude, Figma, Cursor, and Wispr Flow to work on an HTML prototype.
User interface wireframing with AI and speech dictation
I’ve used a new technique that I’ve called prompt wireframing where I use a combination of tools to get the job done.
The vast majority of design systems work is busywork
Obra icons: Figma plugin
High-end fonts included with macOS
Converting an .mp4 to a .gif using ffmpeg
Overindexing on the system
Type variables in Figma – variable font workaround
The case for design engineers
Three types of product designs
Interoperability dreams
UX gone wrong
Success through openness in digital design
Pug advanced mixins
TextCutter plugin for Figma
Accessible, clickable table rows
I’ve never regretted doing user research
Avoiding Figma file complexity
What’s changed in Bootstrap 5?
Grouping things in Svelte
Should you use scoped styling?
Three more tips for enterprise UI design
Write less, do more with Svelte
Why you’ll probably regret using Tailwind
Five UI design tips for enterprise software
Thoughts on Tailwind CSS
Getting productive by using the right Figma plugins
Design work doesn’t fit in a sprint planning
Figma plugin shortcuts
Eight lessons from creating a design system
UX design has never been just for designers
Our deliverable sometimes makes us obsolete (and that’s okay)
Thoughts on Bootstrap 4
Overthinking BEM
The Web as a UI implementation layer
It’s all about the software quality
The 10 commandments of good form design on the web
Learning to love BEM
How we document user interfaces