что такое figma в дизайне
Figma что это, и для чего нужна она?
Платная или нет?
Существует ли Figma на русском языке?
На данный момент Фигму на русском языке скачать нельзя, так как данная программа не содержит русской версии. Также не существует и русификаторов Figma. Поэтому работать в Figma придется на английском языке.
Если вы не знаете английский язык, то начните его учить с помощью этой программы. Все самые свежие материалы по UX и UI дизайну также на английском языке. Если вы хотите развиваться как веб-дизайнер, то лучше всего изучать все материалы не в переводах, а на языке оригинала.
Системные требования Figma
Для работы вам всего нужна свежая версия браузера:
Если же вы используете desktop версию, то авторы пишут только о требованиях к видеокарте:
Данные видеокарты являются относительно устаревшими поэтому в абсолютном большинстве случаев вы сможете установить Figma на свой компьютер.
Работа с Figma offline
Скажу сразу, что figma без интернета не работает, так как программе при запуске нужно синхронизация с облаком. НО! Можно обойти это требование: для этого запустите программу с включеным интернетом, дайте программе все загрузить, а затем отключите интернет. Готово! Теперь вы можете спокойно работать в программе. (Данные актуальны на август 2019 года).
Как работать с Фигма?
В обоих случаях вам доступен одинаковый набор функций и инструментов, что на процесс создания дизайна никак не скажется.
Как пользоваться figma
Это была основная информация по программе Figma. Далее рекомендую вам начать изучение программы с инструментов. Первый урок можно посмотреть по данной ссылке.
Регистрация в Фигма
Для того чтобы зарегистрироваться в программе Figma:
Figma — хитрости работы с редактором
В Figma много неочевидных моментов, которые не всегда можно найти в документации или нащупать методом тыка. Рассказываем о хитростях редактора.
Посмотреть полный список горячих клавиш
Все доступные комбинации горячих клавиш можно найти в разделе Помощь и ресурсы. Вот здесь:
Показать/скрыть интерфейс
Такие элементы редактора, как верхняя панель управления, а также две боковые панели — слоев и настроек — занимают на экране много места и не дают в должной мере сосредоточиться на макете. Чтобы убрать все панели и оставить только рабочее пространство, достаточно нажать сочетание клавиш на клавиатуре —
Ctrl + \.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Выбор цвета
Одна из самых полезных опций.
Чтобы быстро взять нужный цвет из другого места экрана, нажмите клавишу I на клавиатуре.
За пределами рабочей области цвет взять не получится.
Поиск по всем командам Figma
Если вы знаете, что хотите найти в Figma, но не уверены, где именно это находится, нажмите сочетание клавиш Ctrl + /. Откроется основное меню с активной строкой поиска.
Замена значения сдвига объекта
В Figma по умолчанию значение сдвига объекта 8px, чтобы его поменять, перейдите в главное меню, затем выберите Preferences — Nudge Amount.
В появившемся окне введите нужное значение, например, 10.
Замена группы на фрейм
Если у вас есть несколько элементов, объединенных в группу, и вам понадобился фрейм таких же размеров и форм, выделите группу и на правой панели в выпадающем списке выберите Frame. Вот так:
Figma — что это за программа и как в ней работать
Фигма — это популярный кроссплатформенный графический редактор для UX UI дизайнеров и веб разработчиков, с помощью которого можно создавать дизайн сложных интерфейсов, веб сайтов и мобильных приложений. А также в ней можно создавать интерактивные прототипы и небольшие анимации. В этой статье я подробно познакомлю вас с Figma — что это за программа, как в ней работать, чем отличается figma от photoshop и многое другое.
Figma — что это за программа простыми словами
Как я уже сказал, Figma — это удобный графический редактор для веб-дизайнеров и дизайнеров интерфейсов. Но по мимо дизайнеров, ей часто пользуются верстальщики и веб-разработчики для работы с макетами и переносом дизайна в HTML и CSS.
У фигмы есть 2-е отличительные особенности:
По большому счету, можно сказать, что фигма — это веб-сервис, а не программа, хотя есть возможность установить и приложение на компьютер и работать там. Благодаря своей простоте и удобству, большинство дизайнеров делают свой выбор в пользу Figma.
Видео-урок знакомства с интерфейсом Figma:
Также у фигмы есть огромное сообщество, которое с каждым годом только растет. Благодаря этому, figma постоянно улучшает свой интерфейс и периодически «выкатывает» своим пользователям новые фичи, которые упрощают работу над созданием дизайна.
Весь интерфейс программы выполнен на английском языке. То есть русской версии нет. Также как нет русификаторов и других «кряков». Если вы не знаете английского, то возможно первое время вам будет немного непривычно. Но я вас уверяю, через 2-3 дня работы вы будете хорошо в ней ориентироваться и без русской версии, потому что фигма достаточно интуитивная и удобная программа.
Figma — платная или бесплатная программа
Figma является условно бесплатным графическим редактором. Почему условно? Потому что помимо бесплатного тарифа у нее есть и платные. Если вы начинающий дизайнер, то вам с лихвой хватит бесплатной версии, потому что там есть весь функционал, необходимый для работы.
Другими словами, бесплатная версия фигмы позволяет вам комфортно работать над проектами без каких-либо существенных ограничений. Платные тарифы имеет смысл покупать лишь тогда, когда планируется работа над крупными проектами с участием команды дизайнеров. А также, когда необходим контроль версий для проектов более чем 30 дней.
Если вы, например, фрилансер, и у вас есть постоянный поток клиентов и хороший доход, то в этом случае тоже имеет смысл купить платную версию, потому что в ней есть некоторые плюшки. Подробнее про тарифы и чем они отличаются друг от друга мы поговорим ниже.
Возможности Фигмы
Многопользовательский доступ к файлам
Данная особенность фигмы сильно упростило жизнь дизайнерам и веб разработчикам. Раньше, при командной работе над одни проектом, например в фотошопе, нужно было постоянно поддерживать актуальную версию дизайна.
Если дизайнер вносил правки в макет, то ему нужно было сохранять свою копию файла и отправлять обновленную версию всем своим коллегам. А если он забывал это делать, то огребал от других дизайнеров, потому что те продолжали работать со старой версией дизайна.
Теперь, с помощью многопользовательского режима редактирования, команда дизайнеров может совершенно спокойно работать над одним проектом и видеть все актуальные изменения. Более того, у каждого дизайнера есть возможность просматривать версии проекта и наглядно видеть все вносимые правки.
Для работы с другими дизайнерами нужно сначала создать команду. Делается это с помощью функции «New Team» в левом нижнем углу интерфейса.
Далее пишите название команды.
Добавляете участников команды путем ввода их электронных адресов. Здесь нужно указывать те e-mail адреса, по которым ваши коллеги зарегистрированы в фигме.
И заключительный шаг — выбираете тариф. На бесплатном тарифе есть возможность создавать только 3 проекта, у которого будет многопользовательский доступ.
Облачное хранение данных в Фигме
Все проекты, над которыми вы работаете, хранятся в облачном хранилище Figma. Благодаря этому у дизайнеров отпадает необходимость расфасовывать все свои проекты по папкам и при каждом изменении обновлять файлы. В фигме все проекты сохраняются автоматически.
Но отсюда вытекает один минус — работать в фигме вы можете только при наличии подключенного интернета. То есть если у вас нет доступа к интернету, то начать работу в программе вы не сможете. А вот если в процессе работы у вас отключили интернет, то вы можете продолжить работу над текущим проектом, но в этом случае все ваши изменения не будут сохраняться.
Вам нужно будет дождаться пока связь с интернетом возобновиться и только после этого фигма сохранит все ваши изменения. В противном случае все изменения будут утеряны.
Главное правило — если в процессе работы отключили интернет, то не закрывайте программу, а дождитесь соединения с интернетом.
Компоненты
Компоненты не являются особенностью фигмы, потому что возможность работы с компонентами есть и в других похожих редакторах (Adobe XD, Sketch). Но этот момент стоит выделить, потому что компоненты значительно упрощают работу над дизайном.
Компонент — это элемент дизайна, с помощью которого можно легко вносить изменения во все макеты сразу. Принцип работы у него следующий: создается мастер-компонент (например, из кнопки) и для него задаются определенные стили (цвет, форма и так далее).
Далее мастер-компонент клонируется, создавая дочерние компоненты (их может быть сколько угодно). Затем, если нам нужно, например, поменять цвет всех кнопок, то мы меняет цвет в мастер-компоненте и все изменения применяются для всех дочерних компонентов во всем макете. Таким образом, буквально в пару кликов мы можем легко и быстро вносить изменения в дизайн.
История версий в Figma
Полезная функция Figma, позволяющая просматривать предыдущие версии проекта. При этом есть возможность восстановить любую из версий или сделать дубликат. Каждая новая версия проекта создается автоматически, если в течение 30 минут проект находился без изменений.
Помимо этого, можно вручную создавать свои версии для удобства.
Чем отличается Figma от Photoshop
Главное отличие Figma от Photoshop заключается в том, что фигма — это специализированная программа для разработки интерфейсов с удобным и простым функционалом. Фотошоп является более сложным редактором и изначально задумывался лишь для обработки фотографий.
Раньше, когда не было альтернатив, дизайнеры работали в фотошопе и создавали макеты там. Сейчас, фотошоп — это пережиток прошлого в плане разработки интерфейсов. К нему обращаются лишь в том случае, когда необходимо обработать картинку для сайта или сделать обтравку изображения. В этом плане, фотошоп — бесспорный лидер.
Некоторые дизайнеры до сих пор продолжают работать в фотошопе, аргументируя это тем, что там есть все возможности для создания дизайна. Это действительно так, но когда речь заходит об удобстве, то фотошоп проигрывает по всем фронтам. Как по мне, то это все равно что есть суп вилкой (фотошоп), в то время как есть более удобный инструмент для этих целей (фигма).
Третье отличие — удобная организация рабочего процесса и возможность вносить быстрые изменения в дизайн. Выше мы уже рассматривали с вами такое понятие как компонент и возможность быстрого редактирования. В фотошопе такой возможности нет и в случае правок, вам придется вручную изменять все элементы дизайна.
Хорошо, если у вас всего 1-2 макета, а представьте если таких макетов у вас 50 или более? В последних версиях фотошопа, есть возможность создавать смарт-объекты. Это некий аналог компонентов, но работать с ними не так удобно.
К тому же, помимо компонентов, в фигме есть возможность создавать стили, чего нельзя делать в фотошопе. Да и в принципе вся механика работы фигмы «заточена» под разработку интерфейсов, а не под обработку фотографий. Это две большие разницы.
Тарифы Figma
На данный момент у фигмы доступно 3 тарифа: Starter, Professional, Organization. Посмотреть их можно на официальном сайте Figma, в разделе «Pricing».
Тариф Starter
Этот тариф является полностью бесплатным и по умолчанию доступен всем зарегистрированным пользователям. Но у него есть несколько ограничений:
В остальном, полная свобода действий и никаких других ограничений.
Тариф Professional
Это первый платный тариф и стоимость его составляет 15$ за 1 редактора в месяц или 12$ за 1 редактора в месяц при оплате на год. У этого тарифа есть дополнительные плюшки:
Чаще всего этим тарифом пользуются фрилансеры, у которых имеется постоянный поток заказов.
Тариф Organization
Это самый дорогой тариф фигмы и стоимость его составляет 45$ за 1 редактора в месяц при оплате на год. В этом тарифе нельзя оплачивать за 1 месяц, только годовая оплата. Сюда включено все то, что входит в тариф Professional, плюс:
Данный тариф идеально подходит для больших компаний со штатом дизайнеров.
Как работать в Фигма
Для начала работы вам необходимо зарегистрироваться на сайте Figma и создать там свой профиль. Для этого нужно нажать на кнопку «Sign up» в правом верхнем углу сайта или на кнопку «Try Figma for free» под заголовком.
Далее заполнить поля «E-mail» и «Password» (Пароль) и нажать на кнопку «Create account».
Поздравляю, ваш аккаунт создан, и вы можете приступать к работе. Я подготовил для вас бесплатный мини-курс по работе в программе фигма, который поможет вам быстро освоить данный редактор.
На данный момент там 13 подробных видео-уроков с моими комментариями, поэтому переходите и изучайте.
Как скачать программу Фигма на компьютер
Несмотря на то, что фигма позволяет работать через браузер, это все же не совсем удобно. Во-первых, при работе в браузере редактор может немного «тормозить», а во-вторых, доступ к некоторым функциям осуществляется не так удобно, как в приложении.
Именно поэтому, у фигмы есть возможность скачать себе на компьютер приложение редактора и работать через него. Для этого вам нужно зайти на официальный сайт Figma и в навигации выбрать пункт «Resources» и далее раздел «Downloads»
Затем выбрать нужный вам инсталятор (для MacOS или для Windows) и скачать его.
После установить программу себе на компьютер, запустить ее и выполнить вход в свой профиль.
Заключение
В этой статье я подробно рассказал вам про figma: что это за программа, как в ней работать и чем figma отличается от photoshop. Надеюсь, данная статья оказалась для вас полезной, и вы смогли найти все ответы на свои вопросы.
Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.
5 лайфхаков в Figma: повтор действий, изменение картинок, функциональный пробел
Рассказываем, как быстро скопировать несколько одинаковых блоков, исправить обрезанную иллюстрацию и выровнять макет по сетке.
Иллюстрация: Оля Ежак для Skillbox Media
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее корректировать размер фрейма или меньше ошибаться с выделением объектов.
Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.
Дублировать предыдущее действие
В Figma дизайнерам часто нужно копировать одни и те же элементы: плашки, карточки, кнопки, макеты с экранами. Если этих элементов десять или 20, то приходится на это тратить много времени: и копировать, и выравнивать отступы. Чтобы не делать всё это вручную, нажимайте Ctrl + D, и Figma продублирует то, что вы сделали в последний раз. В случае с копированием все отступы сами собой получатся одинаковыми:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Игнорировать пропорции фрейма
Обычно при изменении размера фрейма за ним меняются пропорции внутренних объектов: их расположение и размер. Это удобно при проверке макета под разные экраны. Но если вы просто хотите изменить размер фрейма, эта функция вам помешает.
Чтобы пропорции внутренних объектов не менялись, при изменении фрейма зажмите Ctrl:
Изменить отображаемую часть картинки
Если вы случайно обрезали фотографию неправильно, это можно быстро исправить, изменив видимую часть изображения. При этом контейнер под иллюстрацию останется прежним:
Настроить шаг отступа
С помощью стрелок на клавиатуре в Figma можно сдвигать любой элемент в соответствующую сторону на один пиксель. А если при этом зажать Shift, блок будет сдвигаться сразу на десять пикселей.
Если вы работаете с сайтом на 8-пиксельной сетке, стандартный шаг в Figma для вас будет неудобен. Чтобы его изменить, нажмите кнопку 
, затем перейдите в Preferences и Nudge Amount. В появившемся меню измените шаг смещения блока:
Расширенные функции пробела
При выделении нескольких объектов у вас есть шанс ошибиться и выбрать не те. Чтобы переместить область выделения в нужную точку, зажмите пробел и передвигайте мышку. Если отпустить пробел, область можно будет изменить:
Примерно так же можно использовать пробел при создании фигуры: если она встанет не там, просто зажмите пробел и переместите её куда нужно. Кстати, если зажать Shift, фигура будет изменять размер пропорционально:
По умолчанию Figma пытается расположить любой объект внутри фрейма, находящегося над ним. Но если вам это не нужно, просто зажмите пробел во время перемещения:
Дизайн-система в Figma. Взгляд на интерфейс через компоненты
Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.
Совсем недавно я разработал свою уже 4-ю библиотеку для Figma и только сейчас я готов структурировать знания и опыт накопленные в процессе разработки этой и предыдущих систем.
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Осмысление применение наступает после хайпа
Как и любое новшество на рынке, дизайн-системы пережили хайп и перешли в стадию практического переосмысления. Отныне их можно применять совершенно в разных случаях и для решения большего типа задач. Для крупной организации — это визуальный язык, брендинг, порядок, единство дизайна и кода. Для небольших организаций — это командная библиотека в Figma, в которой эффективен небольшой штат разработчиков и дизайнеров. Дизайн-систему может применять для своих задач и частный фрилансер — это и автоматизация правок от клиентов (через мастер-компоненты он быстро двигает пиксели, меняет цвета и формы) и постепенно растущая база UI виджетов (все они упорядочены и логично перестраиваются при resize). Скорость выполнения задач с таким продуктом возрастает в несколько раз. Сегодня каждый сможет найти для себя плюсы работы внутри дизайн-системы.
Как бы я объяснил суть дизайн-системы в Figma простым языком? Всего в четыре слова: “Поменяли тут — поменялось везде”. В этом кроется главный принцип использования компонентов и экземпляров при разработке любого интерфейса, который при корректной последовательности использования атомов и молекул для создания темплейтов, превратится со временем в полноценную систему.
Смотреть на мир и видеть компоненты
Раньше дизайнеру достаточно было просто рисовать и двигать пиксели. Иногда он даже упорядочивал и аккуратно проименовывал слои и группы. Потом появились символы и дали полуавтоматизацию процессов. Сейчас пришли компоненты и изменения можно транслировать автоматически в разные фрагменты артбордов, разбросанные по всей дизайн-системе. Применение компонентов изменило и сам подход к визуальной разработке.
Компонентная разработка интерфейсов заключается прежде всего в унификации и последовательности. Как я уже сказал, раньше достаточно было просто двигать пиксели, но с приходом компонентов в проектирование интерфейсов дизайнеру приходится держать в уме расстановку constraints, логику экземпляров, категоризацию всех элементов в системе, еще и оставаться последовательным при создании сложных компонентов из простых. С одной стороны процесс создания интерфейса сильно упростился за счет софта нового поколения. С другой — появление нововведений заставляет обучаться и приобретать новые навыки, уходить в специализацию. Визуальный разработчик дизайн-систем — возможно очень перспективная профессия уже ближайшего будущего.
Унификация компонентов и переиспользуемость
Эффективная дизайн-система не содержит лишних компонентов. Любой подобный продукт начинается с исследования на предмет возможности обобщить повторяющиеся блоки и переиспользовать их в разных случаях. Простой пример, компонент List можно использовать как элемент каталога файлов, так и для, например, визуализации отзывов клиента. В этом и есть вся суть унификации и переиспользуемости:
Видите? Оба компонента идентичны по структуре, отличается лишь размерность и плотность шрифта, контент в круглом элементе.
Для создания интерфейса невозможно придумать какой-то новый модуль. Все списки, таблицы, заголовки и аккордеоны уже существуют, но используются иногда по-разному. При планировании состава компонентов нужно начинать с исследования на предмет поиска визуально похожих, чтобы постараться свести к одному компоненту в системе, экземпляр которого будет переиспользоваться с разным наполнением. Хотя сейчас Figma достаточно мощна, чтобы хранить в одной библиотеке 500 и более компонентов, лучше стараться сводить их к минимуму, чтобы проще было организовать структуру. Итак, настало время наконец-то перейти к самому продукту…
Кейс: веб дизайн-система для landing сайтов. Встречайте Websy!
В этой статье речь пойдет о конструировании веб-сайтов. Слово “конструирование” использовалось неспроста. Эта дизайн-система является своеобразным конструктором, чтобы из предоставленных блоков быстро создавать любые templates, и еще быстрее их кастомизировать. Как для мобильных устройств так и для десктопных. Именно компонентная архитектура позволит сделать это эффективно; чтобы в будущем вы могли просто клонировать исходник, быстро сменить цвета, типографику и создавать новые темы. “Поменяли тут — поменялось везде”. Помните?
Исследование и анализ будущего состава
Landing-сайты идеальная сфера применения компонентного подхода. Хватит пальцев двух рук, чтобы сосчитать все блоки, из которых строится классический веб-сайт, рекламирующий товар, услугу или сервис: Header, Footer, Call to action, Features, Testimonials, Download, Video и так далее. Принцип такой системы для конструирования в наличии достаточных комбинаций всех перечисленных блоков. Таким образом можно как паззл собрать любой сайт + мобильную версию. Оставалось лишь в качестве исследования изучить сотню свежих landing-сайтов и коллекционировать наиболее часто использовавшиеся элементы. Их в будущем я перерисую, создам компоненты, задам определенный стиль и в конце соберу темплейты. Забегая вперед, скажу что в итоге удалось собрать 18 полноценных темплейтов: 9 полноэкранных и 9 мобильных версий. Я старался создать универсальные шаблоны, которые одинаково подходили бы для презентации сервисов, приложений, портфолио и каких-либо других продуктов
Большинство сайтов в основном безлики
Именно к таким выводам я пришёл, когда попытался просто гуглить. Веб в целом быстро устаревает и это нормально. Ведь быть в актуальном дизайне — это всегда перемены. А мы относимся к переменам с опаской, осторожностью. Если старый сайт работает и кое-как продает себя, то лучше не мешать механизму работать. Но есть компании, которые занимаются оптимизацией внутренних процессов. И продуктовый дизайн для них не на последнем месте. Большинство хороших сайтов, чтобы провести аудит, мне удалось найти на hyperpixel.io и www.lapa.ninja. Я предполагаю, что просмотрел 100+ различных ссылок и это лишь малая часть списка. Должно быть чувство меры, чтобы понимать объем, необходимый для первой версии (читайте MVP). Поэтому я остановился, когда объем компонентов в разделе Text blocks (различные текстовые блоки, возможно с формами и кнопками) достиг числа 30:
Внешний вид продукта
Как именно должен выглядеть продукт? Один из важных вопросов на этапе проектирования. На поиск ответа и исследования тратятся огромные ресурсы компаний. Для себя я решил так — продукт должен быть визуально актуальным. Дизайн и стилистика должны быть не вчерашними, не завтрашними, а в том виде, который сейчас в тренде. Простой пример: сегодня редко где встретишь шрифт Open Sans в западном вебе, хотя три года назад он был очень актуален. Если Google как бренд переходит на Product Sans, надо присматриваться к похожим шрифтам. Если Intercom использует стилистику papercut в своем продуктовом дизайне, надо понять как похожие приемы использовать в своих проектах. Сейчас типографика — это одновременно дизайн, послание и настроение. Давайте с нее и начнем.
Хороший шрифт — это уже половина дела
Идея пришла совершенно внезапно. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба!”. Видимо в тот момент и родился план создания системы именно для web.
Хорошая дизайн-система в Figma — это:
Использование глобальных стилей
С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в Figma существенно возросла. Увеличилась и производительность в целом. Глобальные стили позволяют быстро поменять шрифт в сотнях объектах, изменить цветовую схему и, фактически, получить новый стиль.
Цвета
Сколько цветов хранить в системе? Мне встречались дизайн-системы под Sketch в которых были объявлены все цвета радуги + десяток оттенков для каждого. В реальности это чрезмерно много и 80% такой палитры никогда не будут использоваться. В моей системе Websy, о которой я подробно начинаю рассказывать с этого момента, хранится всего 8 цветов: белый, черный, основной цвет (action), дополнительный цвет (secondary), и 4 градации черного. С белым и черным, я полагаю, все ясно. Action & Secondary цвета мы используем для окраса элементов, с которыми можно взаимодействовать (кнопки, иконки, ссылки). Secondary цвет можно использовать для акцента. Например, для выделения важной фразы, слогана и т.п. Допускается объявление Success / Warning цветов, если ваша система больше про интерфейсы, чем про сайты.
Я адепт материального дизайна, поэтому я держу в системе несколько вариантов подъема над плоскостью (elevation). В Websy вы найдете 4 комбинаций теней: 2dp, 4dp, 8dp, 16dp. Они отличаются смещением и размытием (blur). Например, для обычной карточки рекомендуется использовать 2/4dp тени. Для выпадающих списков, onhover состояний и диалогов можно использовать 8/16dp. Внимательный дизайнер уже подметил, что некоторые продукты Google сейчас используют reflex-тени и двойные тени, которые более реалистичны. Поэтому дополнительно в системе объявлено несколько многослойных теней, которые дают очень реалистичный эффект:
Через глобальные стили тени переключаются всего в пару кликов.
Обводка
Параметр Stroke в Websy регулируется через несколько отдельных компонентов, которые отличаются разными параметрами скругления углов. Обводка чаще всего используется для кнопок и текстовых полей. Аналогично теням, объявлено 5 вариантов скругления углов: 0px, 4px, 8px, 16px и 99px. Для чего столько? Начну с примера того, как вообще используется компонент обводки, например для кнопки:
Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.
Расстановка constraints для компонентов.
Давайте я расскажу об этом пункте и остальных в следующей главе. Про поведение модулей и элементов при изменении размеров нужно сказать многое. А также мы перейдем к очень интересной части — описанию всех компонентов в составе веб-дизайн системы Websy. И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно.
На десерт небольшое видео.
В данном ролике я с помощью готовых компонентов собираю layouts, которые будут использоваться в качестве экранов-презентаций для системы. Первый вариант мне понравился меньше, а второй (начинается с 1:30) я взял за основной: