- Немного из истории Figma
- Лайфхаки опытных дизайнеров
- Еще несколько рекомендаций о том, как работать в Figma
Расширенный функционал Figma пришелся по душе многим профессионалам и вызывает массу интереса у тех, кто только учится. Здесь очень много функций, которые позволяют значительно экономить время и тем, кто решил разобраться в вопросе о том, как пользоваться Figma с максимальной выгодой, стоит подробнее разобраться в данном вопросе.
Немного из истории Figma
Figma – одна из инноваций в мире графического дизайна, предназначенная для упрощения и усовершенствования процесса прототипирования мобильных приложений. В основе редактора лучшие фишки топовых инструментов, объединенных на облачной платформе. Первый релиз инновации состоялся в 2016 году и дальше поле сервиса стремительно росло. По сути, это была первая подобная разработка с поддержкой команд в режиме онлайн. С тех пор очень многие компании, работающие в сфере графического дизайна, перешли на Фигму, давно оставив без внимания тоже нашумевший в свое время Фотошоп.
Лайфхаки опытных дизайнеров
Простой круговой прогресс
Если вы еще не знакомы с инструментом Arc, пора это сделать. Перетащите его на артборд, и вы получите простой и красивый индикатор прогресса.
Масштабирование от искажения
Оптимальные пропорции вашего дизайна можно сохранить, используя инструмент масштабирования. Просто выберите его и нажмите на клавиатуре кнопку «К», потяните курсор, и все! Можете использовать способ, увеличивая и уменьшая картинку.
Займите фрейм, если нужно
При необходимости вы можете легко перетащить объекты за пределы фрейма. Удерживайте клавишу пробела с тем, чтобы он оставался внутри контейнера. Также можно отключить опцию Clip contents, предназначенную для фрейма, чтобы видеть объект, содержащийся в нем, был хорошо виден. Для этого также можно кликнуть CTRL+Y. Опция поможет отразить контуры объекта.
Систематизируйте сетку
Чтобы привести в порядок объекты, выберите несколько объектов в массиве, кликните по иконке в углу и выровняйте расстояние между объектами. Также вы можете просто перетаскивать иконки, располагая их так, как вам удобно.
Повтор последнего действия
Чтобы выполнить данную команду, нажмите CMD+D, аналогичное действие позволит дублировать и все остальное.
Пипетка для цвета
Воспользуйтесь инструментом «Пипетка», чтобы предварительно посмотреть выбранный цвет на объекте. Так вы можете менять оттенки до тех пор, пока не остановитесь на самом интересном.
Разблокировка
Если использовать клавиши СMD+/, вы можете совершить целый ряд интересных действий, которые значительно сэкономят ваше время. Самое распространенное из действий – разблокировка разных объектов.
Вставляем картинки в плейсхолдеры
Кликните CMD+Shift+K для того, чтобы изменить цвет заливки фигур, фреймов и изображений.
Подробнее о пробеле
Перетащите область выделения, а после держите клавишу пробела нажатой, чтобы изменить параметры выделения указателя.
Рисуете фигуру? То же самое проделайте с пробелом и переместите объект во время его создания.
Content Reel и Unsplash
Это два незаменимых плагина, при помощи которых вы можете экономить время, то есть, одним кликом мышки вставлять любой дизайн, аватарку и т.д.
Еще несколько рекомендаций о том, как работать в Figma
Создаем структуру страниц
Для небольших проектов работа ведется в одном файле, в нем же хранятся черновики, концепты, чистовики с компонентами. Для понимания того, где находится готовый для верстки макет, а где черновик, файл делим на страницы.
Список страниц дробим на условные разделы, для лучшего считывания используем эмодзи, а название таблиц отбиваются пробелами от начала строки. Получается что-то вроде структуры с вложением.
По сути, структура лишь визуальное решение, поскольку Figma не дает возможности создавать дополнительные уровни вложенности на страницах. В качестве названия используется пустая страница.
Даем одинаковое название слоям
Чтобы при смене состояния элемента тексты сохранялись, они должны быть названы одинаково. Это очень удобно при изменении состояний кнопок, элементов и т.д.
Меняется пустое состояние инпута на фокус, лейбл «Адрес» переезжает в верхнюю часть инпута и сохраняет название, а не сбрасывает его. Чтобы так работало, слои текстовых элементов должны называться одинаково.
Каждую картинку заводим в цветовой стиль
Чтобы залить фигуры логотипом, флагом или аватаром, удобно хранить картинки в качестве цветовых стилей.
Быстрый поиск элементов с аналогичными свойствами
В два клика можно найти на одной странице элементы с похожими свойствами, к примеру, заливкой или обводкой. Нажимаем Edit > Select All with the Same и выбираем, с какими свойствами элементы выделять.
Также этот метод можно использовать, чтобы перенести мастер-компонент в другой файл.
Перенос мастер-компонента
В редакторе нет встроенной возможности перенести используемый мастер-компонент в сторонний файл. Делать это придется вручную. Однако можно ускорить процесс:
- скопировать объект в нужный файл;
- соединить файл с текущим;
- выбрать элемент из старого компонента;
- кликнуть Edit > Select All with the Same Instance и заменить выделенные элементы на новые.
Осталось проверить все компоненты на предмет появившихся искажений в текстах и стилях. Для цветового спектра можно применить Style Organizer или любой из его аналогов.
Автолейауты из списков и всего остального
Сделав список автолейаутом, вы значительно облегчите себе работу. Быстро увеличить количество строк поможет CMD+D, тем же способом можно удалить строчки из середины списка. Нужно заметить, что установленные размеры отступов при этом не меняются.
Существует возможность при помощи автолейаута создавать прогресс-бары из автолейаута и невидимого текста. Данный метод особенно актуален в том случае, если прогресс расположен внутри элемента и нужно увидеть несколько состояний без детача.
Если вам интересны новшества в IT-сфере, вы хотите получить интересную и высокооплачиваемую профессию, обратите внимание на обучающие IT-курсы.
