Фигма программа для дизайна что это

Онлайн-сервис Figma: все, что нужно знать разработчику

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

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

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

Фигма или Тильда? Зачем нужна Figma, если есть Tilda?

Примечание о сочетаниях «горячих» клавиш

В большинстве случаев сочетания «горячих» клавиш будут указываться одновременно для операционных систем Windows и macOS. При этом клавиша Ctrl для Windows соответствует клавише Cmd в macOS, а клавиша Alt в Windows аналогична сочетанию клавиш Option/Alt в macOS. Например: Ctrl/Cmd + Alt + C соответствует Ctrl + Alt + C для Windows и Cmd + Alt/Option + C для macOS.

Совместная работа над дизайном

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

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

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

По мере совершенствования дизайнерских приложений подобный рабочий процесс начал упрощаться. Дизайнеры начали использовать Zeplin и Invision для вовлечения разработчиков в обсуждение создаваемого интерфейса. Разработчики наконец-то получили полноценный доступ к дизайнерским материалам для извлечения данных об использованных цветах, шрифтах и параметрах элементов. Однако, несмотря на то, что доступ к актуальной версии дизайна стал открытым, дизайнерам по-прежнему приходилось работать в нескольких отдельных приложениях и прилагать усилия для синхронизации конечного результата. Такая схема работы была все еще далека от идеала.

Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.

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

При написании данной статьи я пользовался этим руководством , оно пригодится и вам для понимания всего, о чем пойдет речь далее.

Начало работы в Figma

Когда вас добавляют в участники проекта, реализуемого с помощью сервисе Figma , у вас будет выбор – открыть приложение в браузере или скачать его десктопный вариант для операционной системы macOS или Windows. Десктопное приложение является кроссплатформенным (как мессенджер Slack или среда разработки Visual Studio Code).

Функциональность браузерной и десктопной версии приложения Figma примерно одинакова. Десктопное приложение, к примеру, имеет встроенную поддержку для установленных шрифтов, а браузерный вариант для использования таких шрифтов потребует установки плагина Figma Font Helper.

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

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

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

Разделы сервиса Figma

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

1. Когда вы открываете файл, максимальный режим увеличения обеспечивает вывод всех разделов на видимую область экрана.
2. Увеличить или уменьшить масштаб рабочей области можно одновременным удерживанием Cmd ⌘ и прокручиванием вверх / вниз, либо с помощью нажатия клавиш + и -.
3. Для горизонтальной прокрутки холста нужно одновременно нажимать на пробел и «протаскивать» холст мышью.
4. Быстро увеличить отдельную секцию или элемент можно путем выбора необходимого объекта и нажатия комбинации клавиш Shift — 2.
5. Мгновенно вернуться в масштаб, при котором на холсте видны все элементы, можно с помощью комбинации клавиш Shift + 1.

Не переживайте по поводу запоминания этих клавиатурных комбинаций – вы всегда сможете просмотреть эти и другие сочетания, нажав Cmd — Shift — ?

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

Стили в проектах

При открытии нового проекта в Figma полезно, прежде всего, определить основные стили. Figma показывает все стили проекта в правой панели. Здесь вы cможете сразу же найти все шрифты, цвета, размерные сетки и другие стили, использованные в дизайне.

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

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

Просмотр и редактирование стиля элемента

Выбор элементов

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

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

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

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

Когда доберетесь до нужного элемента, кликните по вкладке Code («Код»), доступной в правой панели для просмотра подробной информации о CSS стилях.

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

Размеры элементов и расстояния между ними

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

Измерение расстояния между элементами

Figma отмечает расстояние между объектами красной линией и показывает значение в пикселях. Если вам нужно измерить расстояние до вложенного элемента, или другой группы, или раздела – нажмите Cmd ⌘, как и при выборе объекта.

Экспорт элементов дизайна

В прошлом за экспорт элементов отвечали дизайнеры – поскольку у большинства разработчиков не было доступа к графическим редакторам. В сервисе Figma у разработчиков есть полный доступ ко всем аспектам дизайна, в том числе к экспорту.

Подготовка к экспорту

Первое, что нужно сделать перед экспортом объектов – пометить элемент как экспортируемый. Для этого выделите нужный элемент и нажмите на «плюс», расположенный в правой панели, рядом с заголовком Export(«Экспорт») .

В зависимости от типа файла, который необходимо экспортировать, настройки будут отличаться. Для изображений, к примеру, предусмотрен только выбор масштаба и формата – PNG, JPG, SVG или PDF. В качестве имени файла Figma использует название слоя, при желании вы сможете добавить расширение. После этого элемент можно будет сохранить, нажав на кнопку экспорта.

Совет: элемент можно быстро экспортировать, если кликнуть по нему правой кнопкой мыши и выбрать из появившегося меню опцию « Копировать/вставить ». Таким образом можно скопировать изображение или SVG-код. Подобный подход позволяет быстро сохранять элементы, не заходя в настройки экспорта.

Экспорт всех элементов

Элементы можно экспортировать не только по одному, но и все сразу. В последнем случае нужно перейти в главное меню и нажать « Экспорт » в меню « Файл ». Также можно использовать комбинации клавиш Shift + Cmd + E в MacOS и Shift + Ctrl + E в Windows.

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

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

Если количество экспортируемых элементов слишком велико для одного файла, можно использовать «/» в имени слоя для выделения объектов в отдельную группу. Figma автоматически создаст папку для этой группы и экспортирует элементы папки в качестве поддиректории.

Переходы и анимация

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

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

Анимация мобильного меню

Эта простая анимация сопровождает открытие гамбургер-меню. Как вы можете видеть, у иконки меню-гамбургера есть триггер On Tap («при нажатии»), событие запускается после «тапа» и приводит к экрану Navigate To («перейти к»), на котором меню находится в раскрытом состоянии. В качестве типа перехода используется Smart Animate – в режиме «умной анимации» Figma автоматически рассчитывает переход между двумя состояниями. Для расчета используется плавное разворачивание Ease Out продолжительностью в 300 мс.

Эта информации необходима для точного воспроизведения анимации в CSS, но в отличие от данных по другим элементам дизайна, вкладка «Код» не предоставляет расшифровки процесса.

Общение и обсуждение проекта

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

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

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

Заключение

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

Если вам нужны дополнительные сведения о функциональности рассмотренного нами сервиса – обратитесь к официальной документации Figma , в которой содержится максимально подробное описание всех возможностей платформы.

Источник: www.internet-technologies.ru

Как пользоваться Figma — подробная инструкция

В Figma можно создавать прототипы сайтов, векторные иллюстрации, кнопки, плашки и другие элементы интерфейсов. Рассказываем, как пользоваться «Фигмой», о преимуществах и недостатках сервиса и кому он подойдёт.

Содержание статьи скрыть

Что такое Figma

«Фигма» — онлайн-сервис для веб-дизайна. В нём можно отрисовать иллюстрации и элементы интерфейса, создать интерактивный макет сайта, прототип приложения или векторную графику.

Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.

Работа в «Фигме» строится по другому принципу. Для доступа в сервис нужен лишь интернет и браузер. Все правки можно вносить одновременно в одном макете, настроив совместный доступ.

Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться

Возможности Figma

Сервис позволяет решать большое количество дизайнерских задач. Расскажем про основные проекты, которые можно делать в «Фигме».

Создание прототипов

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

Прототип, созданный в «Фигме». Источник: figma.com

Отрисовка элементов интерфейса

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

Отрисованные элементы в «Фигме». Источник: setproduct.com

Работа с векторными объектами

В «Фигме» можно создавать векторную графику, импортировать векторные объекты из редакторов Adobe Illustrator и Sketch, а также экспортировать дизайн в формат svg.

Создание блок-схем

В «Фигме» можно быстро создавать диаграммы, графики и схемы. Благодаря встроенному в сервис онлайн-конструктору блок-схем и большой библиотеке компонентов, можно просто перетаскивать элементы на холст и за считаные минуты создавать свою блок-схему. Готовый вариант можно экспортировать в png, svg или в другом удобном формате, также у «Фигмы» есть интеграции с программами для управления проектами и документами: Asana и Dropbox Paper.

Элементы для создания блок-схем в «Фигме». Источник: figma.com

Плюсы и минусы Figma

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

В «Фигме» над одним документом могут работать одновременно несколько людей. Можно открывать доступ для просмотра или редактирование. Если команда параллельно работает над макетом, то на экране видны курсоры разного цвета

Не работает без интернета

«Фигма» — это онлайн-сервис, для работы в нём необходим интернет. Если интернет резко пропадёт, все действия дизайнера автоматически сохранятся, но продолжить работу будет нельзя

Незаконченные версии не нужно выкладывать в облако и контролировать версии. Все исходники хранятся в аккаунте «Фигмы» и видны всем у кому открыт совместный доступ

Ограниченные возможности работы с текстом

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

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

Нельзя добавить плагины

В отличие от похожих графических редакторов Sketch или Adobe Photoshop, в «Фигме» при нехватке определённых функций нельзя добавить плагины или создать скрипт — сценарий последовательных действий пользователей, которые запоминает программа, записывает и воспроизводит их

«Фигма» — онлайн-сервис, но есть и версия, в которой можно работать со стационарного компьютера без использования браузера. Для работы нужен интернет и авторизация. Файлы сохраняются в облаке, но также их можно импортировать в браузерную версию

Нельзя настроить горячие клавиши

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

Основные инструменты Figma

У «Фигмы» много инструментов для работы над проектами, расскажем об основных.

Фреймы

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

Модульная сетка

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

Модульная сетка в «Фигма»

Компоненты

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

Настройка компонентов в «Фигме»

Векторные формы

В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.

Использование векторных форм в «Фигме»

Изображения

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

Так можно добавить изображения в «Фигму»

История версий

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

Так можно посмотреть историю версий в «Фигме»

Кому пригодится Figma

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

Дизайнерам

Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.

Разработка пользовательского интерфейса в «Фигме»

Разработчикам

Разработчики могут использовать режим Developer Handoff. Этот режим позволяет увидеть вкладку «код» в панели свойств. Разработчики могут использовать направляющие, чтобы определить расстояния до объектов и их размер, копировать CSS-стили элементов, их код для Android и iOS.

Режим Developer Handoff в «Фигме»

Блогерам

Блогеры могут создавать в «Фигме» мудборды, чтобы привлекательно оформлять посты в ленте и сторис.

Шаблоны для в «Фигме»

Smm-специалистам

Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры и др.

Создание рекламных объявлений в «Фигме»

Менеджерам

Менеджеры могут вести в «Фигме» проекты с диаграммой Ганта и создавать блок-схемы. Диаграмма Ганта — это один из методов планирования рабочего времени и отслеживания процессов для относительно небольших проектов, обычно создаётся в виде столбчатых диаграмм. Блок-схемы помогают пошагово прописать конкретный алгоритм или определённый процесс работы.

Создание Диаграммы Ганта в «Фигме»

Редакторам

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

Создание блок-схем в «Фигме»

Начало работы в Figma

Создавать проекты в онлайн-сервисе можно из браузера или десктопной версии. Если вам мешают многочисленные вкладки, то лучше скачать «Фигму» на рабочий стол. Если же вы часто пользуетесь разными устройствами, то используйте браузер, зайдите на сайт «Фигмы» и зарегистрируйтесь.

Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе

Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.

Форма регистрации в «Фигме»

После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.

Так создаётся новый файл

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

Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.

Как быстро освоить онлайн-сервис Figma

Если у вас нет времени на самостоятельное освоение программы и вам нужно более глубокое погружение в особенности «Фигмы» — выберите один из онлайн-курсов.

Вы освоите главные инструменты «Фигмы», узнаете, как создавать текстовые слои и свои текстовые стили, научитесь создавать элементы навигации и сможете самостоятельно адаптировать элементы под разные размеры экрана. Курс состоит из 5 видеоуроков с подробными лекциями и домашними заданиями.

Срок обучения: 1 месяц

Стоимость обучения: бесплатно

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

Срок обучения: 3 дня

Стоимость обучения: бесплатно

Вы с нуля освоите «Фигму» и научитесь использовать плагины, компоненты и горячие клавиши для быстрой работы. Вы сможете создавать прототипы с разной степенью детализации и адаптировать их под любые устройства. Вас ждёт 48 онлайн-уроков и столько же практических заданий, которые помогут отточить навыки и собрать портфолио.

Срок обучения: 4 месяца

Стоимость обучения: 22 400 руб.

Коротко о главном

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

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

Источник: checkroi.ru

Что такое Фигма и как в ней работать

Фигма – рабочий инструмент дизайнеров, веб-разработчиков, SMM-специалистов, владельцев бизнеса и обычных пользователей. В этом графическом редакторе создают макеты сайтов и приложений без особой подготовки. Рассказываем, как начать работать в Figma и в чем ее особенности.

Оптимизируйте маркетинг и увеличивайте продажи вместе с Calltouch

Что такое Figma

Figma – онлайн-платформа для разработки графических проектов: логотипов, интерфейсов, иллюстраций. Работать над ними можно самостоятельно или в команде. В Фигме вы увидите, каким будет дизайн приложения или сайта на экранах смартфонов и ПК. Прототип можно перенести в Тильду – конструктор веб-страниц.

Instagram* (продукт компании Meta, которая признана экстремистской организацией)

Возможности и особенности Figma

Сервисом могут пользоваться не только профессионалы. Обычные блок-схемы, доски настроения, шаблоны для Instagram* (продукт компании Meta, которая признана экстремистской организацией) и других соцсетей, диаграммы, карты сайта и пути клиента – все это базовые опции платформы . Научиться пользоваться Фигмой можно быстро и легко. Дайте название проекту или команде, выберите тариф (бесплатный – Starter, платный – Professional) и приступайте к работе.

Многопользовательский режим редактирования

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

Облачный сервер хранения файлов

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

Маркетинг

Компоненты

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

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

Виджет обратного звонка для сайта

• Повысьте конверсию сайта на 30%
• Новым клиентам 50 минут в подарок

Также можно подключить другие виджеты Calltouch для увеличения конверсии сайта и роста продаж. Зарегистрируйтесь и добавьте интерактива на свой сайт уже сегодня.

Виджеты Calltouch

• Увеличьте конверсию сайта на 30%
• Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм

Фреймы

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

Если вам необходимо переместить кнопку обратного звонка и фото на всех фреймах, сгруппируйте эти элементы (Object → Group Selection). Проверьте слои на предосмотре, сохраните результат. Готовый фрейм можно скачать в удобном формате.

Сетки

Допустим, вам необходимо настроить расположение товаров в прототипе интернет-магазина. Сетка (Layout Grid) поможет скорректировать промежутки между ними (Gutter), расстояния от краев фрейма (Margin), а также размеры, количество (Count), цвет (Color) карточек с каждым продуктом. Сеток во фрейме может быть сколько угодно – отдельно для каждого графического компонента или группы.

Цвет и параметры сетки легко поменять. Предусмотрено 12 колонок для крупных объектов, 24 – для мелких. Вертикальные линии подойдут для работы с текстом.

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

Десктопная версия

Ее скачивают на Windows, MacOs, Android, iOS для загрузки собственных шрифтов и работы офлайн. Работу из десктопной версии можно импортировать в браузерную. Фигма – редактор с английским интерфейсом, поэтому не доверяйте ресурсам, на которых якобы можно скачать русскоязычную версию. Воспользуйтесь официальным сайтом . Дополнительно загрузите шаблоны.

Условная бесплатность

Для самостоятельной работы и двух специалистов подойдет бесплатный тариф Starter. В него включены:

• 3 проекта;
• 2 библиотеки от Figma;
• 30 суток облачного хранения истории проекта;
• доступ для двух человек.

За 12$ в месяц с каждого члена команды доступен тариф Professional. Его преимущества:

• неограниченное количество проектов;
• множество библиотек;
• неограниченное хранение истории;
• доступ по приглашению.

Тариф Organization за 45$ в месяц дает вам полный доступ к работе в Figma. Список возможностей:

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

Figma для дизайнеров

Есть масса графических редакторов – Photoshop, Adobe XD, Sketch, Canva. Но в Фигме целый ряд уникальных преимуществ для дизайнера:

• интуитивно понятный интерфейс;
• возможность командной работы через любые удобные браузеры, устройства и ОС;
• система шрифтов Google Fonts;
• возможность сохранить проект в формате Sketch (для Mac OS);
• возможность оставлять комментарии участникам команды;
• отзывчивая техподдержка;
• возможность разрабатывать не просто дизайн, а живой макет;
• облачное хранение.

Недостатки Фигмы

Какие нюансы учесть перед регистрацией в Фигма:

1. Искажение линейных иллюстраций. После копирования PNG, JPG и SVG-файлов Фигма добавляет пиксели.
2. Небезопасное хранение файлов. Тариф Starter не защищает файл от копирования и использования макета на любом этапе работы.
3. Нужен стабильный доступ в интернет. Фигма не предназначена для использования офлайн, но есть способ это обойти: зайдите в программу, дайте ей время загрузить все необходимое и работайте не в сети. Или скачайте десктопную версию.
4. Только английский интерфейс. Пользуйтесь инструкциями , если не знаете английского языка.

Начало работы в Фигме

Зайдите на официальный сайт и зарегистрируйтесь: кнопка Create one. Затем в правом верхнем углу кликните на кнопку +New. Так вы создадите файл. Задайте необходимые параметры и преступайте к разработке макета.

Также вы можете скачать приложение. Зайдите на сайт Figma , выберите «Products», «Downloads», укажите продукт и вашу ОС. Либо нажмите на кнопку «Try Figma for free».

Маркетинг

Мы открыли Академию Calltouch: быстро, нескучно и бесплатно

Мы открыли Академию Calltouch: быстро, нескучно и бесплатно

Коротко о главном

• Фигма – уникальная платформа для создания любых макетов – от несложных графических объектов до прототипов сайтов.
• Работать над проектом можно в команде в режиме онлайн.
• Вся информация хранится в облаке.
• Есть десктопная версия.
• Доступ к редактированию открыт через любые устройства, браузеры, ОС.
• Платные тарифы надежнее и функциональнее.
• Фреймы можно скачать в удобном формате, с необходимыми компонентами: кнопками, фото, текстами, меню и списками.

Источник: www.calltouch.ru

Знакомьтесь: графический инструмент Figma

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

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

Данный софт существует в нескольких вариациях:

1. ПК версия.
2. Онлайн сервис.
3. Для мобильных устройств.

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

Как работать в программе Figma, регистрация учетной записи

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

1. Переходим на вебсайт https://www.figma.com/ .
2. В правом верхнем углу нажимаем кнопку “Sign up”.
3. Появится форма, где нужно указать почтовый адрес и пароль. Заполняем поля и нажимаем кнопку “Create Account”.
4. Переходим к следующему шагу, здесь необходимо написать имя владельца учётной записи и выбрать в раскрывающемся списке работу «What kind of work do you do?». Если не можете определиться, выберите любой вариант, на функционал сервиса это никак не влияет. Предположим, вы собираетесь делать красивую графику для сайта, тогда выберите design (дизайн). Нажимаем “Create Account”.
5. Профиль создан. Мы окажемся на странице с шаблонами, которые были созданы в качестве примера. Список будет постоянно пополняться и вашими работами.
6. Последнее, что необходимо сделать, подтвердить email, чтобы полностью завершить регистрацию.

Установка софта: существует несколько десктопных программ, для MacOS и Windows. Чтобы ознакомиться с ними, переходите по ссылке. Помимо основных программ, доступны зеркала для iOS и Андроид. Находятся они под заголовком “Live Device Preview”. Зеркала дают доступ на просмотр сайта без возможности редактирования.

Все действия по созданию дизайна делаются на ПК.

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

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

При запуске вы увидите каталог с готовыми работами. Чтобы открыть макет, щелкните по нему дважды. Дальше: в редакторе есть настройки для редактирования. Сверху обратите внимание на надпись “View only”. Файл доступен только для просмотра, нельзя редактировать и сохранять. Чтобы снять ограничение и получить возможность вносить изменения, выполните действия, показанные на картинке:

После этого создастся копия документа, где пользователь сможет редактировать блоки.

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

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

Чтобы добавить карточку с картинкой, сначала следует поместить фотографию и текстовое поле с описанием, потом все это выделить мышкой, открыть контекстное меню и нажать кнопку “сгруппировать» (Group Selection). Таким образом будет создан единый блок, который можно перетаскивать и размещать там, где удобно. Пример действий ниже:

Если необходимо разъединить объекты, открываем снова контекстное меню, там появится новый пункт “Ungroup”, используем его.

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

1. Frame – фрейм, в Фигме это главный каркас приложения. Сюда входит весь дизайн: картинки, анимации, кнопки, тексты и прочее. Если вы собираетесь создавать программу, работающую на всех устройствах, смартфонах, айпадах и ПК, в этом случае понадобится добавить сразу три фрейма.
2. Примитивы. Фигуры, которые выполняют задачу для рисования небольших картинок. Если зайти в поисковик “картинки” и задать запрос “логотипы”, то, посмотрев поисковую выдачу, сразу будет ясно, что их объединяет. Большинство лого – это окружности, квадраты и треугольники. Примеры: Xbox – крест в круге, Instagram – квадрат с фотоаппаратом, углы закругленные. С помощью сервиса Figma, можно сделать свой логотип. Вот список всех доступных примитивов: Rectangle, Line, Arrow, Ellipse, Polygon, Star.
3. Place Image – возможность добавлять картинку, она расположена в том же месте, где простые фигуры. Выбираем с жесткого диска любую картинку и размещаем на холст кликом мыши. Есть дополнительные способы добавления изображения: перетаскиваем мышкой в сервис, из интернета – “копирование”, затем “вставить”. Скопируйте любое графическое изображение правой кнопкой мыши “Копировать картинку”, перейдите в Фигму и нажмите комбинацию горячих клавиш Ctrl-V. После этого img будет добавлен.
4. Pen (перо) – инструмент перо предназначен для рисование изогнутых линий, это может оказаться кстати, если хотите оформить картинку так, чтобы она не выглядела топорной. Как работает? Ставим одну точку, потом, удерживая кнопку мыши, указываем направление. Линия между двумя точками становится изогнутой.
5. Text – этим инструментом можно добавить на рабочую область описание, например, карточки товара.
6. Comments – устанавливается, если необходимо отправить комментарии к работе. Допустим, есть ТЗ, где указан план работы, но нужно уточнить некоторые моменты, например, какой выбрать задний фон макета. Для этого есть comments: ставим маркер и вписываем в поле текст.

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

Почему следует работать с сервисом Figma?

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

• Совместная работа над одним проектом. Все внесенные изменения увидят коллеги в режиме онлайн. Таким образом, можно наблюдать за построением проекта. Чтобы убедиться, как работает режим онлайн, откройте один проект в двух разных вкладках браузера и попытайтесь внести изменения в одном окне и посмотрите результат в другом окне. Количество одновременно работающих сотрудников будет отображено в панели справа. Мышка второго разработчика также появится на экране, и вы сможете увидеть каждое действие web-мастера.

• Разработка интерфейса под разные виды цифровых устройств. На панели есть кнопка создание фрейма, в настройках можно выбрать устройство, frame добавится под выбранный device.
• Live-chat – возможность быстро связаться и получить ответ от сотрудников сервиса.
• Условно-бесплатный. Если, например, за Фотошоп приходится выкладывать немалые деньги, то здесь можно ограничиться бесплатной версией. В перечень входит работа с тремя проектами, подключение одного дополнительного сотрудника. История отредактированных версий проекта хранится не более 30 дней. Если требуется больше возможностей, то рекомендуется перейти на платный аккаунт, это будет стоить 12 $. В нем пользователь получит: неограниченное количество проектов, хранение истории без лимита по времени, командная библиотека элементов, их можно выбирать в любое время, продвинутая функция управления правами пользователя. Если собираетесь организовать командную работу, то за каждого сотрудника необходимо заплатить еще 12 $. Как работать в Фигме бесплатно ? Просто зарегистрируйтесь, и free-аккаунт будет доступен по умолчанию.

Как и в любой системе, в Фигме есть свои плюсы и минусы. Начнем с положительных сторон:

1. Быстрая разработка – скорость работы впечатляет. Даже сложные проекты с кучей фреймов отображаются без задержки.
2. Все проекты под рукой. Достаточно создать макет веб-приложения, отправить ссылку, чтобы поделиться работой. Забудьте о старых методах отправки через почтовый сервис, теперь все происходит online.
3. Оплата только за использование услуг – при совместной разработке обычно привлекают дополнительных сотрудников. За каждого нового специалиста взимается 12 $. Если дизайнер уйдет в отпуск оплата не списывается.
4. История изменений в реальном времени. Бывают ситуации, что трудоёмкий проект может быть подпорчен действиями нового сотрудника. В таком случае есть история сохранения копий документа.
5. Переход с одного графического редактора в другой. Если до этого приходилось работать в Скетче, то можно легко перенести проект на Фигму для дальнейшего редактирования.

Как и в любой программе, минусы тоже присутствуют:

1. Работает только при подключенном интернете – все файлы хранятся в облаке, поэтому доступ к сети обязателен.
2. Ломается графика при экспорте и импорте. При сохранении и загрузке проекта вы можете заметить некорректность отображения вектора. Потребуется дополнительное исправление через Illustrator.
3. При масштабировании текстовой области – text не вмещается. Границы ведут себя непредсказуемо. Исправить возможно, сбросив все настройки и задав параметр width и height вручную.

Лайфхаки от экспертов

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

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

Таким образом можно расширить границы: вверх-вниз, вправо-влево. Сдвиг происходит по пикселю. Если нужно увеличить сильнее, то в этом случае задействуйте shift. Комбинация Ctrl-Shift-стрелки увеличивает размер на число, указанное в параметре Nudge Amount.

2. Быстрое добавление нескольких объектов через фиксированное расстояние. Например, вы собираетесь оформить карточки с товарами и вам нужно, чтобы отступы были обозначены фиксированно. Не нужно проставлять размеры отступов в настройках. Щелкните по объекту, по которому хотите сделать дубликат, удерживайте клавишу Alt и перетащите карточку в любое направление.

После создание первого дубликата, просто нажимаем CTRL-D и получите копию на фиксированном расстоянии. Несколько щелчков, и создание объектов завершено. Они построятся и будут отображаться на фиксированном расстоянии.

3. Ctrl- очистка холста от панелей. Комбинация клавиш уберет лишнее и отобразит дизайн полностью. Повторное нажатие восстановит панели.

4. Для быстрого поиска инструмента, откройте меню и напишите название.

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

Источник: convertmonster.ru