Перший погляд на Avocode

    
 
Доброго часу доби, Хабр!
 
Так вже завелося, що переважна більшість веб-дизайнерів створюють макети сайтів в Adobe Photoshop. І кожен раз, ми, бідні верстальники, відчуваємо на собі всі мінуси і проблеми PS. І нам завжди доводилося з ними миритися, або використовувати всілякі плагіни милиці , і сторонні додатки милиці . Навіть новомодний і перспективний Sketch створений, в першу чергу, для створення макетів, а не для добування інформації для верстки.
 
Але темні часи минули, і хмари починають розсіюватися над світом фронтенд-розробників. Отже, зустрічайте: Avocode!
 
Avocode — це продукт від компанії Source, створений спеціально для змучених верстальників. Самі Source називають його "Міст між дизайнерами та розробниками". Працювати це буде так: дизайнер намалював макет, клікнув по кнопці в плагіні, і макет полетів прямо в Avocode до верстальщику.
 
Проект зараз перебуває в статусі private beta, і ще дуже сирий, але він вже володіє достатньою кількістю фіч, про які я зараз і розповім.
 
 (Деякі зображення клікабельні)
 
 
 
Остання бета (0.4.0) вийшла 23 липня 2014. У неї додали одну з найголовніших фіч: експорт в SVG.
 
Avocode 0.4.0 Beta Changelog:
 
 
     
Додана можливість експорту векторних шарів в SVG
 Покращена підтримка текстових шарів — underline, uppercase, smallcaps, line through.
 Баг фікси, поліпшення UI
 
 
Відомі баги та бракуючий функціонал:
 
 
     
Автоматичні апдейти ще не працюють
 Поки що мало хороший UX панелі експорта
 Чи не відтестували функціонал "подвійного кліка по шару"
 Немає підтримки SASS
 Ні Windows / Linux версій
 Selection by dragging
 
 
Нові бети Avocode виходять кожні 14 днів.
 
На даний момент, щоб імпортувати дизайн-макет, потрібно мати PS, з встановленим плагіном Avocode. У майбутньому планується можливість імпортувати макети іншими способами: Dropbox, Layervault, або прямо з жорсткого диска.
 
 
 
 
 
Відкриваємо улюблений макет в PS (хлопці обіцяють підтримку Sketch в майбутньому), викликаємо вікно плагіна, логіном з аккаунтом Source (так, так, майже всі дії зав'язані на цей аккаунт), і клацають по кнопці Sync To Avocode.
 
 
 
Починається завантаження всіх шарів на їх сервера, і ось, наш макет доступний в Avocode, і ми можемо вибрати його із списку, і… він креш, і ми розуміємо що Avocode — це веб-додаток, написаний на JS, і запущене в WebKit.
 
 
 
Загалом, другий макет мені все-таки вдалося благополучно відкрити в Avocode.
 
 
 
Робочий простір поділено на 3 частини: панель шарів (ліворуч), область з нашим макетом, і мульти-панель (праворуч) з 4 вкладками (інспектор, бібліотека, проекти, та довідка). Ліва панель згортається. Також (поки) доступні 4 інструменти: вибір, лінійка, піпетка, рука.
 
Панель шарів досить проста, в ній відображаються всі шари в макеті, є можливість приховати шар, і контекстне меню. Під цією панеллю розташовуються інструменти. Якщо панель шарів приховати, панель інструментів залишиться ліворуч по центру.
 
 
 
 
У правій панелі, в першій вкладці розташовується чудовий інспектор.
Тут можна скопіювати текст одним кліком, побачити розміри, копіювати стилі (CSS або LESS, SASS поки немає). Також є можливість швидкого експорту зображення, хоч SVG, хоч JPG, хоч PNG.
Розумний і зручний colorpicker, що вміє запам'ятовувати кольору, теж присутня.
 
 
 
 
 
Ще Avocode дуже добре справляється з експортом SVG, і навіть генерує HTML для зображень (вкрай марна фіча).
 
 
 
 
 
 
 
Також можна експортувати відразу всі зображення, в 1 клік.
 
 
 
Теж саме і з колірною схемою.
 
 
 
Ще в Avocode є Command Palette, запозичена у Sublime Text, і, я так зрозумів, буде можливість встановлювати сторонні розширення.
 
 
 
На закінчення хочу сказати, що перед нами мега-перспективний продукт, на який я готовий перелізти вже сьогодні (була б підтримка SASS).
 
Що стосовно оплати, швидше за все це буде місячна підписка.
 
Якщо я що-небудь пропустив, пишіть питання в коментарях, із задоволенням на них відповім, і доповню огляд.
 
Source обіцяли Public Beta @ Summer 2014, так що зовсім скоро, ви зможете самі помацати його.
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.