Figma что это, и для чего нужна она?
Платная или нет?
Существует ли Figma на русском языке?
На данный момент Фигму на русском языке скачать нельзя, так как данная программа не содержит русской версии. Также не существует и русификаторов Figma. Поэтому работать в Figma придется на английском языке.
Если вы не знаете английский язык, то начните его учить с помощью этой программы. Все самые свежие материалы по UX и UI дизайну также на английском языке. Если вы хотите развиваться как веб-дизайнер, то лучше всего изучать все материалы не в переводах, а на языке оригинала.
Системные требования Figma
Для работы вам всего нужна свежая версия браузера:
Если же вы используете desktop версию, то авторы пишут только о требованиях к видеокарте:
Данные видеокарты являются относительно устаревшими поэтому в абсолютном большинстве случаев вы сможете установить Figma на свой компьютер.
Работа с Figma offline
Скажу сразу, что figma без интернета не работает, так как программе при запуске нужно синхронизация с облаком. НО! Можно обойти это требование: для этого запустите программу с включеным интернетом, дайте программе все загрузить, а затем отключите интернет. Готово! Теперь вы можете спокойно работать в программе. (Данные актуальны на август 2019 года).
Как работать с Фигма?
В обоих случаях вам доступен одинаковый набор функций и инструментов, что на процесс создания дизайна никак не скажется.
Как пользоваться figma
Это была основная информация по программе Figma. Далее рекомендую вам начать изучение программы с инструментов. Первый урок можно посмотреть по данной ссылке.
Регистрация в Фигма
Для того чтобы зарегистрироваться в программе Figma:
Что такое Figma: возможности и принципы работы
Революционный онлайн-сервис для дизайнеров. Проектируйте, создавайте прототипы и работайте командой прямо в браузере. Рассказываем о Figma.
У Figma низкие требования к подготовке пользователя и мощный потенциал при относительной простоте. Чтобы все возможности программы с самого начала работали на вас, обратите внимание на курс Skillbox по Figma. Вам расскажут многие тонкости и неочевидные моменты, которые впоследствии сэкономят кучу времени.
Что такое Figma
Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Разработка интерфейсов происходит в онлайн-приложении.
У Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность совместной работы над документами.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Возможности и особенности Figma
Многопользовательский режим редактирования
До появления Figma нескольким дизайнерам сложно было работать над одним проектом и передавать макеты разработчикам. Photoshop отказывался корректно открывать макет, пока вы не установите нужные шрифты. Или коллега вносил изменения в свою копию проекта и забывал сказать вам об этом.
Команда Figma учла подобные проблемы и создала продукт, который позволяет работать над проектом одновременно нескольким дизайнерам, поддерживает версионость и даёт много других возможностей. Они упрощают жизнь как дизайнеру, так и разработчику.
Чтобы сотрудничать с другими дизайнерами, создайте команду.
Всё интуитивно понятно: пишете название команды, выбираете нужный тариф, готово.
Облачный сервер хранения файлов
Все файлы хранятся в облаке Figma. Не надо вспоминать, где лежат ваши макеты, скачивать и после того, как внесли изменения, заливать их обратно. Изменения в Figma сохраняются автоматически.
Компоненты
Это элементы пользовательского интерфейса, которым можно задавать общие стили — и затем быстро менять их во всём макете сразу.
Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.
История версий
В Figma легко просматривать ранние версии файла и восстанавливать или дублировать любую из них. Версии автоматически сохраняются, если в течение 30 минут в файле не было никаких изменений.
Вы видите, когда файл был отредактирован и кто сделал изменения. Можно и вручную добавлять новые версии при необходимости. Чтобы не запутаться в дальнейшем, осмысленно называйте версии и добавляйте описание. Например, детали проекта: итерацию, этап, какие изменения внесли.
Фреймы
Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.
Сетки
Панель Grid Layout позволяет быстро создать любую сетку.
Десктопная версия
Figma — онлайн-сервис, но есть и десктопная версия. Для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Файлы сохраняются локально и при необходимости импортируются в браузерную версию.
Условная бесплатность
Figma можно пользоваться бесплатно, с такими основными ограничениями:
Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.
Это далеко не все возможности программы. Дизайнеру важны скорость работы над проектом и коммуникация в процессе. Эти и многие другие задачи позволяет решить онлайн-сервис Figma.
О конкретных приемах, которые упростят работу в Figma, читайте здесь.
Можно ли фигму перевести на русский язык
Существует множество графических редакторов для дизайнеров: Photoshop, Adobe XD, Sketch, Canva и т. д. Среди них выделяется Figma (Фигма) ― один из самых популярных и удобных продуктов для UX/UI-дизайна. В ней можно проектировать прототипы и работать командой в онлайн-формате. Если вы дизайнер, рекомендуем хотя бы на базовом уровне освоить Фигму.
В этом гайде мы расскажем вам, что такое Figma, какие у неё возможности и кому она может пригодиться. После того, как прочитаете нашу статью, вы разберётесь, как работать с Figma.
1. Для вставки стилизованного по дизайну оглавления вставляем в режиме исходного кода
Что такое Figma
Figma ― графический кроссплатформенный онлайн-редактор. Он предназначен в основном для веб-разработчиков и дизайнеров интерфейсов. Через два блока мы расскажем, кто ещё может пользоваться редактором.
Figma можно скачать на компьютер или работать в браузере. Главное преимущество этого редактора ― возможность совместной работы над проектом. Все данные хранятся в облаке, поэтому можно работать над макетами без скачивания.
В Figma можно создавать:
Существует ли Figma на русском языке
Её не существует. Не пытайтесь найти версию на русском языке. Скорее всего, файлы на сайтах с такими заголовками заражены. Вы скачаете вредоносную программу и поймаете вирус на компьютер.
Не переживайте, если не знаете английского. У сервиса дружественный интерфейс ― вы поймёте, куда нажимать. Плюс при регистрации вас ждет небольшое обучение: 6 всплывающих подсказок, которые сориентируют вас.
Чем Figma отличается от Photoshop
До появления Figma самым популярным инструментом для работы у дизайнеров был Photoshop. Но у него было достаточно минусов, чтобы при появлении нового сервиса разработчики и дизайнеры интерфейсов перешли в Figma.
Что есть в Figma и чего нет в Photoshop:
Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.
В каких профессиях может потребоваться работа с Figma
Выше мы уже сказали, что в программе Фигма в основном работают дизайнеры интерфейсов и веб-разработчики. Но есть ещё несколько профессий, которым тоже будет удобно вести проекты в этом сервисе.
Кому нужна Figma:
Преимущества и недостатки
Фигма — это относительно новый редактор, он активно обновляется и совершенствуется.
Преимущества:
Недостатки:
Инструменты и возможности Figma
Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.
Многопользовательский режим редактирования
До появления Figma не было доступного всем инструмента, который обеспечивал бы общий доступ к проекту. Для MacOS создали Sketch, а для других операционных систем решения не существовало.
Начать работу в командном режиме просто.
Облачные технологии дают возможность совместного доступа к проекту. Если вам нужны макеты на компьютере, вы можете их скачать в расширении fig.
Облачный сервер хранения файлов
Figma — это онлайн-редактор. У него есть своё облачное хранилище, где хранятся все файлы, и пользователь работает над ними. Фигма практически не задействует мощности вашего компьютера ― вы можете работать с огромным количеством холстов без потери скорости.
Компоненты
Удобный раздел для тех, кто работает со множеством мелких повторяющихся элементов. С его помощью можно превратить группу объектов в компонент и внести изменения кликом мышки. Например, эту функцию можно использовать, если надо изменить цвет кнопок во всём макете.
Чтобы объекты и группы объектов на разных артбордах стали компонентом, кликните на объект, нажмите на значок сверху и создайте копии. Теперь все изменения будут отражаться одновременно на всех фреймах.
Компоненты выделяются фиолетовым цветом, а родительский помечается ромбиком сверху:
Фреймы
Фреймы (артборд, холст) — это рабочие пространства. Чтобы вызвать панель фреймов, нажмите F. Есть библиотека предустановленных артбордов.
Можно сочетать рядом несколько фреймов, как на примере ниже:
Вы можете создать свой авторский фрейм: поставьте курсор на свободное место, нажмите и растяните прямоугольник до нужного размера.
Сетки
Сетка во фрейме — это направляющие, которые помогают дизайнеру в Figma ровно размещать объекты и упорядочивать их. Частота линий, цвет и прозрачность могут быть разными ― они настраиваются в окне при нажатии.
Чтобы настроить сетку, нажмите «+» рядом с надписью Layout Grid:
По умолчанию установится значение расстояния между линиями 10 px. Задайте необходимую ширину сетки:
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid.
Если вы работаете с мелкими деталями, вам может понадобиться дополнительная разметка. Чтобы добавить нужные линии, щёлкните ещё раз на «+».
Отличия десктопной версии Figma от браузерной
Несмотря на всю схожесть версий, у скачиваемой Фигмы есть некоторые преимущества перед браузерной версией.
Отличия десктопной версии:
Если вы хотите посмотреть макет, провести презентацию, показать макет в режиме прототипирования, то браузерной версии будет достаточно. Для работы же лучше скачать десктопную версию.
Работа с изображениями
Изображения в Фигме — это не отдельные объекты, а заливка фрейма.
Как добавить изображение:
Изображение загружается с автоматическим параметром заполнения.
Параметры заливки изображений:
Работа со стилями и цветами
В Figma удобно работать с изображениями. Вы можете отрегулировать цвета, яркость отдельных частей рисунка и общую яркость, контраст, насыщенность.
Стили градиентов:
Чтобы добавить градиент на рисунок, кликните на «+» в разделе Fill и выберите подходящий:
Регулируйте настройки градиента: подбирайте нужный цвет, интенсивность, количество точек градиента и т. д.
Вы можете создать свой фирменный стиль или воспользоваться уже готовыми вариантами из библиотеки. Нажмите на кнопку, которая показана на скрине:
В этом списке вы можете выбрать из уже созданных стилей или собрать свой вариант. Нажмите «+» и назовите свой стиль. Так он сохранится у вас в библиотеке:
Слои и группы
Слои — это содержимое фрейма: картинки, текст, видео. Принцип работы со слоями в Фигме очень похож на Photoshop.
Слои располагаются слева от основной рабочей области. Вы можете создавать группы, менять порядок элементов.
Чтобы объединить элементы внутри фрейма, нажмите клавиши Ctrl + Alt + G на Windows и Cmd + Opt + G на MacOS.
Чтобы разгруппировать объекты, нажмите Ctrl + Shift + G на Windows и Cmd + Shift + G на MacOS.
Типографика
Figma работает с Google шрифтами ― они унифицированы и не слетают при передаче макета. Но если вы хотите использовать свои варианты, установите плагин Font Helper для десктопной версии и используйте шрифты с вашего компьютера.
Нажмите на букву Т в верхней панели сервиса, чтобы создать текст. Все настройки вы найдёте справа от рабочей поверхности:
Установка плагинов
У Figma есть библиотека плагинов, которые можно установить бесплатно. Они помогают оптимизировать работу дизайнера.
В разделе Community кликните на Plugins и прейдёте в раздел Explore:
В настройках профиля вы можете посмотреть, какие плагины у вас уже установлены.
Тарифы Figma
У Фигмы есть 3 тарифа, расскажем подробнее о каждом.
Starter
Это базовый бесплатный тариф. Создатели Фигмы рекомендуют его использовать для личных целей и теста сервиса командой.
В тариф входят:
Professional
На этом тарифе у пользователей появляется больше возможностей. Он стоит 12$ с человека, если оплатить год использования, и 15$ с человека, если платить помесячно. Этот тариф предоставляется бесплатно на 2 года студентам и преподавателям направления дизайн.
Чтобы получить бесплатную версию Фигмы, надо зайти на сайт, заполнить небольшую анкету и ждать инструкций по почте.
В тариф входят:
Organization
Этот тариф предназначен для корпоративного использования сервиса. Ежемесячная стоимость — 45$ с человека, подписка оплачивается сразу на год.
В тариф входят:
Системные требования Figma
Параметры запуска и установки десктопной версии Figma зависят от операционной системы. Скорее всего, ваш компьютер спокойно потянет Figma.
Минимальные требования к операционной системе:
Для тех, кто работает в Фигме из браузера, надо следить за обновлениями приложения.
Минимальные версии браузеров для корректной работы:
Чтобы Фигма стабильно работала, на вашем компьютере должна стоять видеокарта не старше 2012 года. На современные модели такие не ставят.
Как скачать программу Figma на компьютер
У Figma есть несколько вариантов работы ― не обязательно открывать её только в браузере. Если вы, например, путаетесь во множестве вкладок, то версия для компьютера облегчит вашу жизнь.
Зайдите на сайт программы Figma в раздел Downloads. Нажмите на нужную версию согласно операционной системе и следуйте инструкциям установщика.
Если вы часто работаете с телефона или планшета, можете скачать приложение Figma Mirror для мобильных устройств.
Как пользоваться Figma
Начать работать в Figma не сложно. Расскажем, что нужно сделать для старта.
Регистрация или авторизация
Перед тем как вы сделаете свой первый проект, вам надо войти в свой аккаунт или создать его.
Нажмите кнопку Sign up.
Откроется окно, в котором вам предложат войти с помощью вашего аккаунта Google или использовать логин и пароль заранее созданного профиля. Если вы уже есть в Figma, залогиньтесь. Если вы ещё не зарегистрированы, надо создать аккаунт.
Создание нового файла
Чтобы создать новый файл, нажмите на кнопку в правом верхнем углу:
После этого откроется основная рабочая область. Выберите необходимые размеры фреймов, расположите их на столе и начинайте работать.
Разработка прототипов в Figma
Прототип — это макет сайта или приложения. В Figma можно наглядно представить, как люди будут взаимодействовать с продуктом. Дизайнер отрисовывает экраны, а затем добавляет связи между ними. Благодаря предустановленным размерам экранов устройств, можно сразу оценить прототип.
Скрин прототипа с ютуб-канала Веб-дизайн & Александр Решетников
В этой статье мы рассказали всё самое важное и полезное о Фигме. Этот сервис легко освоить новичку, потому что у него дружественный интерфейс. Это удобный онлайн-инструмент для совместной работы над проектом, который сделал проще жизнь разработчиков и дизайнеров. Если вам интересно развиваться в этом направлении, то без Figma не обойтись.
Что такое Figma и как ей пользоваться
Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.
Поговорим о том, что же представляет собой этот сервис, узнаем, в чем его главные особенности, а также задействуем его на практике.
Что такое Figma
Figma – онлайн-сервис для дизайнеров, веб-разработчиков и маркетологов. Он предназначен для создания прототипов сайтов или приложений, иллюстраций и векторной графики. В редакторе можно настроить совместную работу, вносить и обсуждать правки, причем как в браузере, так и через приложение на компьютере.
Возможности и особенности Figma
Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность.
Если тех возможностей, что даются бесплатно, для вас недостаточно, то можно купить подписку. Описание тарифов ниже.
Минусы Figma
Естественно, графический редактор имеет пару недостатков, но они не столь существенно влияют на рабочий процесс при его грамотной организации. Например, требуется наличие подключения к интернету, ведь без него работать в Figma невозможно. А еще интерфейс редактора представлен только на английском языке.
Как пользоваться Figma
Разберу, как пользоваться Фигмой. Сначала речь пойдет о входе в аккаунт. Я покажу, как это сделать в браузере.
Регистрация или авторизация
Если вы не зарегистрированы в данном сервисе, сперва нажмите на крайнюю кнопку «Sign up», введите электронную почту, придумайте пароль и жмите на кнопку «Create account». Можно также войти через сервисы Google.
Я выбрала Google и авторизовалась через свой аккаунт. Следующий этап – ввод имени и выбор сферы. Также можно кликнуть по галочке для подписки на рассылку, далее нажимаем по кнопке для создания аккаунта.
Уже зарегистрированным пользователям необходимо кликнуть по ссылке «Log in». В результате откроется немного другое поле, где вы сможете ввести данные и авторизоваться.
Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!
Создание нового файла
Чтобы создать новый файл, жму на плюс в правом верхнем углу интерфейса. Выбираю подходящий формат для будущего дизайна и жму по кнопке «Create file» для старта. Если выбрать пункт «Blank canvas», откроется пустое рабочее пространство.
Импорт файлов
Если вы ранее использовали приложение Sketch, можете импортировать из него проекты в Figma. Как уже говорилось ранее, ни один элемент при этом не пострадает – шрифты, кривые и изображения никуда не денутся и не сместятся. Срабатывает даже простое перетаскивание файла из первого приложения во второй сервис. Доступно копирование отдельных элементов в формате SVG.
Разработка прототипов в Figma
Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого.
Макеты и сетки
Для создания макета необходимо выделить нужный слой, перейти в раздел «Design» в правой панели, а там уже найти пункт «Layout grid». Там выбираете размер, цвет и прозрачность. Можете поменять форму с сетки на столбцы или строчные ряды. Доступно применение сразу нескольких макетов, а для переключения между ними используется комбинация Ctrl + G.
Просмотр прототипов
Суть этой функции в том, что вы можете просматривать, как будет выглядеть созданный вами интерфейс на самых разных устройствах. Для этого в панели на правой части экрана выбираем раздел «Prototype». В категории «Device» подбираете нужное вам устройство с предустановленным размером экрана.
При необходимости можно изменить цвет модели и расположение на горизонтальное или вертикальное. После того как настройка завершится, жмем на кнопку «Present», расположенную справа от «Share», для просмотра прототипа на выбранном девайсе.
Работа с изображениями
В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее).
На этом работа с изображениями не ограничивается. В данном графическом редакторе предусмотрено наложение эффектов и изменение некоторых параметров. Все это доступно в специальной панели в правой части, которая выходит при выделении картинки.
Работа с компонентами
Любой созданный вами элемент можно добавить в раздел «Компоненты» для повторного использования в других проектах. Чтобы пополнить библиотеку, следует выделить нужный объект и нажать на комбинацию Ctrl + Alt + K. В результате значок элемента в панели слоев поменяется.
Внесение изменений в таких компонентах согласовано – если поменять какие-либо детали в основном экземпляре, изменения будут внесены во все остальные копии. Добавленные в коллекцию объекты доступны во вкладке «Assets» в левой панели.
Работа со стилями и цветами
Графический сервис хорош еще тем, что в нем можно менять стили сразу нескольких элементов. А еще есть возможность создания собственного цветового варианта. Для этого необходимо просто создать объект, выделить его, затем нажать на квадратную кнопку, которая показана на скриншоте.
Слои и группы
Работа со слоями здесь похожа на таковую в Photoshop. Можно создавать отдельные группы, перетаскивать на верхний и задний план определенные элементы. И все это доступно в разделе «Layers» в левой части экрана.
Совместное использование
Мы помним, что в Фигма можно создавать и совместно редактировать различные проекты. Теперь подробнее нужно раскрыть тему создания команды и приглашения в нее других пользователей.
Когда вы регистрируетесь в сервисе, персональная команда создается сразу же. При необходимости ее название можно легко поменять, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт «Rename». Оттуда же можно удалить команду. Чтобы создать новую команду, необходимо нажать на пункт «Create new team» в самом низу левой панели.
Теперь о том, как пригласить людей в макет. Сначала выбираем нужную вам команду и в новом окне кликаем по кнопке «Invite» в правом верхнем углу. Вводим имя пользователя, даем ему права на просмотр/редактирование, отправляем приглашение.
Но есть и другой способ совместной работы над проектом без приглашения кого-либо в команду. В рабочем пространстве нужного проекта жмем по кнопке «Share», далее настраиваем права и отправляем приглашение. Можно также скопировать ссылку и отправить ее любому человеку.
Типографика
По умолчанию в Фигма установлены шрифты Google. Для десктопной версии вы сможете установить специальный плагин Font Helper для использования локальных шрифтов с вашего компьютера.
Чтобы создать текст, следует выбрать соответствующую иконку в панели управления или нажать на латинскую букву T. Все настройки отображаются в правом окне, в том числе размер, цвет, выравнивание, тип шрифта, его стиль и прочие элементы.
Установка плагинов
Фигма поддерживает установку плагинов для оптимизации работы. Полную коллекцию можно посмотреть в разделе «Community» на главной странице, перейдя в раздел «Explore».
Все установленные плагины можно посмотреть в одноименном разделе, перейдя в настройки профиля.
В качестве примера приведу вставку изображений из сервиса Unsplash. Для начала жмем правой кнопкой мыши по любой области в редакторе, можно даже по рабочему фрагменту, далее находим пункт «Plugins», переходим в подраздел и открываем «Unsplash». В результате откроется новое окно, где вы сможете выбрать картинку и вставить ее.
Фреймы
Чтобы увидеть параметры фрейма, необходимо нажать на кнопку F. Справа отобразится панель с разными вариантами артбордов. Можно в одном проекте выкладывать по несколько фреймов разных форматов, причем отдельно друг от друга.
Есть возможность создания артборда нужного вам размера. Для этого следует открыть соответствующий раздел и в рабочем пространстве с помощью мыши создать фрейм подходящего формата.
Заключение
Figma – действительно крутая программа. Даже у меня появилось желание заняться разработкой дизайна интерфейсов, настолько все просто и удобно. Начинающие пользователи легко разберутся с тем, как работать в ней.
Не забываем, что это идеальное решение для командной работы. Аналогов, конечно, много, но этот редактор определенно стоит уделенного ему внимания.
