{"id":9185,"title":"\u0427\u0435\u0440\u043d\u0438\u043b\u0430 \u0438\u0437 \u0432\u044b\u0445\u043b\u043e\u043f\u043d\u044b\u0445 \u0433\u0430\u0437\u043e\u0432: \u043c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","url":"\/redirect?component=advertising&id=9185&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-bizhuteriya-iz-chaynogo-griba&placeBit=1&hash=a88533bf78285d41072084482619c82803fd6598d1bcc2e142642ff721574ad7","isPaidAndBannersEnabled":false}
Дизайн
Mish

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. Результат превзошел сам себя: многие задачи стали выполняться сильно быстрее и эффективнее. Также введение единых правил и внутренних гайдлайнов позволили переключать дизайнеров с проекта на проект без потерь времени, что оценили не только коллеги внутри студии, но и клиенты.

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

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

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

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

0
20 комментариев
Популярные
По порядку
Написать комментарий...

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

6

spacing слои

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

1

все верно

1

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

1

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

0

Пизда глазам

2

..Пушкина

0

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

0

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

4

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

–1

«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, достойный внимания, для тех, кто немного знаком с программированием.

0
Читать все 20 комментариев
Корпоративный проект в Казахстане

Юридическая фирма «Надмитов, Иванов и Партнеры» успешно представляла интересы приобретателя по сделке приобретения 100% долей в уставном капитале общества, крупного производителя битумных материалов в Казахстане, регулируемой по российскому праву.

О прекрасном: графовая аналитика в 3D

Порой Data Scientist’ам приходится иметь дело с графами. Чаще всего это дело не такое уж и сложное, но бывают разногласия, которые начинаются при представлении результатов заказчику данного графа, ведь у каждого своё представлении о прекрасном. Особенно, когда дело касается расположения узлов.

Как мы сделали проект про ВИЧ и почему это важно для развития бизнеса

С 2018 мы стали вновь выпускать спецпроекты на общественно-социальные темы: сделали проект о ДТП в России и неофициальную версию гибели подлодки «Курск». В этой статье я расскажу, как социальные проекты помогают агентству развиваться и что стоит учесть, когда вы решаетесь на этот шаг.

Илон Маск отправил сотрудникам письмо о риске банкротства SpaceX из-за медленного производства двигателей — CNBC Статьи редакции

Компании нужно ускориться, чтобы запускать ракеты минимум раз в две недели в 2022 году, написал Маск.

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

А у вас сошелся «Дебет Кредит»?
Дайджест новых стилей и сайтов digital-компаний за ноябрь от Embacy: Vevo, Winamp, Worldcoin и другие

Всем привет! Сегодня 1 декабря, а значит, что это дайджест новых стилей и сайтов digital-компаний, которые вышли в ноябре. Пишу его я, Вадим Орлов, основатель Embacy.

«Как иронично, что фирме в сфере психического здоровья плевать на психическое здоровье собственных работников» Статьи редакции

Сотрудники Spring Health жалуются на соучредительницу Эйприл Кох: она запугивает их, увольняет при всех, вынуждает работать по 70 часов в неделю и не нанимает тех, кто спрашивает про переработки. Кох объясняет: «Мы носимся как безголовые цыплята, потому что на кону человеческие жизни».

Эйприл Кох — на ноябрь 2021 года самая молодая женщина-директор компании с оценкой более $1 млрд Slush
«Вы говорите, а мы слушаем»: айдентика для онлайн-сервиса психологической помощи YouTalk

Привет, на связи команда Логомашины. Забота о ментальном здоровье — это важный тренд последних лет. В этой статье рассказываем, как мы разработали айдентику для YouTalk — сервиса, который уже три года помогает людям из более чем 50 стран справляться с психологическими проблемами.

Онлайн-санаторий для сотрудников: как помочь команде справиться с выгоранием

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

В «Чёрную пятницу» объем трафика Yota на сайты ритейлеров вырос более, чем на треть

По данным Yota, в «Чёрную пятницу» объем трафика и число переходов на сайты различных ритейлеров среди пользователей оператора выросли более чем на 30% по сравнению с 29 октября, последней пятницей прошлого месяца.

null