Масштабная трансформация
Сбербанка в прямом эфире
LIVE
Дизайн
Mish
6944

10 лайфхаков в работе с Figma

Мы студия Mish, преимущественно сфокусированы на дизайне сайтов и мобильных приложений. В прошлом году полностью перешли со Sketch на Figma, уже обжились в новом редакторе и очень его любим. Рассказываем, какие лайфхаки применяем, чтобы сделать работу в Figma эффективнее.

В закладки
Слушать

Статья будет полезна как новичкам, так и уже опытным пользователям.

1. Делаем структуру страниц

На небольших проектах мы всю работу ведем в одном файле: храним в нем черновики, концепты и чистовые макеты с компонентами. Чтобы разработчик и заказчик понимали, где лежит готовый для верстки макет, а где концептуальный черновик, мы делим файл на страницы.

Список страниц дробим на условные разделы. Для лучшего считывания используем эмодзи, а названия страниц отбиваем пробелами от начала строки. Получается что-то вроде структуры с вложенностью.

На самом деле эта структура лишь визуальное решение, так как Figma не позволяет создавать дополнительные уровни вложенности в станицах. В качестве названия раздела используется пустая страница.

Ниже несколько примеров такой структуры.

С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.

2. Называем одинаково слои на двух связанных компонентах

Чтобы при смене состояний элемента сохранялись тексты, слои текстовых элементов должны быть названы одинаково. Это удобно при изменении состояний кнопок, элементов списка и инпутов.

Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное

Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.

3. Все картинки заводим в цветовые стили

Чтобы быстро сделать заливку фигуры логотипом, флагом или аватаром, удобно хранить эти картинки в качестве цветовых стилей.

4. Быстро находим все элементы с похожими свойствами

Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit > Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.

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

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

5. Переносим мастер-компонент в другой файл

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

Для этого нужно:

  1. скопировать мастер-компонент в нужный файл;
  2. присоединить этот файл в качестве библиотеки к текущему;
  3. выбрать любой экземпляр старого мастер-компонента;
  4. нажать Edit > Select All with the Same Instance;
  5. через меню Instance на панели инструментов заменить выделенные экземпляры на новый компонент;
  6. Готово! Осталось просмотреть все экземпляры на предмет слетевших текстов и стилей, а чтобы тексты при замене компонента сохранялись, называйте одинаково слои на двух связанных компонентах (об этом мы писали выше).

По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин Style Organizer или его аналог.

6. Делаем автолейауты из списков

Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся.

7. Делаем автолейауты из всего

Знакомая ситуация? 👇

Все это очень просто решается созданием автолейаута из всех трех элементов.

Еще пара примеров:

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

Такой прогресс-бар создается из автолейаута и невидимого текста. Такой способ пригодится, когда прогресс находится внутри компонента и нужно показать несколько состояний без детача.

8. Растягиваем автолейауты

Чтобы при растягивании блоков контент внутри них адаптировался под размер, нужно при настройке автолейаута использовать параметр «Strech Left & Right» сверху на панели инструментов.

9. Открываем больше одного окна в десктопном клиенте

Не все знают, что можно открывать несколько окон десктопного приложения Figma. Делается это простым шорткатом Cmd+Shift+N.

Это удобно, если вы работаете одновременно с несколькими файлами, например, iOS, Android и библиотекой компонентов.

Кстати, почему большие проекты лучше держать в разных файлах, читайте в другой нашей статье.

10. Не считаем в уме

Поля, в которых можно редактировать значения, понимают простейшие арифметические операции. Можно увеличить ширину элемента в два раза или прибавить к значению 50%. Это сильно ускорит процесс и поможет не ошибиться в устных подсчетах.

Мы ввели эти простые правила у себя в Mish. Результат превзошел сам себя: многие задачи стали выполняться сильно быстрее и эффективнее. Также введение единых правил и внутренних гайдлайнов позволили переключать дизайнеров с проекта на проект без потерь времени, что оценили не только коллеги внутри студии, но и клиенты.

Над статьей работали:

Текст: Андрей Кретинин

Редактура: Дарья Крупина

Арт-директор: Иван Крестов

{ "author_name": "Mish", "author_type": "self", "tags": ["figma"], "comments": 20, "likes": 67, "favorites": 332, "is_advertisement": false, "subsite_label": "design", "id": 149441, "is_wide": true, "is_ugc": true, "date": "Thu, 13 Aug 2020 12:30:00 +0300", "is_special": false }
Сервисы
Самая понятливая нейросеть: зачем нам рейтинг лучших NLP-систем и кто учит русскому языку англоязычные модели
Меня зовут Татьяна Шаврина, и я расскажу, как мы (команда AGI NLP Сбербанка) запустили проект Russian SuperGLUE…
Объявление на vc.ru
0
20 комментариев
Популярные
По порядку
Написать комментарий...
6

11. Использовать spacing-слои в autolayout. Это здорово экономит время при сборке больших и сложных интерфейсов.
12. Заполнять текстовые блоки и фотографии в интерфейсах подготовленными данными из JSON-файла.

Ответить
0

spacing слои

Это типа прозрачные квадраты, вместо прописанных отступов в autolayout? Или есть ещё какой-то способ?

Ответить
1

все верно

Ответить
1

Да, только этот. Для удобства использования - можно сделать их в виде набора компонентов.

Ответить
0

Скорее всего. Не все можно отступами в автолэйаутах сделать

Ответить
2

Пизда глазам

Ответить
–1

Джунам полезно будет

Ответить
0

Приветствую всех, кто в курсе, есть такие подобные фишки в Sketch? Недавно начал углублять знания по работе в Sketch, интересует стоит ли переходить на сразу на Figma?
По проэктам обычно работаю сам.
Спасибо за ответы, хорошего дня.

Ответить
2

Забудь про скечт, они уже проиграли давно

Ответить
0

«5. Переносим мастер-компонент в другой файл
...
присоединить этот файл в качестве библиотеки к текущему;»

При условии, что вы на платном аккаунте. Нет?..

Ответить
0

там же только за доп. юзера на проект просят $15/m, нет? 

Ответить
0

При платеже еще комиссию берут. У меня списывается 18USD. Если платить сразу за год, то 12USD + комиссия.

Ответить
0

Библиотеки работают и на бесплатном аккаунте

Ответить
0

Библиотеки работают, но компоненты из них на бесплатном аккаунте использовать нельзя, насколько я помню. Только стили цветов, эффектов.

Ответить
0

Можно. Создается команда, для которой в рамках бесплатного аккаунта можно создать 3 проекта, например web, ios, android. И для каждого из файлов в рамках этих проектов будет работать единая библиотека со стилями, цветами, компонентами и тд.

Ответить
0

Не смог воспроизвести.
Из файла дизайн-системы команды передаются только цвета (хотя там есть компонент). При попытке создать отдельную библиотеку, предлагает перейти на платный план.
Как вы на бесплатном аккаунте это сделали?

Ответить
0

Важно отметить: я говорю о присоединении внешнего файла в качестве библиотеки компонентов. Как написано в тексте.

Ответить
0

+ Использование плагина Appearance для генерации Dark mode. 

Figma во многом обходит остальные инструменты, несмотря на какие-то недочеты с Auto Layout https://spectrum.chat/figma/general/lots-of-chat-about-auto-layout~6228ae11-8fae-49e5-ad8b-a07d34be0a90

Еще один инструмент Framer, достойный внимания, для тех, кто немного знаком с программированием.

Ответить

Комментарии