Avocode – co to jest i czy warto korzystać?

Ostatnio spotkałam się ze sporym problemem. Designer mojego klienta dostarczył mi pliki, które zaprojektował w Sketchu, czyli aplikacji do projektowania graficznego na Macu. Przekopałam internet w celu znalezieniu sposobu na otworzenie tych plików graficznych na Ubuntu bądź na Windowsie. Generalnie było ciężko, dlatego znalazłam inne rozwiązanie – zdecydowałam się wypróbować Avocode.

Avocode jest zarówno aplikacją desktopową jak i webową. Pozwala na otwieranie plików zarówno w formacie PSD jak i tych stworzonych w Sketchu. Program ten jest dostępny na Maca, Windowsa i Linuxa.

avocode-screen
Avocode – widok głowny
avocode-screen
W górnym menu dostępne jest kilka narzędzi: Hand, Select, Measure, Color, Slice, Note

 

Dlaczego Avocode jest fajnym narzędziem?

Pozwala na eksportowanie warstw lub elementów (pojedynczo lub kilka na raz.) Mamy możliwość eksportu w formatach: SVG, PNG, JPG oraz WEBP.   Elementy zapisane w SVG możemy od razu skalować 2x, 3x lub 4x razy.

avocode-screen
Eksportowanie elementu w różnych formatach

 

Generuje gotowe kawałki kodu: CSS, Less, Sass, SCSS, Stylus, Swift, Android, CSS w JS i React Native. Mamy gotowe informacje min. na temat wysokości, szerokości elementu, czcionki i jej rozmiaru, kolorów; wszystko od razu z odpowiednimi jednostkami.  Wystarczy skopiować jednym kliknięciem i wkleić do swojego edytora.

avocode-screen
Kawałek kodu opisujący button w CSS
avocode-screen
Ten sam button opisany w innym języku

 

Umożliwia tworzenie zespołów i dzielenie się projektami graficznymi. Komunikacja jest ułatwiona dzięki możliwości dodawania komentarzy.

avocode-screen
Dodawanie komentarzy

 

Avocode umożliwia proste kopiowanie tekstu od razu jako element HTML bądź eksportowanie go jako JPG lub PNG. Wystarczy jedno kliknięcie i tekst jest gotowy do wklejenia do naszego edytora.

avocode-screen
Kopiowanie tekstu

 

Pozwala na definiowanie zmiennych – kolorów, czcionek, gradientów, rozmiarów i odległości. W ten sposób kopiowany kod z Avocode będzie od razu uwzględniał  i kopiował nasze zmienne. Jeszcze tego nie testowałam, ale wydaje się to ciekawa opcja.

Dodatkowo, podaje dokładne wymiary oraz położenie elementu. Wystarczy wybrać narzędzie Measure w górnym menu, najechać kursorem na dany element i dostajemy o nim pełen zestaw informacji, zarówno w odniesieniu do granic warstwy jak i innych elementów położonych na tej warstwie. W ten sposób Avocode pomaga w ustalaniu marginesów i paddingów.

avocode-screen

 

Avocode ma sporo zaawansowanych ustawień, które pozwalają dostosować to narzędzie do naszych potrzeb.

avocode-screen
W zaawansowanych ustawieniach możemy np. domyślny format kolorów
avocode-screen
W zaawansowanych ustawieniach możemy np. zmieniać domyślne jednostki

 

Dopiero zaczynam korzystać z tego narzędzia, ale uważam, że jest bardzo cenne, ułatwia i usprawnia kodowanie. Sama aplikacja jest dość intuicyjna, całkiem przyjemna w użytkowaniu. Nie jest idealna, ale ciągle jest usprawniana i dodawane są nowe funkcjonalności. Narzędzie jest płatne (po 14 dniowym trialu), można płacić miesięczną subskrypcję, którą można anulować w każdej chwili, bądź skorzystać ze zniżki na plan roczny.

avocode-pricing
Ceny w miesięcznym rozliczeniu

 

Mam nadzieję, że ten artykuł był pomocny. Daj znać czy korzystałeś/korzystałaś z tego narzędzia. A może znasz jakieś inne, ciekawe i konkurencyjne? Jeśli masz jakieś pytania zostaw komentarz! 🙂 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.