jmnkie
AAlokai
•Created by Puffy Cheeks on 7/12/2023 in #🙋｜general-help
What's the implication of using/ not using Storefront UI components in the Figma design?
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.
5 replies