Figma что это за программа

Figma что это, и для чего нужна она?

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

Платная или нет?

Существует ли Figma на русском языке?

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

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

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

Для работы вам всего нужна свежая версия браузера:

Если же вы используете desktop версию, то авторы пишут только о требованиях к видеокарте:

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

Работа с Figma offline

Скажу сразу, что figma без интернета не работает, так как программе при запуске нужно синхронизация с облаком. НО! Можно обойти это требование: для этого запустите программу с включеным интернетом, дайте программе все загрузить, а затем отключите интернет. Готово! Теперь вы можете спокойно работать в программе. (Данные актуальны на август 2019 года).

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

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

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

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

Регистрация в Фигма

Для того чтобы зарегистрироваться в программе Figma:

Новое видео на YouTube

Источник

Гайд по работе в Figma: знакомимся с программой

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

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

Что такое Figma и для каких задач она подходит

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

Программу используют веб- и UX/UI-дизайнеры, графические дизайнеры, разработчики. Она удобна для командной работы, поэтому также ей пользуются, например, менеджеры проектов и специалисты, которые работают по методике CustDev: общаются с целевой аудиторией, тестируют гипотезы и улучшают прототипы на основе тестов.

Что можно делать в Figma:

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

Векторную графику: логотипы, иллюстрации и другие графические элементы.

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

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

Презентации. В редакторе есть удобные шаблоны и необходимые инструменты для работы с таким форматом.

Схемы. Их можно рисовать в дополнении Figma Jam – это онлайн-доска для заметок, которая по функционалу не уступает платформе Miro.

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

Место Figma среди графических редакторов

Наряду с Figma дизайнеру нужно владеть и другими программами. В профессиональную базу входят, например, редакторы из пакета Adobe: Illustrator, Photoshop, InDesign. При этом перед вами не будет стоять выбор – Figma или Photoshop. Эти графические редакторы не заменяют друг друга, а дополняют, так что важно освоить разные инструменты и сочетать их в работе.

Для каждого типа задач самой удобной будет одна программа:

В Figma работают с элементами веб-дизайна и прототипами интерфейсов.

В Adobe Photoshop чаще всего делают сложную обработку растровой графики, создают коллажи и фотомонтаж для оформления сайтов.

В Adobe Illustrator создают векторную графику: логотипы, иллюстрации, элементы фирменного стиля брендов.

В Adobe InDesign работают с версткой: создают макеты книг и журналов, рекламные баннеры и многое другое.

Также есть несколько технических различий между сервисами:

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

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

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

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

Чуть позже Adobe представили свой редактор интерфейсов XD, чтобы занять место в конкурентной нише, а в 2016 году появилась Figma. Создатели сделали программу бесплатной, кроссплатформенной и простой в использовании, чем привлекли огромное количество пользователей по всему миру.

Стоит ли бояться ухода Figma с российского рынка?

В марте 2022 года Figma ввела ограничения для некоторых корпоративных аккаунтов в России. В основном, это те компании, которые попали под санкции.

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

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

Эксперт академии Pentaschool рассказывает о возможностях Figma

Павел Ярец, дизайнер с опытом более 15 лет, продюсер Digital media OKTAEDER, преподаватель курса по Figma от академии Pentaschool.

Впервые я познакомился с Figma в 2018 году, когда сервис находился еще в зачаточном состоянии – у редактора были перспективы, но никто всерьез его не воспринимал. Все прогрессивные команды работали в Sketch или Adobe XD, многие студии пытались делать свои онлайн-решения (Invision Studio, Framer и другие).

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

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

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

А спустя некоторое время Figma сделала огромное обновление: во-первых, появилось комьюнити, которое предоставило плагины и различные полезные ассеты для дизайна. Работать стало гораздо приятнее и удобнее. Во-вторых, появились новые инструменты (варианты компонентов, автолейауты и т.д.), и по своим возможностям этот редактор переплюнул и Sketch, и XD (последний, кстати, развивается крайне медленно, хотя и имеет широкую популярность на европейском рынке). Figma вырвалась далеко вперед и теперь является одним из самых передовых и перспективных инструментов дизайнера.

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

Как установить Figma: системные требования и тарифы

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

Программу для iOS/Windows или мобильное приложение Figma Mirror можно скачать здесь. Жестких системных требований нет, важна только видеокарта компьютера. Подойдут Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850 и более поздние.

Базовая версия Figma бесплатна, и она позволяет:

Использовать большинство инструментов и плагинов без ограничений.

Подключать к командной работе еще одного человека с правами редактора, кроме вас.

Создавать до 3 папок проектов.

Делиться файлами с любым количеством пользователей.

Хранить историю версий каждого макета не более 30 дней.

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

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

Следите за выходом новых материалов в Комьюнити, чтобы ничего не пропустить. До встречи!

Источник

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 нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.

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

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

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

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

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).

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

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

Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.

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

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

Figma является облачным продуктом

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

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

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

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

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

А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.

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

Отсутствие нормальной Темной темы

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

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

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

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

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

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

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

Источник

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

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

Рассказываем, как начать работать в Figma и в чем ее особенности.

Что такое Figma

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

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

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

Научиться пользоваться Фигмой можно быстро и легко. Дайте название проекту или команде, выберите тариф (бесплатный – Starter, платный – Professional) и приступайте к работе.

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

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

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

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

Турбо-страницы в Яндекс.Директе: что это такое, кому они нужны и как их создать

Турбо-страницы в Яндекс.Директе: что это такое, кому они нужны и как их создать

Компоненты

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

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

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

Фреймы

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

Сетки

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

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

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

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

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

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

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

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

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

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

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

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

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

Аудиореклама в ВК: как сделать рекламу в музыке

Аудиореклама в ВК: как сделать рекламу в музыке

Источник

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

Что такое эта ваша Figma?

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

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

Что можно делать в Figma: базовые фичи

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

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

Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл 😉 Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.

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

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

Файлы в облаке

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

Доступ к макетам есть с любого устройства — даже с iPad. Достаточно запустить браузер и выйти в интернет. А это, в свою очередь, значит, что больше не нужно постоянно экспортировать макеты с результатом работы из редактора в PNG и JPG. Достаточно отправить ссылку на файл с настроенным доступом, а получателю не обязательно иметь аккаунт в Figma.

Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.

Компоненты

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

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

Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.

Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.

Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.

Фреймы

В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой.

У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:

Сетки

Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:

Плагины

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

Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.

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

У Figma есть десктопное приложение для Mac OS и Windows, а вот любителям Linux придётся довольствоваться браузерной версией. Ещё есть приложение для мобильных устройств — Figma Mirror. С его помощью можно проверять результат работы на самом устройстве, что очень удобно. Главное, чтобы компьютер и мобильный находились в одной Wi-Fi-сети. Скачать нужные приложения можно в разделе Downloads на сайте Figma.

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

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

Стоимость

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

Минусы Figma

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

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

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

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

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

Что можно делать в Figma?

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

Прототипирование

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

Чтобы создать прототип, вам необходимо:

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

Usability-тестирование

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

Передача макетов разработчикам

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

Презентация

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

Кому нужна Figma

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

Figma Templates

Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта. Для каждого предусмотрено описание и инструкция по применению.

С чего начать?

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

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

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

Выводы

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

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

Что такое эта ваша Figma?

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

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

Что можно делать в Figma: базовые фичи

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

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

Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл 😉 Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.

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

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

Файлы в облаке

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

Доступ к макетам есть с любого устройства — даже с iPad. Достаточно запустить браузер и выйти в интернет. А это, в свою очередь, значит, что больше не нужно постоянно экспортировать макеты с результатом работы из редактора в PNG и JPG. Достаточно отправить ссылку на файл с настроенным доступом, а получателю не обязательно иметь аккаунт в Figma.

Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.

Компоненты

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

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

Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.

Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.

Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.

Фреймы

В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой.

У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:

Сетки

Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:

Плагины

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

Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.

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

У Figma есть десктопное приложение для Mac OS и Windows, а вот любителям Linux придётся довольствоваться браузерной версией. Ещё есть приложение для мобильных устройств — Figma Mirror. С его помощью можно проверять результат работы на самом устройстве, что очень удобно. Главное, чтобы компьютер и мобильный находились в одной Wi-Fi-сети. Скачать нужные приложения можно в разделе Downloads на сайте Figma.

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

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

Стоимость

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

Минусы Figma

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

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

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

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

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

Что можно делать в Figma?

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

Прототипирование

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

Чтобы создать прототип, вам необходимо:

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

Usability-тестирование

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

Передача макетов разработчикам

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

Презентация

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

Кому нужна Figma

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

Figma Templates

Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта. Для каждого предусмотрено описание и инструкция по применению.

С чего начать?

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

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

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

Выводы

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

Источник

Figma

Figma («Фигма») — это графический кросс-платформенный онлайн-редактор, который позволяет пользователям работать вместе в режиме реального времени.

Кому подойдет Figma

искра

Выберите дизайн-профессию, которая нужна в IT

Для чего нужна Figma

С помощью графического редактора Figma можно:

Преимущества программы

Возможность работать в браузере

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

Совместимость с разными ОС

«Фигма» может работать на Windows, Linux, Mac и даже Chrome OS. Подобных инструментов проектирования больше не существует.

Возможность работать над проектом в команде

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

Доступная цена

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

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

Безопасность

С чего начать работу

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

Для этого нужно выполнить следующие действия.

Аккаунт готов к работе.

Как выглядит интерфейс

В верхней части экрана можно увидеть меню «Файл», рядом с ним — выбранный фрейм. В нашем случае это монитор компьютера (Desktop). Также доступны к выбору iPhone 11, Blank Canvas и другие форматы, включая популярные печатные: А4, А5, Letter и т. д.

Выбор фрейма

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

Выбор размера фрейма

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

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

Слои в «Фигме»

Работа с объектами

Объекты, помещенные на холст, можно редактировать. За это отвечают три раздела: Design, Prototype и Inspect.

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

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

Inspect. Здесь можно посмотреть цвет, размеры и другие параметры объектов. В отличие от вкладки Design, менять настройки нельзя. Этот раздел полезен для разработчиков. Можно быстро скопировать код объекта и легко вставить в свою верстку.

Работа с сообщениями

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

Меню обратной связи и комментариев

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

Работа с текстом

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

Работа с текстом

Рисование нестандартных форм

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

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

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

Дополнительные плагины

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

Дополнительные плагины

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

Страница плагинов в «Фигме»

После установки он отобразится в рабочем меню.

Искра

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Figma что это за программа

Существует множество графических редакторов для дизайнеров: Photoshop, Adobe XD, Sketch, Canva и т. д. Среди них выделяется Figma (Фигма) ― один из самых популярных и удобных продуктов для UX/UI-дизайна. В ней можно проектировать прототипы и работать командой в онлайн-формате. Если вы дизайнер, рекомендуем хотя бы на базовом уровне освоить Фигму.

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

Что такое Figma

Figma ― графический кроссплатформенный онлайн-редактор. Он предназначен в основном для веб-разработчиков и дизайнеров интерфейсов. Через два блока мы расскажем, кто ещё может пользоваться редактором.

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

В Figma можно создавать:

Существует ли Figma на русском языке

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

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

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

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

Что есть в Figma и чего нет в Photoshop:

Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.

В каких профессиях может потребоваться работа с Figma

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

Кому нужна Figma:

Преимущества и недостатки

Фигма — это относительно новый редактор, он активно обновляется и совершенствуется.

Преимущества:

Недостатки:

Источник

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

Что такое Figma и для чего используется?

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

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

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

Что умеет Figma?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Что такое Figma и как с ней работать

В Figma делают прототипы, интерфейсы, векторную графику, презентации.

Графический редактор Figma появился в 2016 году. Тогда уже было несколько программ, чтобы разрабатывать интерфейсы. Гиганты — Sketch и Adobe XD. Но уже через три года Figma обогнала последний по популярности.

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

Что делают в Figma

✔️ Прототип

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

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

В прототипах Figma можно переходить с экрана на экран и следить, удобно ли пользоваться продуктом

✔️ Интерфейс

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

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

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

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

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

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

Поэтому все иконки отрисовывают в векторе. И в Figma для этого есть привычные инструменты:

С его помощью создают фигуры произвольной формы. Их легко редактировать: кликните дважды и поправьте нужный узел.

Механика не отличается от других векторных программ: перемещайте узлы, удаляйте, вытягивайте по обеим сторонам или по одной

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

Фигура сразу превратится в векторный объект

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

Выберите размер, цвет фигуры и обводки

✔️ Юзабилити-тест

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

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

✔️ Презентации

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

Презентацию можно экспортировать в PDF

✔️ Логотипы

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

Логотип экспортируют в векторный формат, например в SVG

Инструменты

⭐️ Сетки и макеты

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

Чтобы создать новый фрейм, выберите соответствующий инструмент на панели сверху

Затем нужно настроить его размер и задать сетку, по которой будете работать.

Перейдите на панель справа, выберите настройку Layout grid и задайте размер

По умолчанию Figma создаст сетку типа Grid, похожую на тетрадь в клеточку.

Обычно Grid используют для мобильных приложений

Чтобы поменять сетку, на той же панели нажмите на Grid, затем на +, выберите тип сетки Rows, задайте нужные параметры.

У вас получится полноценная сетка для работы, например, с типографикой

Кроме сетки есть направляющие. Примените их ко всей странице или только к выделенному фрейму. Для этого включите линейку в рабочей области — Shift + R. Перетащите направляющую.

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

⭐️ Слои и группы

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

Вся информация об объектах находится слева от рабочей области

⭐️ Стили

Чтобы шрифты и их настройки, цвета и эффекты гармонично существовали в одной дизайн-системе, создают собственную библиотеку стилей.

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

Для этого выделите нужный блок с текстом, перейдите в меню настроек справа, нажмите и далее +

Дайте понятное название этому стилю и нажмите Create style

Чтобы отредактировать сохраненный стиль, зайдите в его настройки

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

⭐️ Компоненты

Это объекты, копии которого меняются вместе с ним. Например, в проекте должно быть много кнопок. Чтобы не редактировать каждую из них, создайте одну и сделайте ее компонентом. Для этого нарисуйте простой прямоугольник, задайте ему нужные параметры и впишите текст. Затем сгруппируйте все элементы: Ctrl + G на Windows и ⌘ + G на Mac.

Далее превратите эту группу объектов в компонент с помощью символа в верхней части экрана. Либо сочетанием клавиш: Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.

Скопируйте кнопку и меняйте настройки этой группы объектов

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

Чтобы открепить объект от исходного компонента, выберите Detach instance в меню

⭐️ Auto Layout

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

Кнопка с Auto Layout подстроится под длину текста автоматически: ее размер не придется редактировать

Функция Auto Layout находится на панели справа. Выберите, как выстроятся объекты внутри фрейма:

— отступы между элементами;

— одинаковые поля со всех сторон.

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

Packed — расположить элементы рядом друг с другом.

Space between — распределить элементы равномерно по всему фрейму с Auto Layout.

⭐️ Плагины

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

Плагины условно делят на несколько типов:

Подходящий инструмент ищите на официальной странице сообщества Figma.

Преимущества

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

В Figma одновременно могут работать несколько участников — и на Windows, и на MacOS. Все изменения сохраняются автоматически. Еще можно оставлять комментарии к любым элементам.

💣 Облачный сервер

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

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

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

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

💣 Импорт Sketch-файлов

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

Тарифы

1️⃣ Бесплатный тариф:

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

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

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

Из-за санкций на момент публикации статьи платные тарифы неактуальны: Figma приостановила продажи в России. Доступен только базовый бесплатный тариф.

Как зарегистрироваться и установить

Нажмите Sign up

После регистрации вы сможете сразу создать проект в браузерной версии. Либо скачать ПК-версию или мобильную программу.

Освойте Figma с нуля на курсе «Профессия веб-дизайнер». За три месяца научитесь делать сайты-одностраничники, рекламные баннеры и интерфейсы, соберете проекты в портфолио, чтобы было проще находить заказчиков. Во время учебы выполните реальные заказы для «Перекрестка», Hoff, Qiwi и других крупных брендов.

Источник

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

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

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

Источник

Зачем разработчику изучать Figma: 10 важных особенностей

Что такое Figma

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

Интерфейс Figma с открытым макетом

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

Важные особенности Figma

Легко освоить

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

Оптимизация

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

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

Автоматическое сохранение

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

Перечень сохраненных редакций

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

Создание шаблонов

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

Перечень созданных шаблонов

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

Стилизация текста

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

Привязка к элементам

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

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

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

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

Пример интерактивного прототипа

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

Доступность командной работы

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

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

Комментирование

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

Пример комментария в Figma

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

Перенос стилей в код

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

Отображение CSS в Figma

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

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

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

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

Заключение

Источник