Lifehack-figma.jpg

В прошлом году мы полностью перешли со Sketch на Figma, уже обжились в новом редакторе и очень его любим. Статья будет полезна как новичкам, так и уже опытным пользователям.

<div>
  <h3>1. Делаем структуру страниц</h3>
  <div>
    <p>На небольших проектах мы всю работу ведем в одном файле: храним в нем черновики, концепты и чистовые макеты с компонентами. Чтобы разработчик и заказчик понимали, где лежит готовый для верстки макет, а где концептуальный черновик, мы делим файл на страницы.</p>
    <p>Список страниц дробим на условные разделы. Для лучшего считывания используем эмодзи, а названия страниц отбиваем пробелами от начала строки. Получается что-то вроде структуры с вложенностью.</p>
    <p>На самом деле эта структура лишь визуальное решение, так как Figma не позволяет создавать дополнительные уровни вложенности в станицах. В качестве названия раздела используется пустая страница.</p>
    <p>Ниже несколько примеров такой структуры.</p>
    <p><img src="/uploads/2_0fcfc29644_c00e3265a4.png" alt="2_0fcfc29644.png">
      <em>С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.</em>
    </p>
  </div>
</div>

<div>
  <h3>2. Называем одинаково слои на двух связанных компонентах</h3>
  <div>
    <p>Чтобы при смене состояний элемента сохранялись тексты, слои текстовых элементов должны быть названы одинаково. Это удобно при изменении состояний кнопок, элементов списка и инпутов.
      <img src="/uploads/gif1_a31ffe4bfc_bdee87fc89.gif" alt="gif1_a31ffe4bfc.gif">
    </p>
    <p>Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное.</p>
    <p>Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.
      <img src="/uploads/3_9b0b21b80a_4e427ea4f2.png" alt="3_9b0b21b80a.png">
    </p>
  </div>
</div>

<div>
  <h3>3. Все картинки заводим в цветовые стили</h3>
  <p>Чтобы быстро сделать заливку фигуры логотипом, флагом или аватаром, удобно хранить эти картинки в качестве цветовых стилей.
    <img src="/uploads/4_e0f12b6320_0f4e076a98.png" alt="4_e0f12b6320.png">
  </p>
</div>

<div>
  <h3>4. Быстро находим все элементы с похожими свойствами</h3>
  <div>
    <p>Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit &gt; Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.</p>
    <p>Это удобно, если нужно найти и заменить неактуальный цвет, шрифт или заменить все экземпляры компонента на другие.
      <img src="/uploads/5_d1867a25f9_ce947e319b.png" alt="5_d1867a25f9.png">
    </p>
    <p>Также этот способ можно использовать, чтобы перенести мастер-компонент в другой файл. Как — читайте в следующем совете.</p>
  </div>
</div>

<div>
  <h3>5. Переносим мастер-компонент в другой файл</h3>
  <div>
    <p>В Figma нет встроенной возможности перенести используемый мастер-компонент в другой файл, поэтому вам придется делать это вручную. Но есть надежный способ, как ускорить этот процесс.</p>
    <p>Для этого нужно:</p>
    <ol>
      <li>Скопировать мастер-компонент в нужный файл;</li>
      <li>Присоединить этот файл в качестве библиотеки к текущему;</li>
      <li>Выбрать любой экземпляр старого мастер-компонента;</li>
      <li>Нажать Edit &gt; Select All with the Same Instance;</li>
      <li>Через меню Instance на панели инструментов заменить выделенные экземпляры на новый компонент;</li>
      <li>Готово! Осталось просмотреть все экземпляры на предмет слетевших текстов и стилей, а чтобы тексты при замене компонента сохранялись, называйте одинаково слои на двух связанных компонентах (об этом мы писали выше).</li>
    </ol>
    <p><img src="/uploads/6_7fc92fed3f_fcb22460cb.png" alt="6_7fc92fed3f.png"></p>
    <p>По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин <a href="https://www.figma.com/community/plugin/816627069580757929/Style-Organizer">Style Organizer</a> или его аналог.</p>
  </div>
</div>

<div>
  <h3>6. Делаем автолейауты из списков</h3>
  <div>
  <p>Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся. </p>
   <p><img src="/uploads/gif2_edaddde0b0_e210f9c736.gif?updated_at=2023-03-15T12:14:30.185Z" alt="gif2_edaddde0b0.gif"></p>
   </div>
</div>

<div>
  <h3>7. Делаем автолейауты из всего</h3>
  <div>
    <p>Знакомая ситуация? 👇</p>
    <p><img src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z" alt="gif3_5b2c747874.gif"></p>
    <p>Все это очень просто решается созданием автолейаута из всех трех элементов.</p>
    <p><img src="/uploads/gif4_d3a121f425_46f3b574e7.gif?updated_at=2023-03-15T12:16:14.830Z" alt="gif4_d3a121f425.gif"></p>
    <p>Еще пара примеров:</p>
    <p><img src="/uploads/gif5_bc5c564ae3_ca286a0665.gif?updated_at=2023-03-15T12:17:29.082Z" alt="gif5_bc5c564ae3.gif"></p>
    <p><img src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z" alt="gif6_4e257c573f.gif"></p>
    <p><img src="/uploads/gif7_c8f57944c0_b0db50f4d7.gif?updated_at=2023-03-15T12:17:28.615Z" alt="gif7_c8f57944c0.gif"></p>
    <p>Такой прогресс-бар создается из автолейаута и невидимого текста. Такой способ пригодится, когда прогресс находится внутри компонента и нужно показать несколько состояний без детача.</p>
  </div>
</div>

<div>
  <h3>8. Растягиваем автолейауты</h3>
  <div>
    <p>Чтобы при растягивании блоков контент внутри них адаптировался под размер, нужно при настройке автолейаута использовать параметр «Strech Left &amp; Right» сверху на панели инструментов.</p>
    <p><img src="/uploads/gif8_5129a53089_95559dd5ed.gif?updated_at=2023-03-15T12:20:40.099Z" alt="gif8_5129a53089.gif"></p>
  </div>
</div>

<div>
  <h3>9. Открываем больше одного окна в десктопном клиенте</h3>
  <div>
    <p>Не все знают, что можно открывать несколько окон десктопного приложения Figma. Делается это простым шорткатом Cmd+Shift+N.</p>
    <p>Это удобно, если вы работаете одновременно с несколькими файлами, например, iOS, Android и библиотекой компонентов.</p>
    <p>Кстати, почему большие проекты лучше держать в разных файлах, читайте в другой нашей <a href="https://mish.design/blog/2--optimizaciya-proekta-figma-na-primere-bolshogo-bankovskogo-prilozheniya">статье</a>.</p>
    <p><img src="/uploads/8_9cb8117241_ca9c42c193.png?updated_at=2023-03-15T12:22:10.113Z" alt="8_9cb8117241.png"></p>
  </div>
</div>

<div>
  <h3>10. Не считаем в уме</h3>
  <div>
    <p>Поля, в которых можно редактировать значения, понимают простейшие арифметические операции. Можно увеличить ширину элемента в два раза или прибавить к значению 50%. Это сильно ускорит процесс и поможет не ошибиться в устных подсчетах.</p>
    <p><img src="/uploads/9_a349a438ba_92da5dec3b.png?updated_at=2023-03-15T12:22:10.224Z" alt="9_a349a438ba.png"></p>
    <p>Мы ввели эти простые правила у себя в Mish. Результат превзошел сам себя: многие задачи стали выполняться сильно быстрее и эффективнее. Также введение единых правил и внутренних гайдлайнов позволили переключать дизайнеров с проекта на проект без потерь времени, что оценили не только коллеги внутри студии, но и клиенты.</p>
  </div>
</div>

Mish

Бриф сам себя не заполнит