Giffy canvas figma как пользоваться
Перейти к содержимому

Giffy canvas figma как пользоваться

  • автор:

Работа с Figma – регистрация и первые шаги

Для дизайнеров в Интернете представлено много программ, но именно работа в Figma особенно популярна. Это бесплатный сервис, который прост в установке, а в его интерфейсе разберется даже новичок. Подойдет не только для веб-разработчиков и дизайнеров, но и для маркетологов, чтобы создавать инфографику.

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

Возможности сервиса Figma

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

Сервис пользуется успехом не просто так. От многих графических редакторов Figma отличается тем, что:

  • Имеет бесплатные функции. Сервисом можно пользоваться, но ряд возможностей будет ограничен: например, количество макетов, время, в течение которого будут храниться проекты и прочее.
  • Функционал встроенных компонентов. Например, вы сделали несколько макетов в одном стиле, но в последний момент решили изменить какую-то деталь, которая повторяется во всех них. В других редакторах эту деталь нужно менять вручную в каждом макете. В Figma работа будет упрощенной: если меняется что-то в стиле одного элемента, то меняются все элементы, созданные в этом стиле.
  • Возможность интеграции с другими программами. Можно переносить макеты, например, из Sketch или Zeplin, без искажения графиков, изображений и шрифтов. Также можно подключиться к корпоративному мессенджеру Slack, пространству Confluence и т. д.
  • Возможность работы в браузере или в приложении. Для работы в Figma можно использовать веб-формат или установленное приложение, которое можно скачать с официального сайта. Просто регистрируете профиль и начинаете работать.
  • Возможность командной работы. Это одновременно и преимущество сервиса: совместная работа в едином артборде.

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 23674

  • Гибкость фреймов. Они легко масштабируются, но есть и фиксированные размеры для разных устройств: ПК, планшет, телефон и т. д. При этом не нужно запоминать параметры – выбираете необходимый тип девайса и работаете в нем.
  • Наличие истории предыдущих версий. Программа хранит ранние версии проекта 30 дней. Эта особенность программы здорово выручает, если возникает необходимость в просмотре прежних вариантов файла. Процесс сохранения автоматизирован: как только вносится изменение, происходит сохранение. Для удобства поиска каждой из версии можно присвоить название и описание.
  • Облачный сервер хранения. Благодаря этому отпадает вопрос, как сохранить работу в Figma. Не нужно скачивать макет каждый раз после редактирования – файлы хранятся в облаке программы.

Если есть потребность в более расширенном функционале, то можно оформить платную подписку.

У Figma есть и свои недостатки, хотя они не играют большой роли при правильном выстраивании рабочего процесса. Например, интерфейс сервиса не русифицирован. Также для работы с программой необходимо подключение к Интернету.

Системные требования Figma

Для работы в приложении нужно будет обратить внимание на параметры ОС. Но большинство ПК вполне совместимы с данной программой.

ОС должна отвечать минимальным требованиям:

  • Windows младше 8.1;
  • MacOS младше 10.10 (Yosemite);
  • Linux ― версия не имеет значения.

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

Для исправной работы браузер должен иметь минимальные версии:

  • версии Google Chrome старше 58;
  • версии Mozilla FireFox старше 57;
  • версии Safari старше 11.

Для бесперебойной работы Figma потребуется видеокарта не старше 2012 года. На современных моделях ПК такие уже не устанавливают.

Первые шаги работы в Figma

Итак, с чего начать работу в Figma?

Шаг 1. Регистрируемся:

  • переходим на сайт figma.com;
  • активируем кнопку Sign up;
  • регистрируемся с помощью Google-аккаунт или e-mail.

Для вас подарок! В свободном доступе до 05.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для дизайнера
Помогут находить референсы и изображения в 2 раза быстрее
Чтобы получить подарок, заполните информацию в открывшемся окне

Далее скачиваем локальную версию приложения.

Шаг 2. Загружаем приложение:

  • переходим на сайт figma.com;
  • по пути Products → Downloads находим Desktop App;
  • ориентируясь на ОС своего ПК, скачиваем нужный дистрибутив;
  • не забываем дополнительно скачать шрифты из раздела Font Installers;
  • производим запуск обоих установочных файлов;
  • также скачиваем бесплатную версию программы Figma Mirror (Android или iOS) — это поможет нам понять, как будет смотреться наш дизайн на телефоне.

Теперь нужно авторизироваться в приложении, чтобы начать работу.

В верхнем углу правой части экрана находится значок +, на который нужно нажать, чтобы создать новый макет. Далее следует найти соответствующий формат будущего проекта и нажать на кнопку «Create file». При выборе пункта «Blank canvas» будет открыто стартовое рабочее поле.

Если у вас есть проекты, созданные в Sketch, то можете смело импортировать их в Figma – все элементы останутся в первоначальном виде. Причем импорт можно сделать путем простого перетаскивания файла из одного приложения в другое. Также доступен перенос отдельных элементов векторной графики формата SVG.

Дальнейшая работа в Figma

Теперь рассмотрим основы работы в Figma, а именно настройку стилей, фреймов, слоев и т. д.

Чтобы создать макет, нужно выделить определенный слой. Далее в разделе «Layout grid», находящемся по правую сторону в поле «Design», выбрать необходимые размерные параметры, уровень прозрачности и цветовое решение. Можно изменить формат сетки, оставив только столбцы или строки. Можно работать сразу с несколькими макетами, переключаясь между ними с помощью сочетания клавиш Ctrl + G.

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

При желании можно поменять цвет деталей и изменить ориентацию положения (например, с горизонтального на вертикальное). Когда все настройки будут закончены, нужно активировать кнопку «Present» (находится слева от «Share»), чтобы увидеть качество отображения макета в указанном устройстве.

Дарим скидку от 60%
на обучение «Веб-дизайнер» до 05 ноября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

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

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

Вы можете сделать свою собственную библиотеку элементов из созданных ранее объектов, добавив их в раздел «Компоненты». То есть не нужно каждый раз создавать элемент заново. Для перемещения объекта в библиотеку его нужно выделить и одновременно зажать клавиши Ctrl + Alt + K – это преобразует объект в компонент.

Если вы начинаете редактировать детали основного компонента, то автоматически будут корректироваться все существующие копии. Чтобы найти ранее добавленный в библиотеку компонент, нужно обратиться к вкладке «Assets» в левой панели.

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

Робота аналогично работе с Photoshop. Есть возможность конструировать отдельные группы, помещать отдельные детали на передний или задний план. Нужные функции находятся в разделе «Layers», распложенного на панели в левой части интерфейса программы.

Рассмотрим кратко инструкцию по работе с Figma в составе команды.

Только до 2.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

Анкета
При регистрации в программе происходит автоматическое формирование команды. При желании ее можно переименовать, щелкнув RButton мыши по нужному объекту и активировав функцию «Rename». Аналогичным путем можно удалить существующую команду. Если нужно создать новую группу для совместной работы, то необходимо кликнуть на «Create new team» в нижней части панели слева.

Чтобы добавить нового члена группы, нужно выбрать требуемую команду и нажать в правом верхнем углу на кнопку «Invite». Далее остается указать имя гостя, разрешить ему доступ к просмотру или редактированию и отправить приглашение.

Можно пойти и другим путем: в рабочем поле проекта, над которым проводится совместная работа, нужно нажать кнопку «Share». Затем остается настроить права и отправить приглашение. А еще можно просто скопировать и отправить ссылку тому, кого хотите пригласить.

Работа с текстом в Figma имеет много возможностей. В сервисе по умолчанию установлены шрифты Google. Если вы пользуетесь десктопной версией программы, то можете скачать и установить плагин Font Helper – это даст возможность пользоваться локальными шрифтами с вашего ПК.

Хотите создавать собственные визуальные шедевры? Вам по плечу стать веб-дизайнером с нашим курсом. Погрузитесь в мир композиции, типографики и UX, научитесь воплощать идеи в Figma, Photoshop и Tilda, и сделайте первые шаги к созданию уникальных сайтов.

Для создания текстового объекта нажмите в панели слева инструмент «Text» или активируйте кнопку с буквой «Т» в левой верхней части интерфейса. Все те параметры, которые можно менять и настраивать, будут отображаться в окне справа (цвет, тип, размер, стиль шрифта и т. д.).

Программа предусматривает установку плагинов, необходимых для повышения эффективности работы. Информацию о списке всех существующих плагинов можно найти на главной странице «Community» → «Explore», а установленные можно увидеть в разделе «Plugins» в настройках профиля.

Giffy canvas figma как пользоваться

Для анимации понадобится плагин Фигмоушен. В нём можно собрать гифку или видео, чтобы показать идею арт‑директору, и сохранить анимацию в CSS или JSON для использования на сайте. А ещё он бесплатный :‑)

Покажу, как работает плагин, на примере простой анимации прыгающего шарика с сайта Сейгеймса:

Создаём фрейм с шариком, стоящим за пределами фрейма, чтобы ему было откуда прилетать:

Выделяем фрейм, находим в главном меню Фигмы список плагинов и запускаем Фигмоушен. Появится такое окно:

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

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

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

Нажимаем плей. Анимация воспроизведётся прямо в Фигме:

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

Чтобы сохранить анимацию в виде гифки или видео, жмём кнопку Render и выбираем нужные параметры:

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

Figma: обзор интерфейса

23.03.2021

Сложность: средняя

14 мин.

8 534

Figma: обзор интерфейса

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

Прежде, чем создавать дизайн своего проекта, нужно пройти обязательную регистрацию в сервисе. Делается это на официальном сайте figma.com. Щелкаем в правом верхнем углу на кнопку “Sign Up”. Нас перенаправит к форме, которая находится внизу, заполняем свои данные, вводя почту и пароль, нажимаем “Create Account”.

интерфейс фигма

Появится следующее окно, вписываем свое имя и в раскрывающемся списке выбираем профессию. Если вы собираетесь заниматься дизайном, то выберите “Design”. После завершения регистрации и авторизации можно приступать к работе.

Как работать в Фигме бесплатно – создаем проект

Главная страница авторизованного пользователя представляет собой рабочий стол, там хранятся все проекты, доступные для редактирования. Если вы зарегистрировались недавно, то первые работы будут представлены шаблонами других дизайнеров. Чтобы создать собственной дизайн, нажмите ссылку “New”, как показано на скриншоте ниже.

как работать в фигме инструкция

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

Кроме основных кнопок и “пресетов”, есть еще и набор шаблонов. Они доступны для редактирования. Но, чтобы лучше разобраться в функционале программы, рекомендуется выбрать вариант из “Blank Presets”. При переходе откроется окно с панелями инструментов, а также создастся frame, названный в зависимости от типа проекта “IPhone” или “Desktop”. Но если выбрать “Blank Canvas”, то проект откроется без фреймов, тут нужно самому выбрать тип устройства.

Как работать в Фигме: инструкция

Дизайн проекта состоит из элементов, с которыми будут взаимодействовать пользователь, для их добавления нужно создать frame. Делается это просто, на верхней панели выбираем иконку, на которой нарисована решетка или для быстрого доступа просто нажимаем F на клавиатуре. Откроется панель со списком типов устройств, выбираем подходящий вариант для нашего приложения.

как работать в фигме бесплатно

Инструмент frame – это окно интернет-приложения. Если планируется разработать многофункциональную программу, то одного фрейма недостаточно, и чтобы добавить остальные, щелкните по фрейму (как пример iPhone 11 Pro/x – 1) в левой панели и нажмите CTRL+C и CTRL+V для создания дубликата или выполните действия, показанные на картинке выше.

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

Дальше выбираем фигуру и рисуем во фрейме. Вот список примитивов:

  1. Rectangle – квадрат, в каждом углу есть точки, с помощью них можно сделать скругления.
  2. Line – чертит линию.
  3. Arrow – похож на Line, только в конце линии есть стрелка.
  4. Еllipse – круг.
  5. Polygon – это треугольник.
  6. Star – вычерчивает звезду с пятью углами.
  7. Place Image – добавляет картинку с жесткого диска пользователя. При размещении появятся две кнопки Place All (Добавить все) и Discard All (Отменить все). За один раз можно выбрать несколько image. Делается это тремя способами: стандартный – выделение мышкой, ctrl + щелчок по очереди или shift + кнопка мыши, так сразу выделяется группа. После нажатия кнопки Place All в интерфейсе Фигма они все окажутся на холсте. Дополнительный вариант – просто перетащить файл в окно браузера.

У сервиса Figma, как и у Фотошопа, есть вкладка Layers, при добавлении объекта он начинает отображаться в слоях. Если object разместить во фрейме, то вид будет в форме дерева. Фигуры можно сгруппировать, если их выделить курсором мыши, удерживая левую кнопку, или же выбирая object, по очереди зажимая Shift, а после использовать комбинацию клавиш CTRL+G, тогда произойдет объединение в группу, полный пример на картинке:

как работать в фигме инструкция

Каждый размещенный элемент обладает свойствами, чтобы к ним обратиться, нужно выбрать “element” и появится панель, где присутствует три вкладки. О них речь ниже.

Свойства объектов

1. Design – показывает параметры выбранного объекта, ширину, высоту, координаты по оси (x, y), выравнивания по отношению фрейма: слева, справа и посередине, а также дополнительные свойства, которые можно придать объекту, такие как: Fill (заполнение цветом), Stroke (цвет контура), Effect (настройка разных эффектов например тени) и Export (сохранение полученного результата в файл: png, jpg, svg и pdf). Ниже показано, как применять эффекты.

как работать в программе фигма

2. Prototype – эта вкладка помогает делать графические элементы более функциональными, например, повесить на кнопку переход на следующий frame, и при щелчке будет открываться страница. Это легко проверить. Создадим два фрейма, напомню, что инструмент находится в верхней панели, выберем любой тип устройства, например телефон, сделаем копию (Ctrl+C) и вставим (CTRL+V). На первом можно поместить квадрат, на втором эллипс. Пример ниже.

как работать в фигме бесплатно

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

интерфейс фигма

Теперь можно протестировать. В верхнем углу есть кнопка “Present”, выглядит она как треугольник, при нажатии появится тест. Если все сделано правильно, то щелчком мышки по прямоугольнику откроется второе окно, где есть эллипс.

Переходим к следующему свойству.

3. Inspect, последняя вкладка – показывает параметры: размер, цвет и многое другое. Здесь запрещено менять настройки, можно только просматривать.

Вернемся к прототипам, здесь есть такая фишка, как настройка мобильного устройства, чтобы туда попасть следует нажать кнопку “Show prototype settings”.

как работать в фигме инструкция

При нажатии на кнопку, откроется блок с настройками оборудования: выбрать “device”, model, отобразить устройство по вертикали и горизонтали, цвет заднего фона и список стартовых фреймов.

как работать в программе фигма

Ранее упоминалось про окно, появление которого происходит, когда делаем стрелочную привязку от кнопки к фрейму. В этом окне присутствуют опции, где можно настроить плавный переход на следующую страницу и установить действия кнопки мышки. Например, один щелчок, drag-drop удержание и перелистывание, и так далее.

как работать в фигме бесплатно

Prototype объединяет несколько фреймов, а его настройки способны создать интересные анимации переходов.

Добавление сообщений Add/Show Comments

В сервис Фигма есть возможность работать в команде над одним проектом, поэтому иногда появляется необходимость подписать части веб-интерфейса, для этих целей существуют комментирование. Чтобы добавить сообщение, нажмите “Add/Show Comments” и напишите текст, и те, кто подключен к проекту, увидят ваше сообщение.

Таким образом, можно объяснить заказчику, как будет работать проект, и получить рекомендации от клиента. Для добавления комментария нужно поставить маркер на холст, написать text и нажать кнопку Comment. Message отобразиться в онлайне.

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

интерфейс фигма

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

как работать в фигме инструкция

Text (hotkey “K”)

Предназначен для добавления текста в графическом интерфейсе пользователя (GUI). С помощью него можно создавать меню, делать подробное описание товара, услуги. Как и в остальных инструментах Figma, здесь есть свойства, а если вы уже сталкивались с оформлением текста в других графических редакторах, то и здесь сможете разобраться.

Чтобы написать сообщение, нажимаем на иконку “Text” и добавляем его во frame.

По “пресетам” существуют некоторые сходства c примитивами Rectangle и Ellipse, но есть и отличие, например, здесь можно указать размер и тип шрифта, а также выравнивание.

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

как работать в программе фигма

Pen/Pencil

Два инструмента для рисования произвольных форм. Перо (pen) используется для черчения линий. Ставим точку, потом еще одну, и появляется отрезок, повторяем действие несколько раз, при желании можно линию сделать изогнутой. Для этого при добавлении второй точки удерживаем клавишу мыши и плавно передвигаем, пример на картинке:

как работать в фигме бесплатно

Положение всех точек, включая линию, можно отредактировать. Для этого выбираем иконку курсора и дважды кликаем на объект. Дальше отобразятся “Bend Tool” и “Paint Bucket”.

интерфейс фигма

Edit object

Каждая фигура поддаётся редактированию, для этого следует нажать соответствующую иконку, а потом передвигать point. Пример на рисунке. Меняем положение точек у Rectangle.

как работать в фигме инструкция

Инструмент Components

Чтобы разобраться, как работать в программе Фигма , вам нужно знать такую важную деталь, как компоненты, которые находятся рядом с edit object. Они способны объединить несколько элементов в один контейнер. Эта функция потребуется в тех случаях, когда на странице присутствуют однотипные блоки, например, карточки товаров. Нарисовав один block, можно сгруппировать его, потом преобразовать в компоненты и скопировать несколько раз, после этого, если потребуется, перетащить или поменять размер картинки внутри блока, изменения вступят в силу для всех копий.

Приведем пример. Создадим карточку. Сначала реализуем шаблон, состоящий из rectangle и текста.

как работать в программе фигма

Дальше нужно выполнить группировку. Делается это просто, выделяем объекты и нажимаем Ctrl+G. Воспользуемся иконкой Create Component. Она расположена на верхней панели, чтобы её увидеть, нужно щелкнуть на сгруппированном объекте или другой вариант – через контекстное меню. Правой кнопкой мыши щелкаем по объекту, из которого хотим сделать component, как показано на картинке:

как работать в фигме бесплатно

Группа элементов станет контейнером, после этого сделаем несколько копий Ctrl+C (копировать) и CTRL+V (вставить). Разместим карточки так, чтобы они помещались на frame. Полностью пример можно увидеть ниже:

интерфейс фигма

Обратите внимание на вкладку Layers слева, там отобразилось четыре компонента, у каждого из которых есть значки ромбики. Первые три пустые, они означают копии, последняя, четвертая, оригинал. Результатом наших действий станет то, что нам не придется редактировать каждый товар по отдельности. Выбираем оригинал под названием “Group 1”, заходим в его настройки двойным щелчком, при этом сначала один раз выделяем мышкой. Теперь редактируем квадрат, допустим, это картинка товара. Захватываем боковую границу и масштабируем, все остальные элементы будут тоже изменены. В итоге у нас получится следующее:

как работать в фигме инструкция

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

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

как работать в программе фигма

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

Часть параметров у копий закрыты, например, внутренние элементы невозможно передвинуть. Если попытаться захватить и перетащить, то будет двигаться весь контейнер.

Менять позиции запрещено внутри дубликата контейнера, но возможно изменить цвет, добавить картинку. С помощью плагина Unplash мы добавили image, а также закруглили края у некоторых элементов.

как работать в фигме бесплатно

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

интерфейс фигма

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

Сейчас небольшая инструкция добавления линка.

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

как работать в фигме инструкция

Теперь, чтобы сделать ссылку, нужно щелкнуть по текстовому полю и выбрать вверху экрана “цепь” и написать url-адрес.

как работать в программе фигма

Веб-ссылка будет доступна только для одной карточки, с остальными нужно поработать отдельно, и в каждую вставить url-адрес, который будет вести на страницу с полным описанием товара. Чтобы протестировать, нажмите “Present” в правом верхнем углу экрана.

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

В первую очередь создадим еще одну страницу, делается это так:

как работать в фигме бесплатно

Страница появилась под названием Page 2. Теперь скопируем главный компонент и вставим его на Page 2. Допустим, у нас будет две вариации, а значит, делаем две копии. Теперь отвяжем привязку через контекстное меню “Detach instance”.

интерфейс фигма

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

как работать в фигме инструкция

Почти все готово, тестируем на Page 1. Выбираем блок с картинкой, сбоку в свойствах появится раскрывающийся список “Swap Instance”, по умолчанию стоит главная страница, жмем стрелку и переходим в меню.

как работать в программе фигма

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

как работать в фигме бесплатно

Инструмент Component является незаменимым средством для создания множества разных объектов.

Объединение группы выбранных элементов

В панели управления есть кнопка, умеющая объединять группу выбранных объектов. Доступ откроется, если выбрать несколько фигур.

интерфейс фигма

При нажатии на иконку появится список, состоящий из нескольких selection. Для проверки можно щелкать по каждой кнопке и смотреть результаты. Доступно пять пунктов: Union, Subtract, Intersect, Exclude и Flatten.

Как работать в программе Фигма – история сохраненной версии

В Фотошопе есть функция просмотр истории, где можно в любой момент вернуться на один или несколько шагов назад. У Фигмы есть похожий инструмент, открывающий сохраненные проекты. Для этого следует перейти в меню, которое расположено слева вверху, выбрать file -> Show version history и справа появится список всех сохраненных копий.

как работать в фигме инструкция

Пригодится, если во время работы была допущена ошибка, и нужно откатить к предыдущей версии.

Когда требуется поставить сохранение вручную, то нажмите плюс в панели истории или горячие клавиши CTRL+ALT+S. Откроется два поля c title и description. Придумываем название, описание и сохраняем.

Плагины

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

как работать в программе фигма

Чтобы plugin стал доступным в менеджере, выбираем Install. Процесс инсталляции не займёт много времени. Позже он отобразится в меню. Два способа его запустить: первый – в самом меню плагинов, второй – правой кнопкой мыши, выбрав plagins.

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

Сравнение сервисов Figma и Canva

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

Canva Есть бесплатный тариф Разработчик приостановил обслуживание и поддержку клиентов из России

(37 отзывов)

Инструмент для создания и редактирования дизайнерских материалов для страниц социальных сетей, сайтов, презентаций, отчётов и печатных материалов.

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

Инструмент для создания и редактирования дизайнерских материалов для страниц социальных сетей, сайтов, презентаций, отчётов и печатных материалов.

Описание

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

Вот некоторые из основных особенностей Figma и Canva и их сравнение:

  1. Совместная работа: Figma — это облачный сервис для совместной работы над внешним видом интерфейса будущего продукта. Она позволяет нескольким пользователям работать над интерфейсом одновременно, в режиме реального времени, а также такие функции как: комментарии, правки и история версий. Canva также имеет функцию совместной работы, здесь помимо комментирования и редактирования в реальном времени, пользователи также могут взаимодействовать друг с другом на белой доске.
  2. Векторный дизайн: Figma — инструмент векторного дизайна, что означает, что все элементы дизайна могут быть масштабированы и изменены в размерах без потери качества. Canva, напротив, это инструмент для создания растрового контента, который при масштабировании теряет в качестве.
  3. Прототипирование: Figma предлагает расширенные возможности прототипирования, позволяя создавать интерактивные и отзывчивые прототипы, связывать страницы между собой и тестировать дизайн на различных устройствах. Canva не имеет такого уровня возможностей создания прототипов.
  4. Шаблоны и ресурсы: Canva предлагает большую библиотеку шаблонов, стоковых фотографий и элементов дизайна, которые можно использовать для быстрого и легкого создания профессионального дизайна. Figma также имеет библиотеку шаблонов, но она не такая обширная, как у Canva.
  5. Интеграция: Figma предлагает широкий спектр интеграций с такими популярными инструментами, как Adobe XD, Sketch и InVision, что позволяет легко импортировать и экспортировать созданные дизайны. Также Figma интегрируется с большим количеством популярных облачных сервисов, что не скажешь о Canva, у которой в разы меньше интеграций.
  6. Стоимость: у Figma и у Canva есть бесплатные тарифы с ограничением по функциональности. Стоимость подписки у Фигмы начинается от 12 $ за редактора, а у Канвы — от 12,99 $, что несущественно.

В целом, Figma — мощный инструмент векторного дизайна и создания прототипов, предназначенный для совместной работы, а Canva — удобный инструмент дизайна, который идеально подходит для быстрого и простого создания профессионально выглядящего контента для соцсетей, сайтов, рекламных материалов.

Кликайте на нужные функции, чтобы выбрать сервис по баллам.

Цены и тарифы

Figma

Пробный период
Бесплатный тариф
Способ оплаты: По подписке

Доступны бесплатный и платные тарифы. Стоимость подписки начинается от 12 долларов за пользователя в месяц.

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

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