Componenten nesten in Figma

0
19

Voor de afgelopen paar weken, ik heb het opbouwen van onze UI Kit bij Gusto, waar ik werk, en dit is een Figma document met al onze design patterns en onderdelen, zodat ontwerpers op ons team kunnen hop in, te gaan winkelen voor een component die ze nodig hebben, en dan terug om te werken aan het probleem dat ze proberen op te lossen.

Er is een paar dingen die ik heb geleerd sinds ik begon. Ten eerste, de bouw van een UI Kit is zeer delicaat werk en duurt een hele lange tijd (hoewel het gebeurt zeer bevredigend de hele tijd). Maar, belangrijker nog, het insluiten van Figma onderdelen binnen andere onderdelen is een soort van magie.

Hier is waarom.

Ten eerste, het is belangrijk om op te merken die ik heb geprobeerd te breken met onze onderdelen tot in het kleinste, kleinste brokken. Dus, bijvoorbeeld, onze Broodkruimels, Tabbladen en voortgangsbalk componenten zijn allen van elkaar gescheiden en ik heb gedumpt ze allemaal in een pagina met de Symbolen.

Hier is een voorbeeld van hoe ik ben begonnen met het bouwen van ons formulier elementen:

Van wat ik kan vertellen, dit is hoe veel van een UI Kits zijn ontworpen — is er een welkom-pagina waarin wordt uitgelegd wat in dit document is en hoe het te gebruiken, er is een pagina met de symbolen die het ontwerp van systemen, mensen zullen beweren dat heeft alles van de knoppen te vormen binnen als symbolen of onderdelen daarvan; en dan is er meestal een andere pagina met voorbeelden van deze symbolen die staan voor de uiteindelijke toepassing.

Shopify het ontwerp van het systeem, Polaris, heeft ook deze met hun Schets bestand, maar zo veel van de voorbeelden die ik heb gezien van andere grote teams:

Maar hoe dan ook, terug te gaan naar mijn ontwerp in Figma — merken hieronder een slash (/) wordt gebruikt in de naam van ProgressBar/Twee en ProgressBar/Drie onderdelen.

Nou, dat is Figma ‘ s naamgevingsconventie voor het identificeren van Gevallen. Wat dit betekent is dat wanneer een ontwerper sleept in de ProgressBar onderdeel van de UI Kit, ze kunnen schakelen tussen de verschillende opties, zoals dit:

Dat is handig! Maar zodra ik brak onze UI in deze kleine componenten, begon ik me af te vragen hoe ik het zou kunnen combineren deze stukken samen om alles nog makkelijker voor ons design team. Ik besefte al snel dat het in onze app hebben we de navigatie-items, zoals paneermeel of progress bars, maar ze hebben altijd een titel aan verbonden. Een keer dacht ik dat, ben ik begonnen met een reeks nieuwe componenten genoemd Kop/Standaard, Koptekst/Paneermeel, Koptekst/ProgressBar, enz., die hebben al deze onderdelen ingebed in hen.

Zo, nu als een ontwerper sleept in de Kop-component in hun modellen, kunnen ze het volgende doen:

We schakelen tussen de verschillende Kop gevallen en dat lijkt niet veel, maar toch. Maar! Aangezien we de nesten onderdelen binnen onze Kop component, kunnen ontwerpers sprong naar beneden in de subonderdelen, zoals ProgressBar en bijwerken, ook:

Hoe netjes is dat? En nogmaals, dit ziet er niet bijzonder nuttig gewoon nog niet, maar het nesten van onderdelen binnen de grotere componenten betekent dat je kunt beginnen te gebruiken in slimme manieren.

Waar dit interessant is hier: bij Gusto, we hebben twee verschillende Interfaces voor onze types van klanten. We hebben de admins dat voor het uitvoeren van de loonadministratie en vervolgens hun werknemers toegang kunnen krijgen tot hun account om te zien hoeveel ze hebben betaald. Er is verschillende navigatie en mogelijkheden voor beide, dus heb ik twee onderdelen: Frame/Admin en Frame/Werknemer.

Deze twee onderdelen in de sidebar en de navigatie-items, maar worden vervolgens geplaatst in een afzonderlijke component Lay-out/Standaard waar we onze Kop component. Maar aangezien deze componenten zijn gevallen en geneste samen, kunnen we beginnen te klik-klak bits van de UI samen met de precieze interface die we willen.

Nu, wanneer ontwerpers de noodzaak om te schakelen tussen de verschillende Ui ‘ s, kunnen ze gebruik maken van deze geneste onderdelen en exemplaren om te schakelen tussen hen super snel. Ik ben pas net begonnen met het experimenteren met deze, maar het idee is dat door het gebruik van deze geneste componenten geef je mensen een manier om te schakelen tussen de verschillende varianten binnen hen, terwijl ook het verstrekken van een mooie API voor grotere lay-outs.

Als u gebruikmaakt van instanties in Figma, Schets, of een ander design tool — laat het me weten! Ik ben voortdurend op zoek naar verbetering dingen hier, maar ik denk dat dit zeker een goed begin.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de social sharing links boven, beveiliging en back-ups, Markdown ondersteuning, site search, het reactieformulier, positionering, sociale netwerk-verbindingen, en meer!