Figma – основные возможности

Figma – основные возможности
Андрей Викторович Литвиненко

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

Figma – основные возможности

Андрей Викторович Литвиненко

© Андрей Викторович Литвиненко, 2023

ISBN 978-5-0059-7812-7

Создано в интеллектуальной издательской системе Ridero

Введение

Figma (Фигма) – это графический онлайн-сервис для дизайнеров. У сервиса есть бесплатные возможности. В нём можно создать прототип сайта, интерфейс приложения. И чтобы научиться это делать, необходимо получить базовые навыки работы в программе. Вот об этих основных возможностях рассказывается в книге.

Можно работать даже на старых компьютерах и ноутбуках. Возможен показ макета по созданной ссылке любому пользователю без его регистрации в программе. Главное – что сервис БЕСПЛАТНЫЙ. Есть и платные функции, типа командной работы, но нам они сейчас не нужны. Есть возможность работать даже на старых ноутбуках. Причём, так как работа идёт онлайн, то неважно, какая операционная система стоит на вашем компьютере: Windows, любые версии Linux или Macintosh, в которых есть браузер и подключение к интернету. Здесь описана работа в Windows.

Для работы в программе необходимо наличие компьютера/ноутбука. И хорошего скоростного интернета. Без интернета программа работать не будет. Со смартфона работать не получится, хотя просмотреть готовые макеты можно.

https://www.litres.ru/andrey-viktorovich-l/figma-osnovy-raboty-avtor-nikak-ne-svyazan-s-kompanie/ https://ridero.ru/books/figma_osnovy_raboty/

В этой книге рассмотрим возможности работы фигмы с фотографиями и цветом. И на этих примерах в книге покажу основные возможности программы Фигма. Создадим коллаж в электронном виде в формате PDF. Для чего может быть нужен такой коллаж. Можно напечатать его для себя или отправить pdf-файл по электронной почте своим родственникам или друзьям. А они могут посмотреть и распечатать у себя при необходимости.

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

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

Подготовка

Для дальнейшей работы вам необходимо выбрать несколько фотографий в оригинальном размере и скинуть их в отдельную папку на компьютер. Выберите примерно от 20 фотографий. Можно и больше. Не надо использовать фотографии, полученные с помощью чатов WhatsApp или Телеграмм. Они имеют обычно маленькое разрешение. Если вы умеете сохранять фотографии в оригинальном размере на свой компьютер, то можете этот раздел пропустить.

Выбор и сбор фотографий для дальнейшего использования.

Так как сейчас многие фотографируют на смартфоны, то предлагаю способ передачи через Яндекс. Диск.

1. На компьютере регистрируем почту в yandex.ru. Выписываем логин и пароль, который указали при регистрации.

2. На смартфоне скачиваем приложение Яндекс. Диск и устанавливаем его. Запускаем и выполняем вход под логином и паролем, который вводили при регистрации почты на yandex.ru.

3. В приложении Яндекс. Диск на смартфоне в настройках в разделе «фото» включаем безлимит для сохранения и автозагрузку фотографий.

4. Выполняем синхронизацию фото с галереи вашего смартфона на Яндекс. Диск.

5. Пока идёт синхронизация, необходимо создать папку, куда будете копировать все фото для работы.

6. После окончания всей синхронизации на компьютере в любом браузере выполняем вход в почтовый ящик на yandex.ru. Далее выбираем вверху «Диск». Далее в левом меню выбираем «фото». В центральном окне просматриваем фотографии. Нужные открываем и сохраняем.

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

Фото в рамке

Запускаем браузер. В адресной строке вводим https://figma.com (https://figma.com/). Если вы не регистрировались, то выполните регистрацию. Теперь войдите в сервис под указанным логином и паролем.

Выбрать пункт «Drafts», нажать знак «+» и выбрать подчёркнутый пункт. Откроется основное окно, где мы будем работать. Могут быть показаны рекламные окна. Мы их просто закрываем. Выбираем вот этот значок и по нему указанный пункт.

Зажимаем левую кнопку мыши и рисуем прямоугольник любого размера в вертикальном формате, так как в основном все фотографии со смартфона именно вертикальные.

Теперь в правой колонке справа от «Stroke» нажимаем знак «+». Появится рамка чёрного цвета толщиной 1 px.

Далее справа в разделе «Fill» нажимаем на маленький прямоугольник.

В открывшемся окне нажать на «Solid» и в выпадающем списке выбрать «Image».

А вот в этом окне надо нажать по стрелке.

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

И в выпадающем списке выбрать «Fit». Теперь наше фото в прямоугольнике выглядит так.

Мышкой тянем за границы прямоугольника и подгоняем его под размер фотографии.

Теперь, чтобы лучше были видны изменения, необходимо приблизить (увеличить) наше фото в рамке. Для этого держим кнопку <Ctrl> на клавиатуре и крутим центральный ролик на мышке.

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

Запомните одни из основных сочетаний. Ими вы будете часто пользоваться.

1. Увеличить/уменьшить – <Ctrl> + <ролик на мышке>.

2. Переместить всё по экрану – <пробел> + <левая кнопка мыши>.

Мы подготовили фото в рамке. Но она тонкая. Для начала увеличим её размер до 5.

А также изменим цвет, например, на синий.

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

Угол наклона. В правой колонке выберем указанный пункт.

Когда курсор мышки поменяется на вид двусторонней стрелки, то, двигая мышкой в разные стороны, мы видим, что наше фото наклоняется на определённый угол, указанный в этом окне. Пример ниже.

Скругление углов рамки.

Выделим наше фото и справа в указанное поле.

Введите любое число. Для примера введите 25 и нажмите <Enter>. Вы увидите, что все углу рамки закруглились. Меняем число на 10 и видим, что скругление изменилось. Это один из вариантов скругления. Теперь, чтобы вернуть отменить последние действия, необходимо нажимать <Ctrl> + <z>. Нажимаем до тех пор, пока рамка станет без скругления или в поле скругления будет цифра 0.