Инструкция по работе с дизайн-шаблоном в Figma

Инструкция по работе с дизайн-шаблоном в Figma

Инструкция по работе с дизайн-шаблоном в Figma

Регистрация и авторизация

В первую очередь нужно зарегистрироваться в figma. Нажмите sign up в правом верхнем углу. Можно зарегистрироваться с помощью google аккаунта или обычным способом. Вход в аккаунт будет произведен автоматически.

Авторизация в Figma
Авторизация в Figma

Открываем файл для редактирования

Далее необходимо открыть ссылку на файл с готовым дизайном и скопировать файл себе. Для этого нужно нажать на стрелочку рядом с названием файла и выбрать пункт "duplicate".

После того как файл будет скопирован внизу экрана появится уведомление "file duplicated", здесь нужно нажать на кнопку "open". Скопированный файл откроется и его можно будет редактировать.

  • Если файл не скопировать, то его нельзя будет редактировать.

Первый способ загрузки фото

Вся инструкция пошагово отображена на картинках ниже.

Наведите мышкой на картинку, зажмите ctrl и у картинки появится контур. Как только появился контур, нужно нажать ЛКМ (левая кнопка мыши) на картинку.
Справа появится панель, где будет написано "Image" (выделено красным). Нажмите на нее ЛКМ.
По нажатию появится такое окно. Здесь нужно нажать на "choose image" и загрузить свое фото.

Второй способ загрузки фото

Можно просто перетащить фотографию в браузер на нужную область в figma. Чтобы это сделать:

  1. Откройте браузер с шаблоном и папку с фотографией, которую хотите поместить в шаблон
  2. Выделите фото и с зажатой ЛКМ перетяните фото в figma
  3. В левой панели слоев перетяните фото в нужный пост и разместите его НАД слоем, который называется "фото вставить сюда"
Место, куда нужно перетащить слой с картинкой
Место, куда нужно перетащить слой с картинкой

Масштабирование картинок и фото

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

 Масштабирование картинок и фото в figma
Масштабирование картинок и фото в figma

Как заменить текст в шаблоне

В первую очередь нужно подключить шрифты. Для этого установите шрифты на Ваш ПК - просто нажмите правой кнопкой на файл шрифта и выберите "установить".

Как установить шрифт на ПК
Как установить шрифт на ПК

Далее открываем Figma, нам нужно выйти из проекта и попасть в личный кабинет. Для этого нажимаем Back to files

И открываем свой профиль

Вход в личный кабинет
Вход в личный кабинет

Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать установщик приложения для подключения локальных шрифтов.

Подключение шрифтов
Подключение шрифтов

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

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

Готово! Теперь все шрифты, установленные на Вашем ПК будут доступны в Figma.

Чтобы заменить любой текст в шаблоне, просто кликните на него двойным щелчком ЛКМ и измените, как в любом другом текстовом редакторе.

Замена текста в Figma
Замена текста в Figma

Вопросы

Если у Вас остались вопросы, задайте их в комментариях или напишите их мне в любую социальную сеть, с радостью отвечу!

Спасибо за внимание, надеюсь, эта статья была Вам полезна.


Я создаю лендинги под ключ с уникальным дизайном под конкретные задачи Вашего бизнеса. Рассчитайте стоимость разработки лендинга прямо сейчас. 

Способы связи:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Спасибо за внимание!

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

Мне важно создать не просто красивую картинку, но и сделать Ваше предложение одним из лучших среди конкурентов.

Свяжитесь со мной любым удобным способом: