Avocode делает его чрезвычайно простым для разработчиков с интерфейсом для кодирования веб-сайтов или приложений из проектов Photoshop или Sketch. Он создан той же командой, которая принесла нам CSS Hat и PNG Hat, поэтому неудивительно, что они сделали процесс экспорта еще одним шагом дальше. Хотя предыдущие приложения разрешили вы экспортируете задницу ets, что делает Avocode действительно особенным, так это то, что вы можете использовать свой Photoshop-плагин для синхронизации вашего PSD в Avocode одним щелчком мыши.

Avocode быстро и автоматически анализирует ваш PSD или файл Sketch и привносит все в красиво оформленный интерфейс , Затем у вас есть полный контроль над тем, как вы экспортируете активы, включая экспорт SVG в качестве стандарта.

Вы также можете щелкнуть элементы в дизайне и скопировать и вставить код в текстовый редактор по вашему выбору. «Он предоставляет пользователям все необходимое для кодирования — предварительный просмотр дизайна, доступ ко всем слоям и экспорт активов», — говорит соучредитель Avocode Ву Чунг Ань. «Самое лучшее, что разработчикам вообще не нужны Photoshop или Sketch. Текущий рабочий процесс действительно отстой, и именно поэтому мы создали Avocode.»

Мы не уверены, что какое-либо приложение может когда-либо реплицировать разработчика. Но мы знаем многих дизайнеров с жестким давлением, которые с радостью используют это, чтобы превратить PSD и Sketch-файлы в интерактивные проекты, которые затем могут стать основой для сборки веб-сайта. Он стоит от 14 долларов в месяц.

07. Zeplin

 Zeplin «class =» расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/dx4xoU9CVXGNeZZoJxpjNG-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/dx4xoU9CVXGNeZZoJxpjNG.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ d4xoU9CVXGNeZZoJxpjNG.jpg "</p><figcaption>
<div class=

Zeplin переводит файлы Photoshop или Sketch в бесплатное Mac, Windows или веб-приложение

Джеймс Стейф, безусловно, делает это: «Они не всегда используют одно и то же программное обеспечение, — отмечает он, — поэтому те кропотливые слоистые и аннотированные макеты Photoshop заканчиваются сплющенные файлы и вещи неизбежно теряются в переводе .

Zeplin смягчает этот болезненный опыт, переводя Photoshop или Sketch файлы в бесплатное Mac, Windows или веб-приложение. «Лучшая часть — это то, что Zeplin обеспечивает быструю ссылку на цвета, размеры и шрифты из ваших проектов», — говорит Стриф. «Он даже создает CSS и руководства по стилю. Я обнаружил, что Zeplin — это огромная экономия времени, и моим друзьям-разработчикам, похоже, это очень нравится ».

08. Pattern Lab

 Pattern Lab "class =" lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) msgstr " .jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/uH4Ffo3wQAS66WtokWqGD3.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net /uH4Ffo3wQAS66WtokWqGD3.jpg"/></p><figcaption>
<div class=

Pattern Lab основан на атомном дизайне

Pattern Lab — это красивый узорный дизайн инструмент, созданный Дэйвом ОИсеном и Брэдом Фростом, основан на концепции Atomic Design, в которой говорится, что вы должны разбить свой дизайн на самые маленькие части — атомы — и объединить их для формирования более крупных, многоразовых компонентов — молекул и организмов, — которые могут затем превращаться в пригодную для использования пластин.

Хотя по своей сути это статический генератор сайтов, который сшивает компоненты пользовательского интерфейса, в Lab Lab гораздо больше, чем в Lab Lab. Это язык и инструмент-агностик; он позволяет вам встраивать шаблоны пользовательского интерфейса внутри друг друга и создавать динамические данные; он оснащен инструментальными средствами изменения размера окна, которые помогут вам обеспечить полную адаптацию вашей системы проектирования; и он полностью расширяется, поэтому вы можете быть уверены, что он будет расширяться, чтобы удовлетворить ваши потребности.

09. Vivaldi

Иногда лучший инструмент может быть таким простым, как новый браузер. Vivaldi — это быстрый, настраиваемый веб-браузер для опытных пользователей, созданный некоторыми людьми, которые запустили Opera. Дублированный «браузер для наших друзей», Vivaldi построен с использованием веб-технологий: JavaScript и React были использованы для создания пользовательского интерфейса, а также Node.js и множества модулей NPM.

Vivaldi — это самый настраиваемый браузер, и он предлагает другие интересные функции, такие как управление командной строкой, панель для заметок, укладка вкладок и черепица, а также веб-панели, которые позволяют размещать все ваши любимые сайты в одном месте для легкого доступа.

10. Canva

 canva web tool "class =" расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this ) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/A3QkcWKFPLQWLNxznh4mWe-320- 80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/A3QkcWKFPLQWLNxznh4mWe.jpg "data-pin-media =" https: //cdn.mos.cms.futurecdn. </p><figcaption>
<div class=

Canva — популярный инструмент для быстрого создания изображений и инфографики в социальных сетях

Хотите Лоуренс Хармер (Lawrence Harmer), основатель Solve Web Media, рекомендует Canva. Это бесплатные, основанные на браузере инструменты, которые используются как дизайнерами, так и не дизайнерами, для создания графики как для печати, так и для веб-сайтов .

«Канва претт я хорош для создания хороших изображений », — говорит Хармер. «Изображения — это окно в душу вашего сайта и социальных сетей, поэтому такой инструмент может быть ключом к успеху».

11. Инструмент для веб-дизайна

 инструмент для создания веб-дизайна «class =» расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), это) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/ «Data-data-original-mos =» https://cdn.mos.cms.futurecdn.net/YaKYrfkFVnteRwtqSRxZrk.jpg «data-pin-media =" https: //cdn.mos. cms.futurecdn.net/YaKYrfkFVnteRwtqSRxZrk.jpg"/></p><figcaption>
<div class=

Generate предложения по веб-дизайну легко с помощью этого бесплатного инструмента

Beewits имеет хорошая линия в инструментах, облегчающих деловую сторону веб-дизайна, а именно ее генератор котировок веб-дизайна и калькулятор часовых тарифов. Теперь для 2018 года появилось еще одно превосходное бесплатное приложение: самоочевидный инструмент для создания веб-дизайна.

«Это важно y простой инструмент «Proposify», который позволяет вам быстро и легко выпускать предложения », — объясняет Дэвид Аттард из Beewits. «Это прославленная форма, которая позволяет вам вводить и изменять заданный текст, а затем создает документ Word, готовый для прямой отправки клиенту». Альтернативно, вы можете ввести свой собственный текст без использования шаблона.

Если вы входите в бесплатный сервис, вы можете сохранить свою текущую версию, так что в следующий раз у вас есть куча полей, которые уже заполнены вашими данными. Это просто, но он выполняет свою работу.

12. Site Stacks

 сайт стеки "class =" расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this ) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/Li3vM4ecxos4zEX6AZx734-320- 80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/Li3vM4ecxos4zEX6AZx734.jpg "data-pin-media =" https: //cdn.mos.cms.futurecdn. net / Li3vM4ecxos4zEX6AZx734.jpg "/> </p><figcaption>
<div class=

Вы можете быстро и легко проверить технологический стек любого веб-сайта

Вот еще один инструмент, основанный на браузере это просто и блестяще. Введите URL-адрес любого веб-сайта для этого расширения Chrome, и он позволит вам взглянуть на его технический стек. Он быстрый, плавный и надежный, обеспечивает покрытие более чем 40 000 продуктов и гордится своей точностью и полнотой его данные.

«Мы построили это расширение, чтобы упростить доступ к этим данным, — говорят его создатели, — а также защищают вашу конфиденциальность и выполняют все операции на наших собственных серверах, чтобы ваш просмотр не замедлялся».

13. CodePen Projects

 Новый инструмент позволяет создавать веб-сайты непосредственно внутри CodePen «class =» расширяемый lazy-image lazy-image-loading lazyload optional-image «onerror =» this.parentNode.replaceChild (window.missingImage (), this) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https: //cdn.mos.cms. futurecdn.net/kzDFcJNihSbf6rpcBeWZuf-320-80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/kzDFcJNihSbf6rpcBeWZuf.jpg "data-pin-media =" https: // cdn.mos.cms.futurecdn.net/kzDFcJNihSbf6rpcBeWZuf.jpg"/></p><figcaption>
<p>A новый инструмент позволяет создавать веб-сайты непосредственно внутри CodePen </p>
</figcaption></figure>
<p> Основан в 2012 году Alex Vazquez, Tim Sabat и Chris Coyier, CodePen вырос, чтобы стать крупнейшими и живыми сообществами Интернета для тестирования и демонстрации фрагментов кода HTML, CSS и JavaScript. В течение последних пяти лет он функционирует как редактор онлайн-кода, так и оп en-source, где разработчики могут создавать фрагменты кода («ручки»), тестировать их и получать обратную связь. </p>
<p> Совсем недавно CodePen предприняла еще один большой шаг вперед, выпустив собственную среду IDE (Integrated Development Environment), CodePen Projects, которая позволяет создавать веб-сайты в вашем браузере. </p>
<p> Вы можете перетаскивать файлы своего сайта, организовывать их на вкладках и просматривать свой сайт по мере его создания. Существуют шаблоны, которые помогут вам создавать сайты быстрее, если вы выберете, а также встроенные инструменты отладки. </p>
<p> Обратите внимание, что, хотя он работает аналогично редактору Pen, CodePen Projects не заменяет последнее, а сидит рядом с ним. Вы можете узнать больше о CodePen Projects в этом блоге. </p>
<h3 id= 14. Bootstrap

 bootstrap "class =" expandable lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/ikAEEVLzhw6uSbC9qY8WSR-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/ikAEEVLzhw6uSbC9qY8WSR.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ </p><figcaption>
<div class=

Старый любимый Bootstrap имеет несколько новых новых обновлений

Bootstrap, конечно, не новый инструмент. это революция в развитии, и нет сомнений в том, что повсеместная структура будет продолжать формировать то, как мы создаем материал в Интернете. Каждое обновление также приносит полный пересмотр инструмента. Из последней версии команда говорит:

С Bootstrap 4 мы снова снова чтобы проект учитывал два ключевых архитектурных изменения: переход на Sass и переход на flexbox CSS. Наше намерение заключается в том, чтобы немного помочь продвинуть сообщество веб-разработчиков вперед, нажав на новые свойства CSS, меньшее количество зависимостей и новые технологии в более современных браузерах ».

15. ally.js

 ally.js "class =" expandable lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) "data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/GRdvTEsQB4gzSfhEGE6TG6-320-80.jpg" данные - data-original-mos = "https://cdn.mos.cms.futurecdn.net/GRdvTEsQB4gzSfhEGE6TG6.jpg" data-pin-media = "https://cdn.mos.cms.futurecdn.net/GRdvTEsQB4gzSfhEGE6TG6.jpg "</p>
</p>
<div class=

Не упускайте из виду доступность — используйте ally.js

Никакого списка инструментов веб-разработки не будет полным без по крайней мере, один инструмент доступности. Доступность — один из тех часто забываемых аспектов проектирования и разработки, и ally.js может упростить его для вас.

Теперь стабильный продукт, ally.js — это библиотека JS, которая дает вам прекрасный контроль над фокусируемыми и непроницаемые элементы. Например, используя свой API, вы можете запретить получать элементы вне модального окна, пока модальный не будет закрыт. Вы также можете узнать, какие элементы являются настраиваемыми или настраиваемыми, а также определить изменения фокуса в тени DOM.

Две другие мощные функции — это возможность определять, каким образом фокус изменился (клавиатура, мышь и т. Д.). ), и когда элемент является фокусируемым и физически видимым на экране (это может помочь избежать прокрутки страницы).

16. Тип Nugget

 Тип Nugget "class =" расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this ) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/DLKnYLu3MB7PF8LtuHmL48-320- 80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/DLKnYLu3MB7PF8LtuHmL48.jpg "data-pin-media =" https: //cdn.mos.cms.futurecdn. net / DLKnYLu3MB7PF8LtuHmL48.jpg "/> </p><figcaption>
<div class=

Тип Самородок дает вам больший контроль над вашими наборами

Тип Самородок адресован вам 'll на почти каждом проекте frontend: работа с типографикой CSS. Все еще в бета-версии с большим количеством функций в работе, это онлайн-набор инструментов, который дает вам прекрасный контроль над стилями типов.

Инструмент отображает разнообразные набор текстовых образцов на странице, h можно отрегулировать в реальном времени на панели справа. Панель позволяет выбирать размер шрифта, вес, стиль, цвет, расстояние между буквами, оформление текста и многое другое для отдельных аспектов страницы (глобальные стили, заголовки, абзацы, ссылки и списки HTML).

инструмент позволяет вам зарегистрироваться для учетной записи, войти в систему и сохранить свой прогресс. После указания всех ваших настроек вы можете нажать кнопку «Создать код», а Type Nugget создаст ссылку на таблицу стилей, размещенную на ее CDN. Если вы найдете сложную и повторяющуюся типографию CSS, вам будет полезно добавить этот инструмент в рабочий процесс.

17. ARKit

 Apple ARKit «class =» расширяемый lazy-image lazy-image-loading lazyload optional-image «onerror =» this.parentNode.replaceChild (window.missingImage (), this) msgstr " .jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/VAPiWPMyKh7FJveUKZBxgG.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net /VAPiWPMyKh7FJveUKZBxgG.jpg"/></p><figcaption>
<div class=

Создание дополненной реальности для устройств iOS 12 с ARKit 2 от Apple

Расширенная реальность — смешивание цифровые объекты и информация с окружающей средой вокруг вас — это пространство, которое сейчас вызывает волнение в сообществе разработчиков приложений для веб-приложений и приложений. Не в последнюю очередь из-за ARKit от Apple, рамки, которая позволяет вам легко создавать события AR для iPhone и iPad под управлением iOS 11 или выше. Для начала просто загрузите iOS 11 или 12 и самую последнюю версию Xcode, которая включает в себя SDK. Проверьте, на что способен ARKit.

18. Vue.js

 vue.js "class =" расширяемый lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage () , это) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/Q7xjh3iBfbrPN76GrSxjCH- 320-80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/Q7xjh3iBfbrPN76GrSxjCH.jpg "data-pin-media =" https: //cdn.mos.cms. futurecdn.net/Q7xjh3iBfbrPN76GrSxjCH.jpg"/></p><figcaption>
<div class=

Не используется для комплектации библиотек JavaScript? Vue.js идеально подходит для вас

Каким будет список новых веб-инструментов без рамки JavaScript? Vue.js, например React, является основой для создания пользовательских интерфейсов и использует виртуальную DOM. Как следует из названия, основная библиотека Vue сосредоточена на уровне представления .

Посмотрите на пример кода, взятый из документов Vue, который использует пользователя input and demonstrates the library’s elegance. We’ll start with the HTML:

Notice the custom v-on handler that calls the reverseMessage method. Here’s the JavaScript:

In that example, I’m populating the paragraph with data and defining the reverseMessage method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.

 

{{ message }}

 

var myApp = new Vue({
 el: '#example',
 data: {
  message: 'Hello Vue.js!'
 },
 methods: {
  reverseMessage: function () {
   this.message = this.message.split('').
reverse().join('')
  }
 }
});

19. Hologram 

Hologram" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/vosUw3vQ7mjphftVhNaThM-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/vosUw3vQ7mjphftVhNaThM.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/vosUw3vQ7mjphftVhNaThM.jpg"/></p><figcaption>
<div class=

This Mac app built on A-Frame lets you create WebVR experiences without needing to code

Hologram is an all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozila’s WebVR framework. 

This means that developers can download projects created with Hologram and use them in their A-Frame workflows. It’s currently available on Mac and a Windows version is promised soon. 

20. Parallax SVG Animation Tools

Parallax SVG Animation Tools" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/bqqSdqbr8LEtFh84RZcPKR-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/bqqSdqbr8LEtFh84RZcPKR.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/bqqSdqbr8LEtFh84RZcPKR.jpg"/></p><figcaption>
<div class=

This set of tools makes it easier to create complex sequences of SVG animation 

Created by Gareth Battensby of Parallax, SVG Animation Tools is a range of SVG animation tools in the form of a Python script. “I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he says in this explanatory blog post. 

“The biggest of these being overwritten edits whenever you re-export from Illustrator. These tools completely eliminate that issue – they’re perfect for front-end developers who animate SVG graphics with GSAP or similar animation libraries.”

21. Quill

Quill" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/9ptrUpqEfenhgugdpzxz5U-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/9ptrUpqEfenhgugdpzxz5U.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/9ptrUpqEfenhgugdpzxz5U.jpg"/></p><figcaption>
<div class=

Quill is a flexible rich text editor with a powerful API

Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed, so it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.

Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:

But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include toolbar, keyboard, clipboard and history. You can test-drive many of these features in the Quill playground and of course the documentation is a must-read if you intend to use its advanced features.

22. URL to PDF 

URL to PDF" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/AiLahPdg8Lzn5iEcQ8nxLf-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/AiLahPdg8Lzn5iEcQ8nxLf.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/AiLahPdg8Lzn5iEcQ8nxLf.jpg"/></p><figcaption>
<div class=

Convert HTML into PDFs automatically with this API

Brought to you by Alvar Carto, this self-hosted API enables you to convert the HTML into PDFs, so it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page's @media print CSS rules by default, and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

23. iotaCSS

iotaCSS" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/qFSU9ZRhLd77JSxyQKBDPW-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/qFSU9ZRhLd77JSxyQKBDPW.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/qFSU9ZRhLd77JSxyQKBDPW.jpg"/></p><figcaption>
<div class=

iotaCSS is a CSS framework with a difference

iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architect Dimitris Psaropoulos, who found that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top, or ask the designer to compromise. So instead, he created his own framework, which works a little differently. 

While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces. 

iotaCSS been quietly in development for a couple of years, with a number of early adopters using it to build high-scale products. But now it’s out of beta and confidently announcing itself to the world. You can learn more about how it works in this blog post.

24. Launchpad 

Launchpad is a tool from Anima that lets you publish websites directly from Sketch, with no coding required. The entire interface is integrated into Sketch, and can be used to create landing pages and static websites, although at the moment it doesn't support dynamic web pages using JavaScript. But it does let you include links, add responsive breakpoints, set up forms, embed videos and integrate analytics tools. So it could be an ideal tool for setting up a quick and easy promotional website, for example. 

You can learn more about Launchpad in this blog post.

25. React Sketch.app

React Sketch.app" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/kRYUHfrFw9JXUT4ZcKUrrf-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/kRYUHfrFw9JXUT4ZcKUrrf.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/kRYUHfrFw9JXUT4ZcKUrrf.jpg"/></p><figcaption>
<p>Airbnb is sharing its bespoke tool with the open source community</p>
</figcaption></figure>
<p>React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers, it’s basically an open-source library that allows you to write React components that render to Sketch documents. </p>
<p>Because React Sketch.app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine. </p>
<p>React Sketch.app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch. You can learn more about how it works in this post.</p>
<h3 id=26. SVGito

SVGito" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/sY7syE2dsjHS4bSoHnTorf-320-80.png"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/sY7syE2dsjHS4bSoHnTorf.png" data-pin-media="https://cdn.mos.cms.futurecdn.net/sY7syE2dsjHS4bSoHnTorf.png"/></p><figcaption>
<p>This free app saves you having to manually edit SVG files</p>
</figcaption></figure>
<p>SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them. Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing what they actually look like on screen. </p>
<p>You can learn more about SVGito in this blog post.</p>
<h3 id=27. Sizzy 

Sizzy web design tool" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/5VT6V9ESasrGKfwC57g5sd-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/5VT6V9ESasrGKfwC57g5sd.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/5VT6V9ESasrGKfwC57g5sd.jpg"/></p><figcaption>
<div class=

Sizzy allows you to preview multiple screens during app testing

Sizzy is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.  

Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. So he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs. 

You can learn more about Sizzy in this blog post. 

28. Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2" class="expandable lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)"  data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src="https://cdn.mos.cms.futurecdn.net/YRwByS8K2e9sK9ADMAbTuL-320-80.jpg"  data- data-original-mos="https://cdn.mos.cms.futurecdn.net/YRwByS8K2e9sK9ADMAbTuL.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/YRwByS8K2e9sK9ADMAbTuL.jpg"/></p><figcaption>
<div class=

Create responsive HTML emails with Foundation for Emails 2

Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

As well as the framework itself, ZURB has provided the ZURB Email Stack, an all-in-one workflow that includes:

The Getting Started guide will help walk you through how to get the stack up and running should you choose to take advantage of all the features.

29. Form

RelativeWave's Form is a prototyping tool like no other we've tried. It's not a typical design tool in that there's no tools or layers palette. Using the app feels like a mix of design and code.

While you can't actually create graphics in the app, you can insert them and use what Form calls 'patches' to add gestures and interactions. The Mac app requires you to also use the iOS app so you can view your prototype in real time and interact with it.

"Form is an app design and prototyping tool with the goal of producing designs that are closer to what you get in production," explains RelativeWave creative coder Max Weisel. "We want designers to work directly on the production side of an app, and at the same time free up engineers to focus on more complex problems."

There are some great tutorials on how to use Form, but the process is rather complex if, like us, you are used to creating visuals in Photoshop. Moving an image to the centre of your device, for example, is achieved using Superview variables and Match Patches. Once in place you use maths to divide the width and height and connect them to the X and Y positions in Image View. Group those together, rename the variables and adjust the X and Y anchor points. We found this process fairly complex.

However, once you get your head around the processes, you can create stunning prototypes. Having access to the device's camera and other sensors means the prototypes you create are just as powerful as the coded app would be.

Related articles:

Go to Top

Поделитесь статьей!

close-link