Hi everyone, I’m almost done with my project thanks to you but I need you to fix some issues.
I have tons of overrides issues, here is a screenshot:
I don’t know how to fix them.
Thank you very much for your help!
Relevant links:
Hello @sendel,
I noticed that your project has quite a few breakpoints set up. In desktop-first projects (like this one), the usual approach is to add breakpoints only for smaller screens and to always keep at least one artboard for the Base variant.
For example, in your project you’d need to add a screen size of 4000+ px width (the Cinema preset) to create a Base variant artboard on a page:
The issues you’re seeing stem from most of the work being done while one of the screen variants was in recording mode.
You’re almost there! Overrides can be a pain if you share a bit more detail about the errors, I’m sure folks here can help you sort it out.
Thanks Sarah, it is what I’ve done, If you see I created a breakpoint for each screen Cinema, Desktop, Tablet and Mobile which are important.
But I still can’t erase those overrides issues.
Please help!
Hello @sendel ,
As we discussed, many of the changes that should have been made in the Base variant were applied to the varianted artboards, which is causing these errors. To clarify, fixing this isn’t something that can be done directly from the Studio.
I can help by editing the project bundle directly. Please note that I can’t guarantee all of your changes will be preserved. For example, I’ll move everything you applied in the varianted artboards into the Base variant. Some of those edits may rightfully belong to the variants, but since I’ll be doing a bulk move, they’ll all be shifted to the Base variant.
To stay on the safe side, I’ll publish your project before making these changes. Also in the mean time, please avoid making any edits to your project until I get back to you with confirmation that it has been fixed.
Thank you Sarah, I saved a copy of the project you can work on the main project I will not interfere until you finish.
Thanks a lot!
Hello @Sendel,
I’ve added a Cinema screen size so your project now has a Base artboard. I also completed the bulk transfer of varianted changes into Base. At this point, the Issues panel should only show a few remaining errors that weren’t picked up by the transfer.
The pages may look a bit disorganized right now, since many sections that were previously hidden in varianted artboards are now visible in the Base artboard. You’ll need to manually hide those sections.
As mentioned earlier, it wasn’t possible to preserve the varianted changes. However, the project is now in a much cleaner state since the changes are now in Base where they belong, so in most cases you’ll just need to adjust Visibility settings to restore the intended look.
A couple of guidelines to help prevent this in the future:
- Always work in the Base artboard, and only use varianted screen artboards to handle responsiveness.
- I noticed that you created separate copies of sections for different screen sizes and controlled their Visibility. That approach isn’t ideal. The recommended way to handle responsiveness is by adjusting Layout styles instead.
I would also suggest checking out the Responsiveness docs for a solid understanding of these guidelines.
Thank you Sarah, Oh… I’m a bit discouraged now to build again changes for each variant screen because each one has his own unique design, size text and so on.
Have you tried using our varianted tokens feature? You can create style tokens, and set a different value for each screen size. For example, you can create a textSize token from the Style Tokens panel, and set it to a larger size for, say, the Big Screen.
Also, you can change a horizontal stack into a vertical stack in mobile view.
The idea is to either use the above tips, or if you’d still like to build different sections for each screen size, you build them all in the base variant and show/hide them in the varianted artboards as needed.
1 Like