Библиотека UI компонентов Material Design в Sketch-символах для CRAFT-а

Sergey Krivoy
Dec 16, 2016 · 2 min read

Набор из кнопок и текстовых полей в виде символов Sketch-а, которые загружены в библиотеку CRAFT. Разработан для быстрой работы с макетами в Sketch-е.

Кнопки

Image for post
Image for post

Внутри можно написать любой текст. Изменять размер кнопки придется вручную. Но можно делать это на глаз — отступы в кнопке все равно будут правильные.

Кнопке можно присвоить любой стиль:

  • Rise
  • Flat
  • Disabled
  • Call-to-action
  • Простая

Можно использовать кнопки с пиктограммой внутри. Для использования подойдут любые пиктограммы из набора материальных иконок.

Текстовые поля

Image for post
Image for post

Текстовые поля состоят из трех частей: текст, лейбл и подсказка.

Image for post
Image for post

Для текстовых полей есть стили:

  • Пустой
  • Набранный текст
  • Только для прочтения
  • С подсказкой
  • Без подсказки
Image for post
Image for post

При изменении стилей с «набранный текст» на «пустой», лейбл встает на нужное место. При обратном изменении текст и лейбл возвращаются на исходные места автоматически.

Image for post
Image for post

Библиотека включает в себя часть символов, разработанных продуктовой командой компании DEVIM для ускорения процесса создания готовых макетов.

Установка

  • Скачать архив
  • Распаковать файл
  • Открыть Sketch файл
  • Открыть панель CRAFT с помощью ⌘+P
  • Выбрать пункт библиотеке на панели CRAFT
  • Выбрать библиотеку Material.Buttonsandfields.library из папки ui-material-in-symbols-master

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store