Harjoitus: Erilaisten painikkeiden luominen Figmassa

Käydään läpi joitakin keskeisiä oppeja koko osiosta:

1. Pudotusvalikko-, valintaruutu-, valintanappi- ja arviointipainikkeet osoittavat, miten pienillä suunnittelumuutoksilla voidaan mukauttaa painikkeita erilaisiin käyttöliittymä- ja käyttökokemustarpeisiin;
2. Uudelleenkäytettävät painiketyypit säästävät aikaa tulevissa projekteissa ja ylläpitävät suunnittelun johdonmukaisuutta;
3. Komponenttivariantit helpottavat useiden painiketilojen (esim. oletus, hover, aktiivinen) hallintaa. Ominaisuuksia kuten ikonit, teksti ja tilat voidaan mukauttaa ilman komponenttien monistamista, mikä vähentää sekavuutta. Ominaisuudet kuten "instance swap property" ja "Boolean properties" mahdollistavat elementtien helpon päälle/pois kytkemisen tai ikonien vaihtamisen, mikä vähentää manuaalisen muokkauksen tarvetta;
4. Auto Layout varmistaa tasaisen välistyksen ja kohdistuksen painikkeita tai muita suunnitteluelementtejä järjestettäessä. Se yksinkertaistaa painikkeiden responsiivisuuden hallintaa koon tai muutosten suhteen;
5. Komponenttien ja varianttien hyvä nimeäminen ja organisointi ehkäisee sekaannusta, erityisesti suurissa projekteissa. Elementtien ryhmittely kehykseen tai komponentteihin helpottaa navigointia ja uudelleenkäyttöä.

Luo "Toggle"-kytkinpainike toimivalla prototyypillä, joka muistuttaa alla olevaa kuvaa. Kiinnitä huomiota yhdistämisnuoliin ja vuorovaikutusasetuksiin.