Opret adaptive knapper ved hjælp af kombinerede figurer i skitse

Bemærk: Med Sketch 58 er denne metode ikke længere nødvendig. Se min nye artikel om, hvordan man nemt opretter adaptive knapper ved hjælp af Sketchs Smart Layout.
Problemet, vi løser, former reagerer ikke på tilsidesættelse af tekst.

Hvis du nogensinde har forsøgt at oprette knapper inden for et skissesymbol, indså du hurtigt begrænsningerne. Solide knapper og skitserede knapper reagerer ikke på længden af ​​den tilsidesatte tekst. Du var sandsynligvis nødt til at foretage afvekslinger, oprette knapper med fast bredde eller skulle være kreativ med knappetekst for at få den til at sidde inden i knappen med fast bredde.

Dette er det første af to indlæg, der viser forskellige metoder til at oprette adaptive knapper, der kan indlejres i andre symboler.

Introduktion af den kombinerede form metode

Brug af kraften i kombinerede figurer, viser denne tutorial, hvordan du opretter en knap og knapper, der tilpasser sig den tilsidesatte tekstlængde. Disse knapper kan bruges alene og kan indlejres i andre symboler.

Denne tutorial viser, hvordan man opretter tilpassbare knapper, der kan indlejres i symboler.
⬇︎ Download Sketch File

Denne metode kan bruges til at oprette kombinationer af flere knapper, vi fokuserer på at oprette en solid knap og kun tekstknap til denne tutorial.

Denne metode kan også bruges til at oprette en hvilken som helst knapstilkombinationer.

Sådan fungerer denne metode

Denne metode kombinerer alt i en enkelt form. Hvis du er bekendt med figurer, vil du hurtigt indse ulemperne ved denne metode. Nogle lag trækkes fra andre, f.eks. Teksten. Noget bag knappen vises, hvor teksten er. Desuden kan kun en farve påføres på hele formen.

Brug denne teknik, hvis:

  • Der er kun brug for en farve til alle knapperne
  • Den faste knaptekstfarve og den overordnede overfladefarve er den samme

Brug ikke denne teknik, hvis:

  • Den solide knap har brug for en dråbe skygge; hvis man anvender en her, vises den bag teksten.
  • Der kræves forskellige farver til knapperne eller knapkonturen

Brug for muligheden for at have forskellige farveknapper, tekstfarve eller en dråbe skygge på knappen? Tjek indlægget på en mere avanceret metode:

Nok allerede, vis mig hvordan!

Denne tutorial antager, at du har en vis erfaring med at oprette kombinerede figurer i Sketch, men er forhåbentlig skrevet, så alle kan følge.

Vi opretter højre-justerede knapper. Venstrejusterede knapper kan oprettes ved at gøre det inverse.

Tip: For at få knappen til at reagere på tilsidesættelse af tekstlængde bruger vi den metode, der er beskrevet i: Opret et adaptivt skitsymbol til Materialdesigns skitserede tekstfelt.

Opret symbolet

En hvilken som helst art boardstørrelse kan bruges, vi opretter en kunstplade, der er stor nok til at holde en solid OK-knap og kun for at annullere tekst.

  • Symbolnavn: Knap række - fast og tekst / højrejusteret
  • Bredde: 140
  • Højde: 36

Tilføj overfladelaget

Da vi ikke kender den maksimale længde på knappen, vil vi give overfladelaget en latterlig længde. Det vil blive afsløret, når tekstens længde stiger. Dette er også højre side af knappen, så de højre hjørner afrundes.

Tilføj en ny rektangelform:

  • Lagnavn: Overflade
  • Bredde: 500
  • Højde: 36
  • X: -360
  • Radius: 0; 4; 4; 0 (for højre side afrundede hjørner)
  • Farve: 6200EE (eller hvilken som helst farve)
Tip: Hvis du opretter en lagstil, kan du ændre knapfarven, når den indlejres i et symbol.

Tilføj tekst til den faste knap

For at gøre knappen rigtigt justeret, fastgør vi den til højre for tegnebrættet. Tekstoverskridelse skubber alt til venstre, når det vokser.

Tilføj et tekstlag over overfladelaget:

  • Lagnavn: Solid knaptekst (dette vil være navnet under tilsidesættelsen)
  • Pin to edge: højre
  • Fast størrelse: Højde
  • Skrifttype: Roboto
  • Størrelse: 14
  • Vægt: Regelmæssig
  • Linie: 36
  • Justering: Højre
  • Teksttransform: store bogstaver (valgfrit)
  • Tekst: OK
Tip: Hemmeligheden bag denne metode er liniehøjden. Tilsidesættelse af tekst skubber kun tilstødende lag, der er i samme højde eller mindre end teksten og ikke overlapper hinanden. Linjehøjde bruges til at øge teksthøjden. Tjek dette indlæg for mere information om tilpassbar tekst.

Kombiner overflade- og tekstlag til en form

Opret en kombineret form:

  • Vælg begge lag, og klik på Trækk på værktøjslinjen eller i menuen: Lag> Kombiner> Trækker.
  • Omdøb laget til overflademaske
  • Omdøb laget til knapfarve. Dette vil være den tilsidesættende menuetikett til ændring af farve på knappen.

Tilføj overflademaske-laget

Vi er nødt til at ‘maske’ overfladelaget, så det kun vises, når tekstlaget vokser i længden. Maskelaget skal være længden af ​​overfladelaget minus tekstlagets bredde (19px) og afstand fra teksten til slutningen af ​​kunstpladen (16px).

Maskeret skal placeres inden tekstlaget og ikke overlappe det. Ellers bevæger maskelaget sig ikke, når den tilsidesatte tekst indtastes.

Over den faste knaptekst i den kombinerede form skal du tilføje et rektangellag.

  • Lagnavn: Overflademaske
  • Bredde: 465
  • Højde: 36
  • X: -360
  • Kombinationsmetode: Træk fra

Test dine fremskridt

Føj symbolet til siden, og tilføj tekst i den faste knap Tekst tilsidesætter. Teksten til tilsidesættelse skal flytte lagen Surface Mask og afsløre mere af Surface Mask farven.

Det skal se ud som om knappen tilpasser sig tekstlængden.

Udfør den solide knap

Vi er nødt til at "skære ud" en del af overflademasken. Der anvendes et rektangel i fast form med to afrundede hjørner. Ligesom Surface Mask, vil den flytte sig med den tilsidesatte tekst.

Tilføj et nyt rektangelag over overflademaske:

  • Lagnavn: Venstre udskæring
  • X: 89 (Bemærk: det skal ikke overlappe overfladelaget.
  • Bredde: 16
  • Højde: 36
  • Radius: 4; 0; 0; 4
  • Fast størrelse: vandret

Test dine fremskridt

Ligesom før, test dine fremskridt ved at tilføje symbolet på siden og indtaste tekst i menuen for tilsidesættelse. Det venstre udskæringslag skal bevæge sig, når tekstindtastningen indtastes. Det bør heller ikke ændre form, da symbolet ændres til størrelse.

Tilføj kun tekst-knap

Whew, næsten færdig! Fuldfør knappegruppen ved at tilføje en tekst-kun-knap.

Tilføj et tekstlag:

  • Lagnavn: Tekstknap (dette vil være navnet ved tilsidesættelse)
  • Fast størrelse: Højde
  • Skrifttype: Roboto
  • Størrelse: 14
  • Vægt: Regelmæssig
  • Linie: 36
  • Justering: Højre
  • Teksttransform: store bogstaver (valgfrit)
  • Tekst: Annuller

Færdig!

Du skal nu have et symbol med solide og kun-kun knapper, der kan bruges alene eller indlejret i andre systemer og stadig svare på overstyringsteksten.

Hvis du brugte lagformater tidligere, kan du ændre farve på knapperne gennem knappen Farveoverskridelse, også når den indlejres i andre symboler.

Hvad kan du gøre med denne metode?

Som nævnt tidligere kan denne metode bruges til at skabe så mange variationer og kombinationer af tilpasningsbar tekst. Lad mig vide, hvad du opretter ved hjælp af denne teknik!

Denne metode kan også bruges til at oprette en hvilken som helst knapstilkombinationer.
⬇︎ Download Sketch File

Du kan også lide mine relaterede artikler: