10 darmowych wtyczek do szkiców dla programistów internetowych

Sketch zdobywa dużą popularność wśród projektantów stron internetowych i programistów. To prawdopodobnie dlatego, że tak jest intuicyjny, łatwy do nauczenia i zawiera wiele funkcji, które znacznie ułatwiają tworzenie prototypów strony internetowej. Może być tak również dlatego, że ta aplikacja jest rozszerzalna, tzn. Możesz łatwo dodawać nowe funkcje do aplikacji za pomocą wtyczek.

Oto 10 wtyczek, które mogą pomóc zwiększyć wydajność podczas pracy z programem Sketch. Są one różnorodne, od generatorów treści, selektora palet kolorów, i mogą pomóc w wyświetlaniu pomiarów warstw lub automatycznie dodawać dopełnienie do warstwy.

1. CSS Buddy

CSS Buddy pozwala na dodanie CSS do swojej warstwy w obszarze roboczym Szkic. Zasadniczo można zastosować szerokość, wysokość, krycie, pole-cień, obramowanie i tło do warstwy za pomocą CSS.

Po zainstalowaniu tej wtyczki wybierz warstwę, a następnie wybierz Zastosuj do wybranych z menu wtyczki. W oknie dialogowym pojawi się monit o wprowadzenie arkusza stylów. Dodaj zawartość CSS bez klasy CSS i obserwuj, jak twoja warstwa nabiera kształtu.

2. Paleta kolorów do projektowania materiałów

Jeśli podążasz za trendem projektowania materiałów, zauważalną rzeczą, którą zauważysz, jest użycie charakterystycznych kolorów. Material Design ma niesamowitą paletę kolorów. Teraz możesz przynieść to do swojego obszaru roboczego Wtyczka palety kolorów do projektowania materiałów.

Ta wtyczka wygeneruje palety kolorów w ciągu kilku sekund bez konieczności zamykania obszaru roboczego. Wybierz Odcień, Wartość lub Próbkę, aby wygenerować paletę kolorów odpowiednią dla twojego projektu.

3. Szkicuj notatnik

Czasami musimy pokazać, co robimy w komentarzu lub w dokumentacji. Jeśli pracujesz nad projektami z innymi projektantami lub zaangażowaniem klienta, jest to również konieczne, aby zapewnić, że wynik jest tym, do czego wszyscy dążyli.

Szkic notatnik to wtyczka do łatwego dokumentowania projektu w Sketch. Doda dodatkowy pasek boczny do obszaru roboczego, który zawiera komentarze dodawane do dowolnego elementu projektu. Możesz zmienić kolejność komentarzy, wyrównać, usunąć i przełączyć widoczność komentarza.

4. Gracz dnia

Przed użyciem rzeczywistych obrazów w projekcie często używamy obrazów zastępczych, aby przyspieszyć proces projektowania. Do szkicu możesz użyć Day Player aby dodać niestandardowe symbole zastępcze do dowolnej warstwy w obszarze roboczym Szkic z 6 zastępczych usług obrazowania, w tym Placehold.it, LoremPixel i Unsplash. Po aktywacji można ustawić szerokość, wysokość i inne informacje obrazu.

5. Generator treści

Mamy już wtyczkę do wstawiania obrazków zastępczych, a jeśli chodzi o treść ogólną? Generator treści pomaga dodawać fałszywe dane, takie jak awatary, nazwy, dane geolokalizacyjne i inne. Świetnie sprawdza się w projektach makiet i redukuje bóle głowy, gdy próbuje dowiedzieć się, jak generować dane na miejscu.

Aby dodać atrapę danych, wybierz warstwę, a następnie wybierz Wtyczka> Generator, i wybierz Geo, Osoba lub Zdjęcia.

6. Miara szkicu

Miara szkicu to narzędzie pomiarowe do szkicu. Mierzy długość lub rozmiar warstwy (lub warstw) w projekcie. Otrzymujesz również obicie i margines warstwy, a także odległość między dwiema warstwami. Sketch Measure może również drukować właściwości warstwy, takie jak kolor, obramowanie i krycie. Wszystkie pomiary można wywoływać za pomocą skrótów klawiaturowych.

7. Przycisk dynamiczny

Przycisk dynamiczny pomaga łatwo utworzyć przycisk ze stałymi nakładkami. Automatycznie dostosuje dopełnienie na podstawie wartości, jaką dajesz, bez względu na długość tekstu. Po zainstalowaniu wtyczki tekst można przekształcić w strukturę za pomocą skrótu Command + J. Ilość wymaganego dopełnienia można następnie wstawić do warstwy tekstowej (0: 0: 0: 0) (pod grupą przycisków elastycznych).

8. Skala typograficzna

Skala typograficzna to wtyczka do przekształcania wybranej warstwy tekstowej w skalę typograficzną. Aby użyć tej wtyczki, wybierz warstwę tekstową (pojedynczą lub wielokrotną) lub warstwę mieszaną, która zawiera co najmniej jedną warstwę tekstową, a następnie wybierz Wtyczka> Skala typograficzna i dostosuj wartość w oknie dialogowym. Wynikiem jest zestaw skalowanego tekstu, który jest zgodny z zasadami skali typograficznej.

9. Modulizer

Z Modulizer za pomocą skrótu klawiaturowego Shift + Command + M. możesz kontrolować pola dla przycisku, modułu lub obszarów w projekcie. Możesz połączyć wszystkie warstwy, pogrupować je, a następnie użyć skrótu, aby automatycznie dostosować dopełnienie na podstawie wymaganej wartości dopełnienia . Obejrzyj prezentację wideo, aby zobaczyć to w akcji.

10. Ostrze

Czy kiedykolwiek myślałeś o konwersji projektu ze szkicu na HTML? Jeśli tak, prawdopodobnie powinieneś Nóż, wtyczka Sketch, która automatycznie generuje pliki HTML z twojego projektu. Zamieni grupę na div, tekst do str i tak dalej.

Używając Blade, możesz powiedzieć wtyczce, jaki element DOM ma wygenerować, dodając specjalną nazwę do warstwy, taką jak [btn] lub wejście [tekst], więc Blade wie, co powinien zrobić. Sprawdź to demo wideo, aby uzyskać wewnętrzny wygląd.

Teraz przeczytaj: 12 przydatnych wtyczek dla programistów WordPress