что такое фигма для верстальщика

Что такое Figma и как ей пользоваться

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.

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

Что такое Figma

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

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

Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность.

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Минусы Figma

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

Как пользоваться Figma

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

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

Если вы не зарегистрированы в данном сервисе, сперва нажмите на крайнюю кнопку «Sign up», введите электронную почту, придумайте пароль и жмите на кнопку «Create account». Можно также войти через сервисы Google.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Я выбрала Google и авторизовалась через свой аккаунт. Следующий этап – ввод имени и выбор сферы. Также можно кликнуть по галочке для подписки на рассылку, далее нажимаем по кнопке для создания аккаунта.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!

Создание нового файла

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Импорт файлов

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

Разработка прототипов в Figma

Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого.

Макеты и сетки

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Просмотр прототипов

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Работа с изображениями

В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее).

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Работа с компонентами

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

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Работа со стилями и цветами

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Слои и группы

Работа со слоями здесь похожа на таковую в Photoshop. Можно создавать отдельные группы, перетаскивать на верхний и задний план определенные элементы. И все это доступно в разделе «Layers» в левой части экрана.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Совместное использование

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

Когда вы регистрируетесь в сервисе, персональная команда создается сразу же. При необходимости ее название можно легко поменять, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт «Rename». Оттуда же можно удалить команду. Чтобы создать новую команду, необходимо нажать на пункт «Create new team» в самом низу левой панели.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Типографика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Установка плагинов

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Фреймы

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

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Заключение

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

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

Источник

Что такое Figma и как ее использовать digital-специалисту

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Figma считается одним из самых популярных редакторов для UX/UI-дизайна. Программу используют для быстрого создания макетов веб-сайтов и их презентаций, причем как стартапы, так и крупные компании: Netflix, Zoom, Discort и Stripe.

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

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

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

Что такое Figma?

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

Раньше каждый дизайнер из команды устанавливал специализированный редактор, вроде Adobe Illustrator, скачивал макет, настраивал интерфейс, вносил корректировки и пересылал файл на проверку. И так повторялось каждый раз, когда вносились правки. Figma действует иначе.

6 причин использовать Figma

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

Режим совместной работы

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

У всех дизайнеров есть право оставлять комментарии и задавать вопросы внутри дизайнерского окна. Одновременная работа упрощает этап согласования и сокращает время, затрачиваемое на переписку в чатах. Комментарии по проблеме, оставленные в программе, не теряются — программа сохраняет их в истории файла.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

У приложения гибкие настройки приватности:

Файлы хранятся в облаке

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

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

Кроссплатформенность

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

Большой функционал

Бесплатной версии достаточно для полноценной самостоятельной работы дизайнера. Авторы могут:

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

В версии Organization дизайнер работает в отдельной ветке и объединяет изменения с исходным файлом в самом конце. Figma предупредит при наличии конфликтующих изменений и позволит выбрать, что встраивать. В модельном режиме видны все когда-либо созданные ветви. Команда работает централизованно под одной учетной записью: руководитель настраивает единый вход SALM и управляет подготовкой через SLIM.

Интеграция с другими программами

При переносе проектов из Sketch или Zeplin качество не теряется: Figma сохраняет начертание шрифтов, изображения и кривые. Верстальщики могут подключить сервис к мессенджеру Slack, Confluence и т.д.

История правок

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Историю версий можно посмотреть в разделе меню File → Show version history.
В бесплатной версии история изменений хранится месяц, в платной программе — сохраняются все корректировки с начала работы.

Базовый функционал

Функционал Figma прост и интуитивно понятен:

В Figma есть библиотека с бесплатными компонентами. Если вы хотите добавить одинаковые детали в разные части макета и поменять стиль, проблема легко решаема: нажмите на иконку F в левом верхнем углу и выберите Edit → Select all with same. Программа найдет объекты с идентичными шрифтами, соотношением сторон, цветом заливки и т.д.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Сервис выделит все одинаковые элементы по выбранному параметру.

Фреймы

В Figma есть заготовки под большинство популярных форматов: Apple Watch, смартфонов, ноутбуков, планшетов, фреймов для соцсетей, А4 листов и других решений.

Фреймы в этом приложении имеют некоторые особенности:

Сетки

Сетка — главный помощник верстальщика. В Figma она включается в правой панели меню в режиме Layout Grid. Для управления нужны всего две кнопки:

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

Плагины

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Они находятся в библиотеке на официальном сайте и на главном экране онлайн-версии. Если вы уже работаете в сервисе над продуктом, нажмите на логотип Figma, расположенный в левом верхнем углу, выберите Community (Сообщество) → Explore → Plugins.

Как использовать Figma при разработке продуктов?

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

Прототипирование и usability-тестирование

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

Прототипирование — это функция, которая отвечает за предпросмотр интерфейса при открывании на разных типах устройств: выберите в правом меню раздел Prototype → Device и выберите нужные параметры экрана.

Device — это функция для выбора устройства, на котором отобразится прототип. От нее зависит плавность прокрутки и внешний вид рамки.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

При разработке прототипов верстальщики закладывают функционал продукта, оценивают удобство сценариев, разработанных в карте сайта. Прототипы позволяют:

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

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

UI-элементы

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

Векторная графика

Сервис работает с векторными объектами: их можно экспортировать в формате SVG, импортировать из Adobe Illustrator или Sketch, сохраняя все настройки.

Заключение

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

Источник

Figma — что это за программа и как в ней работать

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Фигма — это популярный кроссплатформенный графический редактор для UX UI дизайнеров и веб разработчиков, с помощью которого можно создавать дизайн сложных интерфейсов, веб сайтов и мобильных приложений. А также в ней можно создавать интерактивные прототипы и небольшие анимации. В этой статье я подробно познакомлю вас с Figma — что это за программа, как в ней работать, чем отличается figma от photoshop и многое другое.

Figma — что это за программа простыми словами

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

У фигмы есть 2-е отличительные особенности:

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

Видео-урок знакомства с интерфейсом Figma:

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

Весь интерфейс программы выполнен на английском языке. То есть русской версии нет. Также как нет русификаторов и других «кряков». Если вы не знаете английского, то возможно первое время вам будет немного непривычно. Но я вас уверяю, через 2-3 дня работы вы будете хорошо в ней ориентироваться и без русской версии, потому что фигма достаточно интуитивная и удобная программа.

Figma — платная или бесплатная программа

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

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

Возможности Фигмы

Многопользовательский доступ к файлам

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

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

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

Для работы с другими дизайнерами нужно сначала создать команду. Делается это с помощью функции «New Team» в левом нижнем углу интерфейса.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Далее пишите название команды.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Добавляете участников команды путем ввода их электронных адресов. Здесь нужно указывать те e-mail адреса, по которым ваши коллеги зарегистрированы в фигме.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Облачное хранение данных в Фигме

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

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

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

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

Компоненты

Компоненты не являются особенностью фигмы, потому что возможность работы с компонентами есть и в других похожих редакторах (Adobe XD, Sketch). Но этот момент стоит выделить, потому что компоненты значительно упрощают работу над дизайном.

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

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

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

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

Чем отличается Figma от Photoshop

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

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

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

Хорошо, если у вас всего 1-2 макета, а представьте если таких макетов у вас 50 или более? В последних версиях фотошопа, есть возможность создавать смарт-объекты. Это некий аналог компонентов, но работать с ними не так удобно.

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

Тарифы Figma

На данный момент у фигмы доступно 3 тарифа: Starter, Professional, Organization. Посмотреть их можно на официальном сайте Figma, в разделе «Pricing».

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Тариф Starter

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

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

Тариф Professional

Это первый платный тариф и стоимость его составляет 15$ за 1 редактора в месяц или 12$ за 1 редактора в месяц при оплате на год. У этого тарифа есть дополнительные плюшки:

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

Тариф Organization

Это самый дорогой тариф фигмы и стоимость его составляет 45$ за 1 редактора в месяц при оплате на год. В этом тарифе нельзя оплачивать за 1 месяц, только годовая оплата. Сюда включено все то, что входит в тариф Professional, плюс:

Данный тариф идеально подходит для больших компаний со штатом дизайнеров.

Как работать в Фигма

Для начала работы вам необходимо зарегистрироваться на сайте Figma и создать там свой профиль. Для этого нужно нажать на кнопку «Sign up» в правом верхнем углу сайта или на кнопку «Try Figma for free» под заголовком.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Далее заполнить поля «E-mail» и «Password» (Пароль) и нажать на кнопку «Create account».

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

На данный момент там 13 подробных видео-уроков с моими комментариями, поэтому переходите и изучайте.

Как скачать программу Фигма на компьютер

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

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

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

Затем выбрать нужный вам инсталятор (для MacOS или для Windows) и скачать его.

что такое фигма для верстальщика. Смотреть фото что такое фигма для верстальщика. Смотреть картинку что такое фигма для верстальщика. Картинка про что такое фигма для верстальщика. Фото что такое фигма для верстальщика

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

Заключение

В этой статье я подробно рассказал вам про figma: что это за программа, как в ней работать и чем figma отличается от photoshop. Надеюсь, данная статья оказалась для вас полезной, и вы смогли найти все ответы на свои вопросы.

Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.

Источник

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

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