Figma, в принципе, самая крутая вещь уже давно и причем самая быстрая. Однако Figma также содержит несколько скрытых особенностей, которые заслуживают вашего внимания.
1. Figma Git
Итак, вы изменили все на авто-лэйаут только для того, чтобы узнать, что ограничения больше не работают, и теперь вам нужно изменить все это обратно? То, что обычно занимает у вас целую вечность, всего лишь один щелчок мыши в Figma, и вы возвращаетесь к предыдущей версии. Если вы поклонник Git или Abstract, это вам точно понравится.
Figma поставляется с интегрированной историей версий, которую вы, возможно, еще не заметили. Перейдите в меню>Файл>показать историю версий, и вы можете увидеть все автоматически сохраняемые версии и перейти к ним.
Нажмите на плюс или ⌘+⎇+S, чтобы создать свой собственный контроль версий. Вы можете просматривать, сохранять, делиться, дублировать и восстанавливать версии файлов.
2. Умная и чистая селекция
Если вы выберете группу совпадающих элементов (это могут быть фреймы, группы или компоненты, но они должны быть одной и той же базовой настройкой), вы увидите символ сетки в правом нижнем углу рамки выбора. Нажмите на нее, и все предметы волшебным образом разместятся в аккуратной сетке!
Теперь вы увидите розовые линии между элементами, перетащите и отрегулируйте вертикальное и горизонтальное заполнение (также работает через правую панель свойств). Кроме того, вы можете поменять местами элементы, просто нажав на круг в центре и перетащив их на новое место в выделенном фрагменте.
3. Быстро импортируйте изображения
Нажмите ⌘+⇧+K и выберите несколько изображений. Затем вы сможете нажимать на фигуры, и он будет заполнять их выбранными изображениями одно за другим.
4. Коррекция
С помощью клавиш со стрелками вы можете перемещать объекты, если вы держите нажатой клавишу Shift, делая это, они будут “nudge”. По умолчанию это большее значение установлено на уровне 10px. Вы будете использовать это, и это ускоряет позиционирование. Однако вы можете захотеть работать с классической сеткой 8px. В этом случае вы можете настроить подталкивание через меню> Настройки > количество подталкивания.
Примечание: держите нажатой клавишу alt, и вы можете видеть расстояния до других объектов во время подталкивания.
5. Инструмент Arc
Есть маленькая точка на краю каждого круга, который вы рисуете, вы никогда не задумывались, что это такое? Его называют инструментом Arc, нажмите на него и переместите мышь, и вы можете нарезать свой круг. В верхней части вашего среза вы найдете еще один маленький кружок с именем “ratio” для настройки. После того, как вы активировали инструмент Arc, свойства также отображаются на правой панели свойств.
6. Batch create
Выберите сразу несколько объектов (например, значки) перейдите к значку компонента; теперь вы видите выпадающий список, выберите “создать несколько компонентов”. Затем нажмите ⌘+R, чтобы переименовать слои. Используйте префикс, например icons/, и добавьте текущее имя или список.
Кстати: переименование слоев очень легко дается с помощью Figma. Вы можете искать с помощью регулярных выражений, чтобы переименовать свои слои. Это довольно продвинутый подход
7. Комментировать компоненты = комментарии CSS
Возможно, вы заметили этот небольшой раздел комментариев для компонентов, он отлично подходит для ваших собственных комментариев, но его фактическая цель заключается в том, что он добавляет комментарий в код в режиме проверки для просмотра разработчиками. Очень удобно!
Примечание: в случае, если вы еще не заметили; также любой стиль в цвете или шрифте автоматически добавляется в качестве комментария к режиму проверки.
8. Воспроизведение анимированных GIF-файлов
Эта функция пряталась у всех на виду. Добавьте Gif в свой кадр, как и в случае с любым другим изображением, затем нажмите на свойство image, и вы сможете выбрать изображение предварительного просмотра в Gif. Активируйте режим презентации, и все, вы увидите свой Gif в действии!
9. Добавление ссылки
Просто выделите какой – нибудь текст, нажмите на значок скрепки и добавьте URL-адрес, чтобы встроить реальные ссылки в ваши прототипы.
10. “Select all with same…”
Вы можете изменять шрифт, свойства, заливку, эффект обводки. Выберите объект или текст и перейдите в меню> Правка > Select all with same… Убедитесь, что все элементы одинаковы и добавлены в стили перед передачей.
11. Быстрая навигация внутри групповых слоев
Удобный ярлык используется при выборе фрейма или группы. Нажмите кнопку Return, и вы спуститесь вниз по структуре группы, выбрав все дочерние элементы. С помощью shift+Return вы поднимаетесь обратно.
12. Переместите основные компоненты на собственную страницу
Автоматизированная страница главного компонента – это единственная функция, которую упускается почти каждым в Figma. Да, есть вкладка Assets, но мне все равно надо иметь все основные компоненты в одном месте (как в Sketch), чтобы получить обзор и настроить их рядом друг с другом. Копирование и вставка создадут экземпляр, но с помощью щелчка правой кнопкой мыши вы можете отправить свои основные компоненты на отдельную страницу и создать свой собственный обзор.
13. Предварительный просмотр палитры цветов
Когда вы выбираете цвет с помощью инструмента выбора цвета, попробуйте нажать на цвет, но пока не отпускайте его. Это позволяет вам свободно перемещать курсор по экрану и пробовать различные цвета в вашем выборе.
14. Ярлыки cheatsheet
Нажмите Shift+Ctrl+? или используйте меню burger слева, чтобы увидеть все ярлыки в Figma. Приятная деталь: синие – это те, которые вы уже использовали, поэтому уделите немного внимания серым.
15. Используйте раздел сообщества
В вашей рабочей области у вас есть прямой доступ к файлам, плагинам, иллюстрациям, значкам, системам дизайна и многому другому.