Antall varianter på komponenter

[Stakset]

Det blir i overkant mange varianter på enkelte komponenter. Se vedlagt bilde. Trenger man muligheten til å slå av label? Og hva er tanken med ikoner?

Kan ikke input komme med label og hjelpetekst? Så kan man heller slå av hjelpetekst hvis det ikke skal benyttes.

Vil gjerne ha innspill fra andre designere også :)

[piofinn]

Er ikke designer, men kommer med innspill likevel 🤷‍♂️
tl;dr: Det er fint med muligheter så lenge de stemmer overens med funksjonaliteten til komponenten, men det gjør de kanskje ikke her.

Jeg tenker at antallet i seg selv ikke er problematisk her. Noen av komponentene våre har mange egenskaper som kan endres, og da kan det bli en del "brytere". Det er fint om valgene man har i Figma og i kode speiler hverandre ganske godt! Noen ting som er "automatiske" i kode må man ha brytere for i Figma, som dark mode og states, og noen ting i kode er spesifikke for semantikk/UU. Men her burde det være så nærme en-til-en som mulig. Husk at utviklerne får se en liste over props når de ser på en komponent i skissene! Det som står der burde være relevant for dem når de skal implementere i kode:

Det som kanskje er litt rart her er hva noen av valgene er. Så vidt jeg kan se blir Input-komponenten brukt til litt av hvert i Figma i dag som den kanskje ikke burde bli brukt til, som f.eks. å bygge opp Select. Dermed får man noen valg her som kanskje ikke er relevante for vanlig bruk, som f.eks. "Icon Left". "Icon Right" kunne kanskje ha hett "Action" for å bedre signalisere hva intensjonen er og hva det heter i kode? "Text" kan med fordel hete "Value" (eller "text value" hvis det er for vagt), igjen for å speile kode. Også helt enig i at hjelpetekst burde være med og kunne skrus av/modifiseres. Savner også et valg for placeholdertekst, som kanskje kunne vært i stedet for "Show Text"?

Tenker at alle komponenter bør ha valg for Figma-spesifikke ting som er automatisk i kode, f.eks.:

• Screen: Mobile/Desktop
• Dark Mode: av/på
• Evt. varianter for states (hover, active, etc.)

I tillegg bør de ha valg som speiler valg i kode, inkludert noen som er like for alle. For TextInput kan det se omtrent sånn ut:

• Density: Comfortable (eller hva vi vil det skal hete)/Compact
• Label: [tekst]
• Error: av/på
• Error label text: [tekst] (valget vises når error er på)
• Help label: av/på
• Help label text: [tekst] (valget vises når help label er på)
• Action: av/på
• Action icon: [komponent] (valget vises når action er på)
• Placeholder: av/på
• Placeholder text: [tekst] (valget vises når placeholder er på)
• Input value: [tekst]

Det er en lang liste, men i vanlig bruk vil ofte bare halvparten av dem vises (de som er uthevet). Det er nok noen tekniske utfordringer i Figma som kanskje hindrer oss fra å få til akkurat det jeg skisser her, men noe av det kan nok implementeres hvis folk synes det virker fornuftig 😊