12 Essential Free Sketch Plugins
Gdy Szkic 44 wychodzi z wersji beta, przyjrzymy się jednej z najlepszych funkcji Sketcha: ogromnej liczbie wtyczek open source.
Społeczność Sketch jest szalenie pomocna i możesz znaleźć mnóstwo niesamowitych wtyczek, które radykalnie poprawią Twój przepływ pracy. W tym poście opiszę 12 najlepszych wtyczek Szkiców, które powinien mieć każdy projektant.
1. Pomiary szkicu
Pomóż mi szkicem pomaga projektantom organizować i szkicować ich pracę dla programistów, kierowników projektów i innych członków zespołu.
Ale jest to również niezwykle przydatne dla samotnych wilków, którzy projektują i kodują wszystkie swoje projekty. Dzięki wtyczce Measure można zarysować elementy pokazujące określone wymiary szerokości / wysokości, aby uzyskać właściwe pomiary na pierwszy rzut oka.
Obejmuje to wszystkie elementy strony, takie jak przyciski, tekst, ikony, a nawet główne części obszaru roboczego.
Za pomocą Sketch Measure możesz nawet eksportować strony do HTML / CSS ze stylami stron. Oczywiście, że są Narzędzia Adobe to też może zrobić. Ale posiadanie wszystkich funkcji w Sketchu znacznie ułatwia pracę.
2. InVision Craft
Jakiś czas temu zespół InVision ogłosił nową wtyczkę Rzemiosło . Ale to jest bardziej jak zestaw wtyczek, w których masz mnóstwo dodatkowych funkcji i skrótów.
Jednym z przykładów jest Wtyczka danych dzięki czemu projektanci mogą pobierać tekst / dane bezpośrednio z publicznych interfejsów API w Internecie. W ten sposób możesz automatycznie wypełnić swoją aplikację prawdziwymi treściami i obrazami w locie.
Deweloperzy InVision stale aktualizują Craft o nowe funkcje wtyczek, aby uczynić go jeszcze bardziej wartościowym dla projektantów. Czy wspomniałem, że jest to całkowicie bezpłatne?
Do tej pory Craft ma 6 głównych funkcji wtyczki, z których wszystkie są warte dodania do obiegu pracy nad projektem.
- Odręcznie - współpraca w czasie rzeczywistym w Sketch
- Prototyp - dynamiczne prototypowanie o wysokiej wierności
- Synchronizuj - natychmiastowa synchronizacja między prototypami InInision a Sketch
- Dane - pobieraj prawdziwe dane z Internetu do makiety szkicu
- Biblioteka - projektuj zasoby w chmurze, które można współdzielić z całym zespołem
- Duplikować - Błyskawiczne klonowanie UI
Spójrz na Craft strona główna i zobacz, co myślisz. Gdy spróbujesz, nigdy nie będziesz chciał wracać.
3. Przybornik szkicu
Każdy użytkownik Sketch powinien wiedzieć o Przybornik szkicu . Jest to znakomity menedżer wtyczek, który znacznie ułatwia instalowanie / dostosowywanie wtyczek.
Za pomocą tego Przybornika możesz przeglądać setki wtyczek Szkiców i wybierać te, które chcesz zainstalować. Wystarczy kliknąć, co chcesz, a zostanie ono automatycznie pobrane na komputer, gotowe do użycia.
A Sketch Toolbox automatycznie aktualizuje wtyczki, aby zapewnić płynne działanie.
Technicznie jest to wciąż w wersji beta i zawsze otrzymuje nowe aktualizacje na GitHub . Ale myślę, że jest wystarczająco solidny, aby użyć go w procesie produkcyjnym. W rzeczywistości twierdzę, że dobry obieg szkicu nie byłby kompletny bez tego niesamowitego menedżera wtyczek.
4. Eksportuj zasoby
Jednym z najbardziej szczegółowych zadań projektanta jest przydzielanie zasobów i dzielenie się nimi z programistami. Wszystkie małe ikony, grafika, wzory tła, wszystko to należy wyeksportować (zwykle ręcznie).
The Wtyczka Export Assets sprawia, że ten proces jest bardzo prosty. Pamiętaj, że ta wtyczka jest przeznaczona specjalnie dla aplikacji mobilnych, w których projektanci muszą eksportować zasoby interfejsu Android / iOS. Obejmuje to zasoby siatkówki dla ekranów o wielkości 2x i 3x.
Nie widziałem żadnych funkcji związanych z projektowaniem internetowej siatkówki, ale możesz sprawdzić Eksportuj szkic wtyczka też. Obecnie jest w wersji beta i ma być ulepszoną wersją oryginału.
5. Generator treści
Wtyczka Craft, o której wspomniałem wcześniej, oferuje generowanie treści. Ale możesz chcieć czegoś prostszego w ten sposób Generator treści autor: Timur Carpeev.
Dzięki tej instalacji możesz automatycznie wypełnić wiele elementów Szkic jednocześnie z powiązanymi danymi, takimi jak:
- Awatary użytkowników
- Imię i nazwisko
- Dumny tekst akapitu
- Niestandardowe ciągi (dane geograficzne, ceny, numery kart CC itp.)
Cała zawartość jest pobierana z baz danych typu open source, takich jak Unsplash i Uinames więc możesz użyć tego w wielu projektach komercyjnych lub innych.
6. Looper
Photoshop ma własny panel Actions, w którym można zautomatyzować powtarzające się akcje. Szkic nie ma takiego panelu, ale ma go Wtyczka Looper który jest całkowicie bezpłatny i bardzo łatwy do opanowania.
Jest to najbardziej przydatne przy tworzeniu powtarzających się wzorców, które przejmują całą stronę. Projektanci graficzni mogą znaleźć więcej zastosowań dla tej wtyczki niż projektanci stron internetowych, ale mogą zaoszczędzić wiele czasu na zapętlanie się powtarzających się zadań skalowania / duplikowania.
Rzuć okiem na Strona główna Looper'a aby zobaczyć, co może zrobić. Może to nie być przydatne dla wszystkich, ale dla tych, którzy mogą z niego korzystać, zaoszczędzisz dużo czasu.
7. Szkic Iconfont
Projektanci stron internetowych kochają ikony czcionek . Wspaniałe ikony znacznie ułatwiają projektowanie interfejsu użytkownika, a pliki czcionek są zwykle mniejsze niż obrazy.
The Szkic wtyczkę Iconfont to kompletny pakiet do zarządzania do przechowywania, sortowania i ciągnięcia czcionek ikon bezpośrednio do Sketch. Domyślnie wtyczka jest pusta, więc musisz pobrać lokalnie czcionki ikon, aby z nich korzystać.
Zapewnia to pełny dostęp do pracy z czcionkami ikon dostępnymi online. W rzeczywistości jest pakiet czcionek wykonane specjalnie dla tej wtyczki, jeśli chcesz szybko wypełnić swój folder iconfont. I zawsze możesz przeszukiwać sieć, aby uzyskać więcej w miarę upływu czasu.
Zdecydowanie polecam pobranie kopii tej wtyczki. Czcionki z ikonami pozostają tutaj i są nieocenione dla nowoczesnych stron internetowych.
8. Zapas stylu
Za każdym razem, gdy uruchamiasz nowy plik szkicu, musisz ponownie utworzyć style od zera, lub musisz skopiować / wkleić style z poprzednich makiet.
Dzięki Wtyczka Style Inventory możesz ominąć tę dodatkową pracę. Wystarczy kilka kliknięć, aby zaimportować wszystkie wcześniejsze style bezpośrednio do nowego dokumentu Szkic, aby uzyskać łatwy dostęp.
Style te obejmują kolory, style tekstu i symbole, a także style warstw dla niektórych elementów.
Ta wtyczka jest rzadko aktualizowana, ale polecam ją do łączenia podobnych makiet. Możesz także spróbować Wtyczka Sketch Palettes do zapisywania i importowania schematów kolorów.
9. Pixel Perfecter
Każdy cyfrowy projektant szczyci się makietami doskonałymi w pikselach. To zadanie nie jest trudne, ale wymaga, aby każdy element projektu był idealnie dopasowany do siatki, nie pozostawiając żadnych zakładek ani niedoskonałości.
Jeśli kiedykolwiek chcesz sprawdzić swoją pracę przed eksportem, możesz uruchomić Pixel Perfecter . Ta bardzo mała wtyczka sprawdza wszystkie zasoby plików, aby sprawdzić, czy jakieś piksele przepełniają tradycyjne pozycje współrzędnych X / Y tworzące niedoskonałe piksele.
Zauważ, że to nie naprawi automatycznie tych wartości przesunięcia pikseli. Po prostu znajdzie warstwy powodujące problemy i podświetli je, abyś mógł sam wejść i je naprawić. Wciąż jednak oszczędza wiele czasu na ręczne sprawdzanie każdej warstwy.
10. Przycisk dynamiczny
Oryginalna wtyczka dynamicznego przycisku została nieco porzucona w 2015 roku, ale nowsza Dynamiczny przycisk wtyczka jest jeszcze lepsza i kompatybilna z Sketch 3.5+.
Automatycznie dodaje dopełnienie i style przycisków do dowolnej tworzonej warstwy tekstowej, a dopełnienie jest dynamiczne, więc aktualizuje się niezależnie od rozmiaru tekstu. Jest to niezwykle pomocne dla projektantów interfejsu użytkownika, którzy nieustannie wprowadzają zmiany w swoich makietach.
Można to również zrobić w aplikacjach mobilnych, w których przyciski zazwyczaj mają stały rozmiar / proporcję. To nie jest najbardziej efektowna wtyczka Sketch, ale spełnia swoje zadanie.
11. Compo
Jeśli chcesz generator guzików wraz z dodatkowymi funkcjami, to Wtyczka Compo warto przetestować.
Twórca Compo wpadł na pomysł po użyciu wtyczki Dynamic Button przez jakiś czas, ostatecznie chcąc czegoś trochę szybciej. Compo automatycznie generuje odpowiedni rozmiar przycisku i rozmiar tekstu, aby dopasować je do twoich dokładnych specyfikacji. Jedno kliknięcie i masz działający komponent Szkic, który jest automatycznie dopasowywany i pozycjonowany poprawnie.
Zwykle, gdy utworzysz przycisk i zmienisz tekst, wpłynie on tylko na warstwę tekstową. Zatem podstawowy przycisk byłby zbyt mały. Compo automatycznie zmienia rozmiar przycisku i tekstu tak, jakby były jednym elementem.
Możesz znaleźć mnóstwo wersji demo GitHub repo wraz z kilkoma przewodnikami dla początkujących.
12. CSSketch
Ostatni, ale na pewno nie najmniejszy to CSSketch podłącz. Jest to najbardziej przydatne dla programistów i programistów, którzy chcą mieć bezpośredni dostęp do kodu CSS dla wszystkich tworzonych stylów.
Każda strona, którą zaprojektujesz, może być uruchamiana za pomocą tej wtyczki, aby wyeksportować pełny arkusz stylów ze wszystkimi uwzględnionymi zasobami. Ale ponieważ jest to zautomatyzowane, nie możesz oczekiwać kodu jakości A ++.
Nadal wolę kodować mój CSS ręcznie, ale ta wtyczka oferuje przynajmniej punkt wyjścia dla nietechnicznych projektantów lub programistów, którzy chcą zaoszczędzić trochę czasu.
