Rajoitteet Figmassa: Responsiivisen Suunnittelun Helppous

Rajoitteet määrittävät, miten tasot reagoivat, kun niiden ylätason kehystä muutetaan, mahdollistaen responsiiviset suunnittelut eri näyttökokoihin ja laitteisiin. Kehyksen sisällä olevia objekteja kutsutaan lapsiobjekteiksi, kun taas kehys itse on ylätason kehys.

Rajoitteilla on vaaka- (x-akseli) ja pysty- (y-akseli) asetukset. Oletuksena objektit on sidottu ylä- ja vasempaan reunaan suhteessa ylätason kehykseen.

Vaakasuorat rajoitteet

• Vasen: pitää objektin vasemmalla puolella;
• Oikea: sijoittaa objektin oikean reunan mukaan;
• Vasen + Oikea: objektin koko muuttuu kehyksen mukana x-akselilla;
• Keskellä: pitää objektin keskitettynä vaakasuunnassa;
• Skaalaa: säätää objektin kokoa ja sijaintia suhteessa kehykseen.

Pystysuorat rajoitteet

• Ylä: sijoittaa objektin yläreunan mukaan;
• Ala: sijoittaa objektin alareunan mukaan;
• Ylä + Ala: objektin koko muuttuu kehyksen mukana y-akselilla;
• Keskellä: pitää objektin keskitettynä pystysuunnassa;
• Skaalaa: samanlainen kuin vaakasuuntainen skaalaus, mutta y-akselilla.

Rajoitteet voidaan asettaa myös visuaalisesti suunnittelupaneelin constraints-ruudussa.

Rajoitteiden käyttö responsiivisessa suunnittelussa

• Kohdista objektit (esim. teksti, painikkeet, kuvat) asetteluruudukkoihin tarkan sijoittelun varmistamiseksi;
• Säädä jokaisen objektin rajoitteet sen mukaan, miten sen halutaan käyttäytyvän kehyksen koon muuttuessa;
• Varmista, että ryhmät tai maskatut objektit toimivat oikein sijoittamalla ne kehyksiin ja asettamalla rajoitteet uudelleen. Pikanäppäin on CTRL + ALT + G (Windows) tai Command + Option + G (Mac);
• Testaa responsiivisuutta muuttamalla ylätason kehyksen kokoa varmistaaksesi, ettei vääristymiä tai kohdistusvirheitä esiinny.