🎉 Our free, open source shadcn/ui kit reached 12,500 duplicates on Figma community. Check it out!

  1. Obra shadcn/ui kit: 1.0 released

    by Johan Ronsse

  2. Obra shadcn/ui kit milestone: over 10,000 duplicates

    by Johan Ronsse

    We share the latest updates to our Obra shadcn/ui kit, including theming, dark mode, variables for consistent spacing and border radii, and more.

  3. Meet Marina

    by Johan Ronsse

    Say hi to Marina, who will be helping with design work the coming months.

  4. Design systems: not our first rodeo

    by Johan Ronsse

    We look back at two design systems we’ve built, sharing our experience and skills with design systems.

  5. Shadcn/ui kit updates

    by Johan Ronsse

    We report on the progress of our shadcn/ui kit.

  6. AI has flipped software development

    by Johan Ronsse

    What happens when developers can move faster than designers?

  7. Apple Liquid Glass resources: update 2

    by Johan Ronsse

    A second set of resources and tips for using the Liquid Glass design language in design apps.

  8. Official Apple Liquid Glass resources

    by Johan Ronsse

    Our collection of resources to learn about using Apple's new design language, Liquid Glass.

  9. Choosing the right icon set for your project

    by Johan Ronsse

    We review five icon sets and their strengths.

  10. Obra Icons is now open source

    by Johan Ronsse

    We explain the reasoning behind making our Obra Icons set open source.

  11. Obra shadcn/ui kit public beta officially released

    by Johan Ronsse

    We released the public beta of our shadcn/ui kit, along with the two official colors and icons add-on.

  12. The work behind designing the Obra shadcn/ui Figma library

    by Johan Ronsse

    We talk about some of the design decisions behind the Obra shadcn/ui library.

  13. Why design a shadcn/ui Figma library?

    by Johan Ronsse

    We talk about why we're creating an open source and free shadcn/ui library for Figma.

  14. What is shadcn/ui?

    by Johan Ronsse

    We'll be releasing a free and open source shadcn/ui kit for Figma soon. But... what is shadcn?

  15. My top 7 Figma plugins

    by Johan Ronsse

  16. Guide to designing interfaces with AI: now directly on this website

    by Johan Ronsse

    We published our guide to designing interfaces with AI straight on our website.

  17. Who moved my (virtual) cheese?

    by Johan Ronsse

    Musings on redesigning software, user's mental models and guidelines on what to do when redesigning.

  18. Updated design services

    by Johan Ronsse

    Three months into the company, we're revised our offering. In this post we discuss our updated design services.

  19. A guide to designing interfaces with AI

    by Johan Ronsse

    We wrote a free guide to designing interfaces with AI. We are using these techniques get to better prototypes for validation faster.

  20. We're live

    by Johan Ronsse

    We finally put the new Obra website live.

  21. Our logo design process

    by Johan Ronsse

    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.

  22. HTML prototyping with AI

    by Johan Ronsse

    The last two workdays were spent using a combination of Claude, Figma, Cursor, and Wispr Flow to work on an HTML prototype.

  23. User interface wireframing with AI and speech dictation

    by Johan Ronsse

    I’ve used a new technique that I’ve called prompt wireframing where I use a combination of tools to get the job done.

  24. The vast majority of design systems work is busywork

    by Johan Ronsse

  25. Obra icons: Figma plugin

    by Johan Ronsse

  26. High-end fonts included with macOS

    by Johan Ronsse

  27. Converting an .mp4 to a .gif using ffmpeg

    by Johan Ronsse

  28. Overindexing on the system

    by Johan Ronsse

  29. Type variables in Figma – variable font workaround

    by Johan Ronsse

  30. The case for design engineers

    by Johan Ronsse

  31. Three types of product designs

    by Johan Ronsse

  32. Interoperability dreams

    by Johan Ronsse

  33. UX gone wrong

    by Johan Ronsse

  34. Success through openness in digital design

    by Johan Ronsse

  35. Pug advanced mixins

    by Johan Ronsse

  36. TextCutter plugin for Figma

    by Johan Ronsse

  37. Accessible, clickable table rows

    by Johan Ronsse

  38. I’ve never regretted doing user research

    by Johan Ronsse

  39. Avoiding Figma file complexity

    by Johan Ronsse

  40. What’s changed in Bootstrap 5?

    by Johan Ronsse

  41. Grouping things in Svelte

    by Johan Ronsse

  42. Should you use scoped styling?

    by Johan Ronsse

  43. Three more tips for enterprise UI design

    by Johan Ronsse

  44. Write less, do more with Svelte

    by Johan Ronsse

  45. Why you’ll probably regret using Tailwind

    by Johan Ronsse

  46. Five UI design tips for enterprise software

    by Johan Ronsse

  47. Thoughts on Tailwind CSS

    by Johan Ronsse

  48. Getting productive by using the right Figma plugins

    by Johan Ronsse

  49. Design work doesn’t fit in a sprint planning

    by Johan Ronsse

  50. Figma plugin shortcuts

    by Johan Ronsse

  51. Eight lessons from creating a design system

    by Johan Ronsse

  52. UX design has never been just for designers

    by Johan Ronsse

  53. Our deliverable sometimes makes us obsolete (and that’s okay)

    by Johan Ronsse

  54. Thoughts on Bootstrap 4

    by Johan Ronsse

  55. Overthinking BEM

    by Johan Ronsse

  56. The Web as a UI implementation layer

    by Johan Ronsse

  57. It’s all about the software quality

    by Johan Ronsse

  58. The 10 commandments of good form design on the web

    by Johan Ronsse

  59. Learning to love BEM

    by Johan Ronsse

  60. How we document user interfaces

    by Johan Ronsse