Программа фигма что это такое

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

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

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

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

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

• Возможность работать командой дизайнеров над одним проектом
• Доступ к интерфейсу и макетам прямо через браузер

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

Figma с нуля — Знакомство с программой | Веб дизайн. Урок 1

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

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

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

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

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

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

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

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

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

Что такое Figma и для чего она нужна?

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

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

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

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

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

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

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

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

Компоненты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тарифы Figma

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

Тариф Starter

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

• Работать в команде можно только 2 дизайнерам
• В режиме командной работы можно создавать только 3 проекта
• Контроль версий для проектов доступны только в течение 30 дней

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

Тариф 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. Надеюсь, данная статья оказалась для вас полезной, и вы смогли найти все ответы на свои вопросы.

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

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

Сохранить себе в соцсети:

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

Figma — простое решение для дизайнера, сложное решение для верстальщика

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

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

Самый неоспоримый плюс – халява

В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.

Наличие Мультиплеера

Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.

Задействован принцип кроссплатформенности

Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.

Удобные быстрые клавиши

Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.

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

Возможность работы с векторной графикой

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

Возможность создания компонентов

Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)

Подключаемые плагины

В Фигме есть функционал настраиваемых плагинов, и их там довольно много.

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

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

Проблема с определением фактических размеров элементов и расстояния между ними

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

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

Перекрытие и заблокированные слои

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

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

Проблемы с текстом

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

font-family: Roboto; font-style: normal; font-weight: normal;

а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.

Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.

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

Работа в фигме расхолаживает дизайнера

Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)

• Там дизайнер посчитал, что называть слои уже не имеет смысла. Пхх там ведь и так всё видно. Неважно, что при экспорте файлов у верстальщика будет Group1.png Group1(1).png….и т.д. Разберётся.
• Там слои забыл объединять в группы, и что б нормально забрать картинку, как она выглядит, например, с наложенной маской, опять надо забирать на свой проект, и самостоятельно группировать.
• Ещё классика, это вместо определенно цвета, использовать изменение свойства прозрачности (opacity) когда это целесообразно, и нет.

И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета

color: #000; opacity:0.49;

скорее всего перейдет к rgba представлению

color: rgba(0,0,0,.49);

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

Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт

Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.

*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…

О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.

Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.

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

Сделаем web лучше.

P.S. Отдельное спасибо, дизайнерам, которых я доставал дурацкими вопросами, но они на них стойко отвечали, и пользователю AWG-RU за пост Правила подготовки макетов в Figma

• Веб-дизайн
• Разработка веб-сайтов
• CSS
• Интерфейсы
• Графический дизайн

Источник: habr.com

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

Figma — это инструмент веб-дизайна, способный создавать:

• макеты;
• прототипы;
• интерактивную анимацию.

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

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

• интерактивные макеты;
• иллюстрации;
• логотипы.

Интерфейс Figma

Что умеет Figma?

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

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

Совместная работа над проектом

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

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

• вносить изменения и управлять ими;
• анализировать комментарии;
• держать всех интересующихся проектом в курсе происходящего.

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

Предлагаются 3 уровня доступа:

• на уровне команды;
• на уровне проекта;
• на уровне файла.

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

Функция режима редактирования и режима просмотра для совместной работы над макетом в Figma

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

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

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

Создание интерактивных прототипов и их тестирование

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

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

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

При тестировании определенного мобильного устройства лучше всего загрузить приложение Figma Mirror.

Приложение для тестирования макетов и прототипов Figma Mirror

Восстановление и дублирование файлов

Вы всегда можете просмотреть все версии файлов, и увидеть, кто и когда вносил изменения. Вам больше не нужно задаваться вопросом: «Это последняя версия?».

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

Конечно, автоматическое управление версиями — не единственный способ сохранить работу. Можно сохранить версию вручную или отредактировать конкретную версию в истории версий.

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

Создание библиотек компонентов и систем проектирования

Еще один плюс онлайн-сервиса Figma — это то, как он позволяет дизайнерам создавать, организовывать и распространять библиотеки компонентов.

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

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

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

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

Пример библиотеки компонентов в Figma для приложения Facebook

Взаимодействие с разработчиком

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

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

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

Расширенные возможности

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

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

Например, Figma позволяет импортировать различный контент из внешних источников. Плагин Google Sheets Sync — прекрасный пример того, что можно сделать. Он значительно упрощает интеграцию Google Таблиц.

Раздела подключения плагинов в Figma

Вместо вывода

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

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

Источник: e11evenmarketing.com

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

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

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

Что такое Figma

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

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

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

• Бесплатные функции. Можно свободно пользоваться данным графическим редактором, но только с некоторыми ограничениями. В их число входит число редакторов и проектов, время хранения истории версий и другие важные мелочи.
• Встроенные компоненты. Если вы создаете сразу несколько элементов с одинаковым стилем, можно менять их во всем макете. В других графических редакторах вам пришлось бы работать с каждым элементом по отдельности.
• Интеграция с различными сервисами. Можно перенести все свои проекты из Sketch или Zeplin без потери шрифтов, изображений или кривых. Еще доступно подключение к корпоративному мессенджеру Slack, пространству Confluence и так далее.
• Использование через браузер или приложение. Программа работает в вебе и на десктопе. Все, что необходимо для работы с ней – авторизация в уже существующем профиле и наличие стабильного интернет-соединения. Скачать редактор можно с соответствующего раздела официального сайта.
• Многопользовательский режим. Одна из главных особенностей графического онлайн-редактора Фигма. Есть возможность создания собственной команды для дальнейшего сотрудничества в рамках сервиса.
• Наличие фреймов. Причем с предустановленными размерами для разных устройств – телефонов, планшетов, компьютеров, смарт-часов и так далее. Плюс в том, что не придется запоминать какие-либо размеры. Просто выбираете подходящий вариант девайса и начинаете работать с ним.
• Просмотр истории версий. Сервис сохраняет ранние версии файла на 30 дней, при необходимости можно возвращаться к ним и дублировать любую из них. Сохранение происходит автоматически после внесения последнего изменения в файл. Кстати, можно добавлять всем версиям названия и описания.
• Хранение файлов в облаке. Нет необходимости скачивать проект каждый раз после внесения изменений – все сохраняется на диске автоматически.

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

Минусы Figma

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как пользоваться 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 – действительно крутая программа. Даже у меня появилось желание заняться разработкой дизайна интерфейсов, настолько все просто и удобно. Начинающие пользователи легко разберутся с тем, как работать в ней.

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

Источник: timeweb.com