Dima Belyaev

Dima Belyaev

@blvdmitry.me

Building reshaped.so 🚀 Staff Engineer at Shopify

1.7K followers 137 following568 posts

When starting Reshaped, having a paid license kept me going but also felt wrong sometimes. I wanted to give back more to the community. After 5 years – it is finally happening. Reshaped React and Figma libraries are now open-source. reshaped.so/blog/reshape... Get the links below ✨

reshaped.soReshaped is now open-source - ReshapedAfter five years of closed-source, Reshaped is finally open for all – both in React and Figma.

View full thread

Figma library is published to the Figma community. It feels great to be able to share more behind the scenes for it now as well, especially when it comes to the new Figma features adoption and sharing best practices for large design systems 🫰 www.figma.com/community/fi...

figma.comReshaped Design System v3.7 | FigmaReshaped is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, comp...

I believe not so many libraries go open-source after so many years staying behind a paywall. I appreciate everyone who will repost this release and hope to get it in front of more people working on their own design systems or looking for libraries for their products ❤️

When starting Reshaped, having a paid license kept me going but also felt wrong sometimes. I wanted to give back more to the community. After 5 years – it is finally happening. Reshaped React and Figma libraries are now open-source. reshaped.so/blog/reshape... Get the links below ✨

reshaped.soReshaped is now open-source - ReshapedAfter five years of closed-source, Reshaped is finally open for all – both in React and Figma.

All source code is available on GitHub. I would be happy to see more people explore the code and the contributions are always welcome. And don't forget to give it a star ⭐ github.com/reshaped-ui/...

github.comGitHub - reshaped-ui/reshaped: Professionally crafted React & Figma components for building beautiful products or starting your own design systemProfessionally crafted React & Figma components for building beautiful products or starting your own design system - reshaped-ui/reshaped

Feels like most of the communities Im in are primarily active on Twitter now and posting in both places at the same time feels too much like work, so find me there for now 🥲

Haven't realized this before but you can backtrack by one element in css with :has

Reshaped v3.7 is out today with a lot of accessibility improvements, new ActionBar variants, flexible FileUpload triggers and much more ✨ Find all the changes in our release notes: reshaped.so/docs/changelog

Having fun with another small feature after a queue of accessibility improvements: turning ActionBar into an actual action bar that can be positioned and toggled ✨

I often see engineers getting surprised by this but tabs navigation should be arrow based, similar to radio buttons. So keyboard / screen reader users don't have to go through all the tab items before getting to the content 👀

Got toasts with actions? Make sure they're included in the tab order and don't hide the toast while user focus is inside it ✨

I guess this becomes a month of accessibility tips while I'm finishing the review of all Reshaped components ✨ If you're implementing focus trap for your components, remember that nothing prevents them from being nested and you need to restore the focus all the way back 👀

Another accessibility detail (more common to handle) – make sure to have a single focusable date in calendars but the default should be last focused date > selected date > today > first date of the month

Easy to miss a11y detail: if you remove DOM elements while they're focused – move the focus to another relevant element in the same group ✨

Not a fan of horror/zombies but that was quite a ride. Feels good to be able to complete the whole thing just now. Each award this game got was absolutely deserved ✨

Today is my first day at Shopify. It's strange setting everything up from scratch and learning new habits, while at the same time I'm very excited about it. After 8 years working in the same company, in the same team – it feels good to switch topics. Here goes nothing ✨

born to LMFAO, forced to LOL

siddharth ☻@sid.st

born to WTF, forced to LGTM

Prepared and sent the content outline for the dropdown talk, fingers crossed now for it to get selected 🤞

hinking a which calendar view to use 🤔

Reshaped v3.6 is out and I myself haven't expected it to ship with all of this✨ reshaped.so/docs/changelog 🎨 OKLCH support in themes 🔄 ToggleButton component 💨 Headless Flyout utility 📊 Design systems comparison Find more details below ↓

View full thread

One of the common questions we get is how does Reshaped compare to other design systems and component libraries on the market. So we tried to come up with a honest comparison of a few common options. You can find the full comparison here: reshaped.so/compare

Reshaped v3.6 comes with 30+ other improvements 🔥 Find them all in our changelog: reshaped.so/docs/changelog

reshaped.soReleases - Reshaped

Reshaped v3.6 is out and I myself haven't expected it to ship with all of this✨ reshaped.so/docs/changelog 🎨 OKLCH support in themes 🔄 ToggleButton component 💨 Headless Flyout utility 📊 Design systems comparison Find more details below ↓

OKLCH theming is an amazing addition for automatic color generation since it makes the output more vibrant and visually aligned. Especially when it comes to edge cases like yellow colors. In case you're still on older browser versions, we still support hex output too 🟡

New ToggleButton and ToggleButtonGroup components were requested by the community some time ago and they're such a nice addition to the already existing Button and ButtonGroup components, managing the state and a11y for you 🫰

After 7.5 years, today is my last day at Booking.com. When I was joining, I mentioned my past design system experience and interviewers told me that's not something they practice in the company 👇

View full thread

That's also a place where I truly learned how design systems work at scale and how much work goes into accessibility, community support and documentation. I learned to love all these topics and it feels almost effortless now when working on anything else.

Time to take a short break, recharge and move on to something new 👀

After 7.5 years, today is my last day at Booking.com. When I was joining, I mentioned my past design system experience and interviewers told me that's not something they practice in the company 👇

Fast forward 7 years, we have a team full of passionate people, maintaining the design system and tooling across 5 platforms. I had a chance to drive where this goes through multiple generations of our libraries. It was a lot of 0->1 shipping and being around to learn from your mistakes years later.

We didn't share much publicly about what we were building but we had our 2 shots to present at Figma Config where people were mind-blown by our tooling. And I'm excited to see where the team takes it next 🤯

New tiny win with 3 Reshaped source code sales this month and a new release dropping this week ✨

Getting closer to the next Reshaped minor release. It's been more than a month and while I had some time off – I'm quite surprised with how many improvements made it into the release. Shipping on Monday once all documentation updates are done 🔥

Adding a way to extract custom resizable handles into standalone reusable components that can react to its status ✨

Finally adding ToggleButton and ToggleButtonGroup 👀

A bit more tweaking OKLCH warning colors generation. Top is hex based color gen, bottom is OKLCH with a hue tweaked to lean a bit into the orange 🍊

How 10x design looks like

✨

Done with the first version of the content, please don't make me add another library 😅

Back to the homework 😅

Dima Belyaev@blvdmitry.me

Added pedal to the mix ✨

Implementing a template for comparing component library features since that's probably one of the most common questions teams are asking me. Starting with creating individual pages to compare libraries 1-to-1 but would it also be useful to be able to compare multiple of them together? 👀

What I really hope for when I'm thinking of Duolingo updating their icon to liquid glass 🥲

Andorra 📌

Preparing for when I’m back. Only one surf lesson today so spent some time comparing all available components and utilities across Reshaped and 5 other component libraries. There are 5 screens like this 🥲

Peniche 📌

Porto 📌

Added pedal to the mix ✨

Dima Belyaev@blvdmitry.me

My new project is to chill a bit every morning before work. Started learning piano, took a few lessons and started practicing beginner arrangements. This is probably one of the most popular beginner songs but still feels so satisfying to play ✨

Releasing the last canary for now and traveling for the next 2 weeks 🔥

Testing some edge cases with autocomplete wrapping while using end slots at the same time ✨

Wish me luck 😅

Living in the future? Reshaped lets you switch to using APCA for color contrast, even for the themes generated in runtime ✨