Добро пожаловать на четырнадцатый урок. Сегодня мы поговорим немного о Figma.

Многие дизайнеры для отрисовки макета сайта вместо Photoshop предпочитают Figma. Хотя и в Photoshop можно создавать макеты, но наш урок будет про использование Figma для вёрстки макетов. Это программа, где дизайнеры создают веб-макеты, а потом передают их в вёрстку для веб-разработчиков. Поэтому нам на курсе важно научиться обращаться с программой. Из неё мы будем брать стили, а ещё шрифты, цвета, расположение элементов, картинки и иконки.

Для начала работы нужно скачать и установить Figma. Для этого заходим на сайт figma.com. Можем полистать и посмотреть, как тут всё устроено. Затем нажимаем на кнопку «Начало работы» и регистрируемся. Можно через Google-аккаунт или email с паролем. Но я уже зарегистрирован и зайду под своим аккаунтом Google.

Figma открывается в браузере, но я рекомендую скачать десктопную версию. Хотя функциональность браузерной и десктопной версии сильно не различаются, её установка на компьютер позволит избежать постоянного переключения между вкладками. Это удобно. Для этого заходим сюда и нажимаем «Скачать Desktop» — Get desktop app.

После того как вы скачали и установили программу, открываем её на компьютере и также регистрируемся. Открываем приложение.

В дополнительных материалах к уроку вам будет предоставлена ссылка на макет. Открываем её. Она также открывается в браузере. И чтобы открыть её в нашей программе, нажимаем на эту стрелочку и открываем десктопную версию.

Всё.

Давайте теперь посмотрим на интерфейс. В середине у нас находится холст, где расположены все дизайны. С левой стороны находится боковая панель, содержащая слои, ресурсы и страницы файла. С этим в основном работают дизайнеры. Обычно это меню верстальщикам не требуется. А вот с правой стороны находится панель инструментов: она содержит всю информацию об элементах в файле. Например, все тексты, все цвета. Если выбрать, например, какой-нибудь элемент, вся информация будет с правой стороны.

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

Также можно клавишами «+» и «-».

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

Вы можете быстро увеличить масштаб отдельного кадра или элемента, выделив его и нажав Shift+2. Например, давайте сюда. Shift+2.

Теперь можно чуть-чуть уменьшить. Чтобы быстро вернуться на экран, где все элементы поместятся на холсте, можно нажать Shift+1. И обратно у нас всё в максимальном масштабе.

Сейчас Figma платная. Будем использовать бесплатный плагин, специально созданный энтузиастами для веб-разработчиков. Когда дизайнеры передают макет в вёрстку, его интерфейс сильно сокращается.

Чтобы установить плагин, мы должны зайти вот в эту стрелочку и продублировать наш макет — Duplicate to your drafts. Сейчас интерфейс существенно увеличился. Мы это сделали для того, чтобы установить плагин. Заходим в Plugins, Manage plugins… и ищем Inspect Styles. У меня он уже установлен — я просто нажму. А вы вводите здесь Inspect Styles.

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

Давайте увеличим наш макет. Чтобы выбрать какой-нибудь элемент, нужно нажать клавишу Ctrl. Как видите, в этом плагине показываются все данные: картинки, кнопки, блоки.

Всякий раз, когда вы хотите измерить расстояние между элементами, правильно расположить элементы или даже установить правое поле или отступ, всё, что нужно сделать, — это выбрать элемент, нажав Ctrl. Давайте выделим «Сезонные…». И, зажав клавишу Alt, навести мышь на элемент, расстояние до которого вы хотите замерить.

Figma отметит расстояние между элементами красной линией и покажет размеры в пикселях. Снизу будет 40 пикселей, сверху — 30 пикселей. Давайте выберем вот этот элемент — 120 пикселей. Тоже 120 пикселей. Например, здесь, между этими блоками, будет 40 пикселей.

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

В зависимости от того, какой тип файла вы экспортируете, вы можете настроить разные параметры экспорта. У изображения есть коэффициент масштабирования. И вы можете выбрать тип файла: png, jpg, svg или pdf. Выбираем формат jpg для картинок. Выбираем иконки — для них выбираем формат svg. Выберем обратно нашу картинку.

Формат jpg хорошо подходит для фотографий и изображений со множеством цветов и деталей, так как он обеспечивает хорошее качество при небольшом размере файла. PNG лучше использовать для изображений с прозрачностью. Например, в этом макете есть картинка девушки. Для неё нужно брать формат png, потому что у картинки прозрачный фон. Также вот эта девушка тоже с прозрачным фоном. Для них нужно брать формат png. Для всех остальных картинок, будь то вот эта или эти, для них уже нужно брать формат jpg.

После того как мы выбрали элемент и выбрали формат, можно экспортировать. Нажимаем на эту кнопку. Figma будет использовать имя слоя в качестве имени файла. Но вы можете переименовать файл. Давайте переименуем его. Например, в main. Сохраняем.

Выбирайте наиболее большую картинку по размеру, чтобы потом при вёрстке, когда оптимизируете для других разрешений, они не размывались и были все чёткие. Например, вот эта картинка имеет разрешение 560 на 331. А в планшетной версии она имеет уже большие размеры. Поэтому выбираем вот эту картинку, выбираем формат jpg и экспортируем.

Также для вот этих картинок размер 560. В планшетной версии уже больше размер. Выбираем jpg и экспортируем.

А, например, вот эти картинки: для них разрешение 360 на 360. А уже в шаблоне карточек у них больше размер. В планшете ещё больше размер. Поэтому мы выбираем картинку и скачиваем уже её в двойном разрешении. Для этого нажимаем «Двойное разрешение», jpg, Export. Также для вот этих выбираем двойной размер, Export. Набираем, например, «Слива» и т. д.

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

Для оптимизации изображения можно использовать онлайн сервисы, например tinypng.com или compressor.io, а также Photoshop. Я использую tinypng обычно. Давайте посмотрим на этот сервис. Загружаем картинки перетаскиванием.

К сожалению, можно загрузить не больше 20 картинок за раз. После того как мы загрузили картинки, они автоматически начинают конвертироваться. И, видите, насколько уменьшился вес картинки. С 511 до 51 килобайта и т. д. С одного мегабайта — больше чем в два раза.

Также на этом сервисе можно конвертировать webp-формат. Это новый формат, который предлагает лучшее качество при меньшем размере файла. Поддерживается практически во всех современных браузерах, кроме устаревших и Internet Explorer. Но в этом формате из Figma нельзя скачать, но можно потом конвертировать в этом сервисе или в Photoshop.

Но, к сожалению, в бесплатной версии можно конвертировать только три картинки за раз. Давайте выберем вот эту, например. Нажимаем на эту кнопку и выбираем. Всего три картинки, остальные нельзя. Нажимаем «Конвертировать» — Convert image. Происходит оптимизация. И, видите, насколько уменьшились размеры картинок. Давайте скачаем в формате webp.

Но если мы обновим страницу и скачаем другие, например эту и эту, они также в формат webp оптимизируются. Как видите, самая большая картинка, которая весила 1 мегабайт, потеряла в весе 92% и стала весить 91 килобайт. Давайте скачаем их.

Давайте теперь убедимся, что они совсем не изменились. Это изначальный вид картинки, которая весила несколько килобайт. А это картинка уже в webp-формате. Как видите, никакой разницы.

Но они потеряли в весе, ещё раз говорю, до 90%.

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

На сегодня у меня всё. Увидимся в следующем уроке. Пока.