What's the implication of using/ not using Storefront UI components in the Figma design?
I am discussing with my UIUX designer about the use of Storefront UI 2 components in the design in Figma. At our stage of the design (wireframing), how much of these components/ how essential is it to incorporate these components into Figma? My view is it is essential, but I could be wrong. Its the first time my designer comes across VSF/ SFUI.
I mentioned to her- Vue Storefront provides these components in a Figma file that can be integrated into the design. I've asked the designer at the beginning to incorporate these customizable blocks/ components for speed of implementation/ accessibility down the road. She said that they originally followed the guidelines, with a divider, carousel, arrows, box, and footer, but said that as the needs changed, she customized the design to better meet the requirements.
I said that Storefront UI are customizable components that's done within the Vue Storefront framework for a few benefits- load speed optimization, speed of implementation for the developer, US WCAG accessibility requirements met. I asked for clarifications on what customization means- that if she is taking the components/ layouts/ blocks/ themes/ style and customizing them, its ok. If she is starting from scratch or using non-Storefront UI components, I believe it will mean the developer will have a harder time implementing the design and have to re-do some of the work that you guys did with the SFUI components. Storefront UI blocks also meet US WCAG accessibility requirements. If we aren't using Storefront UI blocks, then I need to have separate WCAG reviews, which is unnecessary if we just use Storefront UI blocks.
4 Replies
She said that as we progressed with the design (we are now on the main landing page), we made significant changes to the design, that it no longer conforms to the Storefront UI guidelines, footer, product cards. My understanding about the Storefront UI kit is that its less so about the design, and isn't a set of guidelines, but more blocks/ components that can be incorporated in a specific design. And that the live stores built with Vue Storefront https://vuestorefront.io/live-projects has projects that doesn't look substantially different in structure than ours, including the footer and product cards, such as in https://www.focuscamera.com
What's the right way to think about our question? Should we start the design/ layout with the SFUI figma file and use everything there is to use, and spend time customizing it (my view), or does it not matter, or the design look necessitates that we veers away from using SFUI components (her view). For context, I am not a dev, and neither is she.
Thanks all especially to those who has done this before.
Vue Storefront Live Projects | Vue Storefront
Looking for showcase examples of Vue Storefront? Explore a vast array of live projects run with a world-class Frontend as a Service.
Focus Camera
Camera Store | Deals and Newest Cameras
The best cameras for photography, video cameras, camera lenses, and more at the Focus Camera Store. Free shipping and financing are available.
Hi @puffycheeks. 👋
In terms of your question about starting with the SFUI Figma file, it can be a good starting point, especially if you're planning to use Vue Storefront for development. It can provide a foundation that you can then build upon and customize to fit your design. However, it's not a requirement, and the final decision should be based on what works best for your specific project and team.
Remember, the goal is to create a design that provides a good user experience, meets your business needs, and can be efficiently implemented by your development team. Whether you achieve that using SFUI components, custom components, or a mix of both is up to you and your team.
Hi @puffycheeks. , I'm a product designer here, so I'll try to answer the question from a designer's perspective.
First of all, everything you wrote is on point. Using SFUI components/blocks is beneficial because they include essential logic, saving us from reinventing the wheel. They're performance-tested, WCAG compliant, etc.
In essence, each component can be customized individually because they’re not dependent on each other. The more unique changes in the appearance of a single component, the more work it will require from the developer. In extreme cases, the developer will have to style each component from scratch, but they can still leverage the component's underlying logic, so there is still some benefit.
When creating a custom design in Figma based on SFUI:
1. First and foremost, I wouldn’t forgot the possibilities offered by Tailwind. Some knowledge in this area is beneficial for designer.
2. I'd utilize the global styles defined in Figma (colors, typography, spacing, radii, shadows) by modifying their values or adding new styles if needed. These styles are referenced in the tailwind.config file and are used by all components. Removing them would mean restyling each component from scratch.
3a. If I planned to use SFUI blocks in layout, I’d rather try to modify the designed components on which the blocks are based.
3b. If I were creating layouts from scratch, I’d use our components/blocks as references to speed up the design process and ensure that I don't design components that are not covered in the code.
Thank you, this is exactly what i am looking for- a detailed assessment of the tradeoff and alternatives. really appreciate the insight!