Un prodotto e il suo UI kit, Nomi delle Varianti, Differenze tra Button e Link
⭐️ HEADLINES
Costruire un prodotto e un kit UI, insieme
![photo-1541462608143-67571c6738dd 1.png photo-1541462608143-67571c6738dd 1.png](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F66cc888d-1851-4631-b058-5497ce5c7647_900x600.png)
Le due cose devono andare di pari passo. In questo interessante — e lungo — post pubblicato sul blog zero added sugar si analizzano tutti quegli aspetti pratici del veder crescere una libreria mentre si lavora al prodotto.
Dare un nome alle varianti
![https---bucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws 1.png https---bucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws 1.png](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fec00011d-65f4-4ff1-a089-95463fe09cd4_1068x600.png)
Se non hai familiarità con le varianti, sono una funzionalità di Figma per trasformare componenti diversi ma correlati tra loro in un unico componente con opzioni selezionabili.
Più opzioni, più problemi: come definisco il nome di una variante? Come le organizzo in modo uniforme su componenti differenti.
Nella numero #06 della sua newsletter Joey Banks — designer@Twitter che si occupa di Design System — ci spiega come procedere per risolvere problemi di naming e organizzazione
Cancel — è un button o un link?
![1*ebQtuF2E40_f0ePj0O6IQA.png 1*ebQtuF2E40_f0ePj0O6IQA.png](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F24efa615-88a2-4e13-aa6d-c2f76d315fd9_1400x1050.png)
In questo dettagliatissimo articolo, Karim Maasen per UX Collective esamina le best practices di UX in merito a come differenziare le azioni dalla semplice navigazione.
🧰 TOOLS
Pika — Per creare velocemente screenshots e mockups nel browser
MagentaA11y — Una checklist dedicata all’accessibilità - genera automaticamente test per componenti Web, iOS e Android
Design System Checklist — Una checklist open source per aiutarti a pianificare e costruire un Design System