Figma что это? Как работать с Фигма? Обзор программы Figma.

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

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

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

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

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

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

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

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

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

• Chrome 49+
• Firefox 51+
• Safari 10.1+ (Apple — macOS)
• Edge 14+ (Windows)

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

• Intel HD Graphics 4000 (or later).
• Nvidia 330m (or later).
• ATI Radeon HD 4850 (or later).

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

Работа с Figma offline

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

Как работать с Figma?

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

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

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

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

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

Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

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

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

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

Фрейм iPhone X и iPhone 8

Панель Grid Layout позволяет быстро создать любую сетку.

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

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

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

• Максимум два редактора.
• Максимум три проекта.
• История версий хранится 30 дней.

Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.

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

Фигма — бесплатная программа для веб дизайнера

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

Figma программа, которая работает в браузере

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

Фигма работает в облаке

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

Командная работа в Figma

Раз уж заговорили о больших командах нужно сказать, что Фигма — это как раз то, что им нужно. Больше никаких костылей, типа Zeppelin и тому подобное — все работает тз одного клиента. Не нужно всем участникам проекта иметь рабочий Mac. Не нужно оплачивать годовую лицензию всем участникам работы, в Фигма оплата для команды работает на месяц. То есть покупать командную лицензию можно только тем, кто действительно работает в данный момент, а если он отправится в отпуск, то можно забить на него и сэкономить немного денег. К тому же покупать лицензию нужно только для тех участников, которые непосредственно редактируют проект, например, разрабам, которым достаточно просматривать его лицензия не нужна. Разве это не круто.

Чат

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

Контроль версии

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

Constraints

И в Scetch такое есть, только кто мне скажет, когда это появилось — до выхода Фигма или после?))Да ладно?! Неужели после?)) в общем, constraints. Это такая фича, которая позволяет привязывать объект или группу объектов к определенным сторонам родительского фрейма. То есть, при масштабировании родителя все его внутренние части будут находиться в четко обозначенном месте. Это очень круто работает для создания адаптивных версий сайта или изменении размера каких-то его частей.

Сетка в Фигма

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

Компоненты в Figma

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

Шрифты гугла всегда с тобой

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

Как добавить локальные шрифты в Figma читай по ссылке

По мелочи :

• Svg и PDF экспорт, при чем очень быстрый экспорт в один клик.
• Интеграция с avocode, zeppelin, dribble
• Живой чат поддержки. Воистину живой — ответ 2-3 часа.
• Фигма бесплатная для отдельных пользователей и для небольших групп на 2 на два редактора

А теперь о плохом

Зависимость от сети. Фигма не работает без интернета, равно, как и твой браузер

Меленькое комьюнити. Инструмент довольно новый и информации о том что и как тут не очень много

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

Данный сайт посвящен одной из самых удобных программ для веб-дизайнеров — Figma. Здесь вы найдете ответы на такие вопросы, как: “Что такое Figma? Чем отличается Figma от других программ? Как использовать Фигму в дизайне сайтов?”.

Эта программа на западе уже вовсю конкурирует с ведущими графическими редакторами, такими как Adobe Photoshop, Adobe XD, Sketch.

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

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

Что можете найти здесь?

Как писалось выше, основными разделами сайта являются:

• Шаблоны сайтов, UI-киты и другие готовые вспомогательные материалы, которые вы можете сразу использовать в своей работе.

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

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

Принципы в работе проекта

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

С чего начать обучение?

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

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

65 уроков по Figma для новичков: Интерфейс, работа, компоненты

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

Основы

Веб-дизайн

Плагины

Гграфика

10 лайфхаков в работе с Figma — Дизайн на vc.ru

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

Статья будет полезна как новичкам, так и уже опытным пользователям.

1. Делаем структуру страниц

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

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

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

Ниже несколько примеров такой структуры.

С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.

2. Называем одинаково слои на двух связанных компонентах

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

Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное

Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.

3. Все картинки заводим в цветовые стили

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

Обучающий курс по Figma для начинающих

15/02/2019 — я начал запись курса!

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

Во втором видео — отрисовка главной страницы.

В третьем видео — отрисовка страницы каталога (категории)

В четвертом видео — отрисовка карточки товара

В пятом видео — начало отрисовки служебных страниц

В шестом видео — отрисовка служебных страниц

В седьмом видео — заканчиваем дизайн макета

В восьмом видео — оформляем UI-кит

Полезные материалы

Статья по БЭМ — https://ru.bem.info/methodology/html/

Ссылка на иконки — https://drive.google.com/file/d/1NTm_w6LYZFEFgUiJGO-BaR0BkWPlzEAu/view?usp=sharing

Подписывайтесь на мой канал, чтобы получать свежие видео по вводному курсу. https://www.youtube.com/channel/UCpEBkr_Niarn3lEMIvEsFJg

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

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

Например, вы закончили редактировать 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

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

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

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

Фрейм iPhone X и iPhone 8

Панель Grid Layout позволяет быстро создать любую сетку.

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

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

Figma можно пользоваться бесплатно, с такими ограничениями:

• Максимум два редактора.
• Максимум три проекта.
• История версий хранится 30 дней.

Если вам в долларовых долларах на бесплатном тарифе, переходите на профессиональную стоимость 12 в месяц или Организации — 45 в месяц.

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

.

Фигма что это? Как работать с Фигма? Обзор программы Figma.

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

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

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

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

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

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

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

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

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

• Хром 49+
• Firefox 51+
• Safari 10.1+ (Apple — macOS)
• Edge 14+ (Windows)

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

• Intel HD Graphics 4000 (или новее).
• Nvidia 330m (или новее).
• ATI Radeon HD 4850 (или новее).

Данные видеокарты являются устаревшими.

Работа с Figma оффлайн

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

Как работать с Figma?

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

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

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

.

Figma — делаем дизайн системно / Хабр

Приветствую вас коллеги! Меня зовут Дмитрий Волков и я работаю в профессии больше десяти лет. Решил написать статью для тех, кто создает web и мобильный дизайн современных программ.

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

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

О Фигма рассказывать не буду, так как есть уже много статей на эту тему. Хочу только обратить ваше внимание на то, что она стоит на одном уровне со Sketch и Adobe XD. Так что мой подход можно с легкостью перенести и на эти редакторы.

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

Будем считать, что это все проведено и надо начать работать над визуальной частью интерфейса.

Свой процесс работы я разделил на несколько шагов.

Шаг первый: Определяем монтажные области

Самая верхняя монтажная область называется Gui-kit. Там я буду собирать все интерфейсные элементы и их поведение. Там же будут храниться компоненты (другие программы они называются символами).

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

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

Шаг второй: Определяем названия монтажных областей

Это очень важный шаг позволит вам не запутаться в макетах.

Название монтажной области мы будем обозначать так:

Разрешение_номер_номер состояния_название страницы

Получаем:

1920х1080_01_01_home_page

И если, например, на главной, требуется рассмотреть изменение страницы, то присваиваем состояние 91720005190100051903_ho_ho_me_ 9001

Шаг третий: Размер модуля и модульной сетки

Если мы возьмем тетрадь по математике и посмотрим на ее лист, мы увидим, что она разлинована в клеточку.Так вот одна клеточка из множества называется модулем.
Во всех макетах я использую размер модуля кратным 4-м.

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

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

Модульная сетку задаем для каждой монтажной области.Она там своя.

Шаг четвертый: Создаем дизайн правильно

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

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

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

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

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

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

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

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

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

Искренне ваш,
Дмитрий Волков

.