В 2016 году наша компания полностью перевела процесс прототипирования и веб-дизайна на молодой и развивающийся графический онлайн-редактор Figma (до этого мы проектировали в Moqups, а рисовали в Photoshop). Мы попросили Егора, нашего дизайнера, рассказать о продукте и поделиться своими впечатлениями. Собственно, Егор и нашёл Фигму, досконально изучил её и внедрил в отдел дизайна «Лидера поиска». Так что слово заслуженному фигмоведу!
- Преимущества программы
- Возможности командной работы
- Недостатки и ограничения
- Что в итоге
Сразу скажу: у меня нет макбука, поэтому, работая UI/UX и веб-дизайнером, все макеты я по старинке создавал в Фотошопе и мог лишь облизываться на недоступный мне Скетч. Объяснять недостатки такого подхода нет смысла: как только проект выходит за рамки одной-двух страниц, работать становится ресурсозатратно.
Куча файлов с макетами, в которых приходится следить за единообразием и боль внесения мало-мальских правок. С Фигмой я работаю с самой первой версии (специально посмотрел: вышла 27 сентября 2016 года). Это стал просто-таки глоток свежего воздуха. Наконец, появился кроссплатформенный конкурент Скетча! В сети полно статей, нахваливающих Фигму, поэтому мой обзор на те вещи, которые стали для меня ключевыми.
Уроки Figma (Фигма) – №1: Начало работы, основы программы | Школа Максима Солдаткина
Главные преимущества
Простота освоения
Забавно, но когда работаешь с продуктами Adobe 20 лет, перестаешь замечать, насколько это монструозные и сложные программы с бесконечным количеством функций и возможностей. Осознаёшь это только тогда, когда кто-то просит тебя объяснить, как повторить какой-то трюк или решение. Порой это реально сложно.
Так вот, для того чтобы внедрить программу в работу и начать делать на ней проект, мне понадобилось несколько часов, а в течение пары дней я изучил абсолютно все возможности Figma. В дальнейшем достаточно просто следить за блогом и твиттером фигмовцев, чтобы быть в теме появляющихся фишек. Так же просто программа осваивается для минимальных нужд и недизайнерами. Процесс обучения в Figma проходит быстро. Наши менеджеры глянули видеоуроки по Фигме, за день получили необходимые знания и уже могли кроить прототипы. Смотрим видеоуроки для начинающих: как работать в Figma
Интерфейс Фотошопа. Под капотом еще тонна панелек и скриптов, которые я скрыл
А это — интерфейс Фигмы
Производительность
Фигма действительно быстра. Работа в ней происходит на куче холстов, расположенных рядом. И если на моём неслабом, в общем-то, ноутбуке (I7, 32 Гб ОЗУ, SSD) Фотошоп уже на 5-7 холстах с хорошим количеством графики начинает ощутимо притормаживать (у Фотошопа в принципе проблема с артбордами), то Фигме и 20 холстов нипочём, продолжает летать.
На этом документе Фотошоп прилично притормаживает
А Фигма легко справляется с такими количеством холстов
Это не значит, что у неё нет пределов. Фотошоп требователен прежде всего к процессору и объему оперативной памяти, а основные системные требования Figma — к видеокарте, поэтому на слабых ноутбуках с интегрированной видеокартой комфортная работа может стать проблемой: при очень большом количестве холстов (3-5 страниц с 20 холстами каждый) документ грузится долго или вообще «вешает» маломощный компьютер.
Автоматическое сохранение и контроль версий
Онлайновость Фигмы отменяет необходимость постоянного сохранения макета и риск потерять данные (Вы же тоже нажимаете Ctrl-S после каждого действия в Фотошопе? Если нет, значит вы просто еще ни разу не теряли работу за последние два часа из-за внезапного вылета программы.) А прекрасный контроль версий за последний месяц (Фигма делает автокопии, но можно сделать и вручную) избавляет от необходимости плодить кучу подверсий проекта. Выручало не один раз, проверено лично.
Список версий проекта
Компоненты и фреймы
Да, это её основные фишки, и они действительно круты. Фреймы — это, по сути, холсты в холстах со своими отступами, направляющими, правилами выравнивания и масштабирования элементов внутри них. Компоненты — это те же фреймы, только превращенные в шаблонизированные блоки по типу смарт-объектов в Photoshop или символов в Illustrator / Animate. Это потрясающе.
Кнопки, наборы иконок, шапки, подвалы сайтов, формы обратной связи — всё можно превратить в компоненты и затем, как из конструктора, формировать однотипные страницы. Но самое главное — компоненты подчиняются родительской копии: меняешь в ней, меняются все дочерние.
Об этом я мог только мечтать, когда вставал вопрос о том, чтобы изменить дизайн шапки или кнопки и приходилось открывать 20+ psd-макетов Photoshop, править там каждый блок, сохранять, закрывать и переотправлять. Залинкованные смарт-объекты с проставленными layer comps (если кто понимает, о чём я) костыльненько выручали, но много удобства не добавляли. В Фигме — пара щелчков и всё.
Дочерние копии еще и самодостаточны: можно поменять параметры (например, цвет отдельно взятой кнопки), а остальные копии и родительский объект останутся незатронутыми. С компонентами скорость работы и оперативных правок на прототипах выросла в разы. В PRO-версии Фигмы (Да, она бесплатная, чёрт побери!
Это ж просто праздник какой-то!) можно создавать полноценную динамическую библиотеку компонентов, блоков, стилей для использования в различных проектах. Поменял главный компонент — и обновление произошло сразу в нескольких проектах, а разработчикам об этом пришла оповещалка. Для продуктового дизайна эта возможность позволяет постоянно актуализировать дизайн-систему. Мне это не столь критично, я обычно работаю над разными несвязанными между собой проектами, но сама парадигма библиотек отличная.
Как пользоваться компонентами в Figma
Удобное выравнивание элементов
Помнится, в Photoshop была вечная проблема с расстановкой элементов на определенном расстоянии (например, пункты меню или карточки товаров), приходилось делать вручную или пользоваться сторонними скриптами. В Фигме это учли, работает чудесно. Берешь элементы, нажимаешь кнопку и готово — объекты разместились на заданном расстоянии, которое меняется на ходу. Более того, можно взять и поменять местами выровненные блоки простым перетаскиванием с сохранением отступов. Красота!
А еще имеется отличная функция Pack Horizontal и Pack Vertical, я её не встречал ни в одном редакторе, она позволяет быстро скомпоновать элементы вплотную друг к другу.
Пользуюсь выравниванием постоянно
Стили текста
Фигма не первая, кто это внедряет. Божественный Indesign в этом плане вне конкуренции, но я никогда не приму его в качестве программы для веб-дизайна, сколько бы ни нудели и умничали аксакалы российской веб-индустрии. Не для того он создан. Потом Фотошоп ввёл стили текста. Но эта убогая функция в нём так и осталась убогой функцией. Работает не пойми как и медлительная до безобразия.
Попробуй изменить стиль — и компьютер подвисает, тяжело пережевывая макет. Я пару раз попробовал и бросил. В Фигме работа со стилями быстрая и удобная. Прописал всю типографику, затем в течение нескольких секунд любые изменения применяются сразу на куче макетов и объектов.
Пример набора стилей
Копирование стилей объекта
В Фотошопе мне чертовски не хватало нормального копирования и переноса стилей с одного объекта на другой, всё было очень костыльно. В Фигме можно копировать как отдельные свойства (заливку, обводку), так и целиком весь стиль. А можно вообще создать заготовленные стили (так же, как стили текста) и применять их к любому объекту.
Впоследствии достаточно изменить сам стиль, чтобы поменялся внешний вид всех связанных объектов. Именно такие мелочи и оставляют приятное послевкусие от работы. Figma автоматически «цепляет» шрифты из базы Google Fonts, что очень удобно, бесплатно и не требует лишних телодвижений. Собственные шрифты подключить тоже можно: десктопная версия делает это автоматически, для браузерной версии устанавливается специальная надстройка Font Helper. Иногда могут быть баги, когда шрифты неверно отображаются, если с документом поработал пользователь без установленных гарнитур, но в целом система работает отлично.
Привязки
Привязки — ещё одна замечательная вещь, которую фигмовцы продвигали с первых версий, и она действительно отличная. Суть в том, чтобы привязать любой элемент к границам фрейма и сохранять свою позицию относительно них при изменении размеров последнего. Например, можно «прибить» подвал сайта к нижней границе страницы и он всегда будет там, какой бы высоты ни был холст. Или оставить логотип в левом верхнем углу, а телефон в верхнем правом, заставить сайдбар тянуться на всю высоту макета, а текст в кнопке всегда быть по центру (и по ширине, и по высоте). В случае адаптивной вёрстки это даёт большую свободу, упрощая многие рутинные действия по изменению положения и размеров блоков.
Работа привязок объектов на макете-примере
Конечно, не всё работает так гладко. Во-первых, чтобы хорошо овладеть навыком привязки, придётся повозиться, перебирать методом тыка и тестировать. Масштабировать макеты в Figma можно в очень разумных пределах, иначе всё начинает ломаться и сваливаться. Например, изменить макет с ширины 320 px до 480 px можно, Фигма растянет всё красиво.
А вот, например, просто сузить макет шириной 1024 px до 768 px (и уж тем более до 320 px), конечно, не получится, придётся допиливать блоки руками и настраивать новые параметры. Но всё равно, привязка сильно выручает.
Удобство работы со слоям
После Фотошопа и Иллюстратора — это просто отдушина. Организовано настолько хорошо, что можно не брать в руки мышь (частично фигмовцы скопировали подход у Скетча). Ты не отвлекаешься на выделение слоев и их перетаскивание. Переход к дочерним слоям и обратно, переименование, в том числе групповое, перемещение фокуса по дереву слоев — всё это на кончиках пальцев.
Работа с графикой
Фигма — это еще и векторный редактор. Примитивы, перо, узлы, кривые Безье — всё это есть. Однако в этом плане Фигма даже в подметки не годится любому полноценному векторному редактору: Adobe Illustrator, Corel Draw, Xara Designer. Для простейших манипуляний или иконок годится, но не более.
То же касается и примитивных возможностей цветокоррекции изображений, простенькое маскирование объектов, негибкие булевые операции над векторными объектами. Но зато Фигма замечательно вставляет векторные объекты из Иллюстратора через буфер обмена, открывает EPS и SVG файлы простым перетягиванием на холст.
Фигмовцы — молодцы, постарались, чтобы продукт был всеядным и переход с других программ был максимально простым. Фигма способна импортировать файлы Sketch. Не идеально, конечно: сложные макеты Figma открывает не совсем корректно, но это лучше, чем ничего. Еще одно: Фигма вставляет PNG-файлы из буфера обмена, сохраняя прозрачность! О, как мне этого не хватало в Фотошопе.
Интерактивные прототипы и анимированные переходы
Фигма пытается охватить всю область прототипирования, поэтому с первых версий добавили функции интерактивных прототипов, планомерно улучшая и добавляя новые фишки. Сейчас это и анимированные переходы между макетами, и фиксация блоков при прокрутке, и возможность сразу посмотреть макет на мобильном телефоне через приложение (У Фотошопа была отличная функция Device Preview по тому же принципу, но в CC2018 её зачем-то решили вырезать.) В общем, при желании можно соорудить полноценный «живой» прототип. Пусть ей далеко до Axure, но здесь всё сразу и «из коробки».
Когда макетов много, схема прототипа превращается в военную карту Второй мировой
Источник: liderpoiska.ru
Как создавать красивые презентации в Figma
Научитесь создавать аккуратные слайды и эффективно презентовать их с помощью Figma.
Я понимаю. С тех пор как вы открыли для себя Figma, вы привыкли ко всем ее преимуществам и полагаете, что все остальные инструменты для работы с графикой «недостаточно хороши». Вы хотите создавать красивые слайды, но Powerpoint или Google Slides ограничивают ваше воображение и эффективность.
Что ж, не беспокойтесь об этом! Вы можете сделать презентацию прямо в Figma. Мы расскажем вам о том, как разрабатывать красивые презентации в Figma быстро и эффективно, а также как профессионально представлять их заказчикам.
Совет: Прежде чем начать, скопируйте этот файл с шаблонами слайдов из Сообщества Figma.
1. Начните с фреймов
Для создания слайдов используйте фреймы. Чтобы нарисовать фрейм, выберите соответствующий инструмент в панели навигации в верхнем левом углу или нажмите клавишу F. Один фрейм = один слайд вашей будущей презентации.
Как следует из названия, фрейм создает своего рода рамку для вашего слайда, и все элементы, которое вы в него перетащите, становятся частью фрейма.
Идеальные размеры слайда (и, соответственно, фрейма) — 1270 x 720 px.
Порядок слайдов
Порядок слайдов в режиме презентации (запускается кнопкой, расположенной в правом верхнем углу) зависит от их координат на холсте. Сначала воспроизводятся фреймы по оси X слева направо, а затем по оси Y сверху вниз.
Это означает, что если ваши слайды расположены в два ряда, то сначала будут показаны те, что находятся в верхнем ряду, слева направо, а затем начнет воспроизводиться второй ряд, опять же слева направо — как при чтении книги.
Совет: Включите свойство Clip content в правой боковой панели, чтобы графические элементы не выходили за края фреймов.
2. Дизайн
Переходим к самой веселой части — по крайней мере, для меня 🙂 Я всегда начинаю с выбора цветовой палитры. Для вдохновения я использую сайт coolors.co.
Затем я размещаю на слайдах фрагменты текста и, возможно, фоновый паттерн или фигуры, чтобы получить полное представление о том, как будет выглядеть моя финальная презентация.
3. Добавляем иконки и иллюстрации
Красивые иконки и иллюстрации всегда делают слайды более интересными, а ключевые тезисы более запоминающимися. Чтобы быстро найти и добавить иллюстрации в вашу презентацию, вы можете использовать Iconfinder. Этот сервис позволяет быстро находить, копировать и вставлять графические элементы в файл Figma. Лучше всего выбирать иллюстрации в формате SVG. Вам даже не придется искать и устанавливать дополнительные плагины!
Совет: скачайте бесплатный пак иллюстраций, который мы использовали для наших слайдов.
4. Настройте графические элементы
Изменение размера
Используйте инструмент Scale, когда вы увеличиваете или уменьшаете графику. Вы можете включить его, нажав клавишу K или выбрав соответствующую опцию в меню (под иконкой курсора). Так вы сохраните все свойства графических элементов.
Изменение цвета
Если вы хотите, чтобы иллюстрации или иконки соответствовали цветовой палитре вашего бренда, самый быстрый способ добиться этого — нажать на иллюстрацию, найти раздел Selection colors на панели справа, выбрать цвет, который вы хотели бы изменить, и подобрать новый, соответствующий вашей палитре.
Так вы перекрасите все элементы одного цвета внутри иллюстрации.
Добавление анимации
Вы можете добавлять в презентацию различные эффекты анимации. Для этого необходимо создать копию нужного слайда и изменить параметры элементов (положение, непрозрачность), а затем перейти в панель Prototype и настроить переход (следует выбрать Smart Animate).
5. Презентуйте профессионально
Чтобы включить режим презентации, необходимо нажать на кнопку воспроизведения в правом верхнем углу. Вы можете перемещаться между слайдами с помощью стрелок.
Если вы хотите поделиться презентацией, сделанной в Figma, вы можете сгенерировать ссылку с помощью синей кнопки Share prototype (в режиме презентации).
Источник: www.uprock.ru
Фигма обучение
Инфо нагрузка
Автор Admin На чтение 4 мин Просмотров 255 Опубликовано 20 июля, 2022
Фигма – это популярный инструмент для дизайна интерфейсов, который предоставляет пользователю возможность создавать и прототипировать дизайн проектов․
Обучение в Фигме является важным шагом для каждого дизайнера, желающего освоить этот инструмент и стать более профессиональным в своей работе․ Ниже рассмотрим несколько методов и ресурсов, которые помогут вам начать изучение Фигмы․
1․ Официальный сайт Фигмы
На официальном сайте Фигмы вы найдете множество полезной информации и руководств по использованию инструмента․ Начинайте с раздела «Документация», где есть подробные инструкции и видеоуроки․
2․ Курсы и тренировки
Существует множество онлайн-курсов и тренировок для изучения Фигмы․ Выберите тот, который наиболее подходит вам по уровню сложности и глубине материала․ Некоторые ресурсы предлагают платные курсы, в то время как другие предоставляют бесплатные уроки․
3․ Видеоуроки на YouTube
На YouTube можно найти множество видеоуроков по Фигме от опытных дизайнеров․ Просмотр видеоуроков может быть хорошим способом изучения Фигмы, так как вы можете наблюдать за работой профессионалов и повторять их действия на своем компьютере․
4․ Учебные ресурсы и блоги
Помимо курсов и видеоуроков, существует множество учебных ресурсов и блогов, где вы можете найти полезные статьи, советы и инструкции по Фигме; Некоторые из них предоставляют упражнения и практические задания, чтобы вы могли попрактиковаться и закрепить полученные знания․
ЧИТАТЬ ЕЩЁ: Java append
5․ Общайтесь с сообществом
Присоединяйтесь к дизайнерским сообществам, где вы сможете общаться с другими дизайнерами, делиться опытом и задавать вопросы․ Онлайн-форумы, чаты и социальные сети – это отличные площадки, чтобы получить помощь и поддержку от опытных коллег․
Не забывайте, что ключевым моментом при изучении Фигмы является практика․ Чем больше вы упражняетесь и применяете свои знания на практике, тем более уверенным и опытным дизайнером вы станете․
Как пользоваться Figma бесплатно?
Для того, чтобы скачать программу Figma (Фигма) и пользоваться ею бесплатно, необходимо:
- зайти на сайт figma.com;
- в шапке сайта нажать на кнопку Sign Up;
- ввести свой es-mail, пароль;
- указать свое имя и фамилию;
- а также указать ответ на вопрос, для чего вы планируете использовать программу Figma;
Сколько стоит программа Figma?
Цены на Figma
Доступны бесплатный и платные тарифы. Стоимость подписки начинается от 12 долларов за пользователя в месяц.
Как научиться рисовать в Фигме?
Как работает режим векторного редактора в Figma
- На панели инструментов нажмите на иконку и кликните в любую часть макета.
- Кликните ещё раз в любую другую часть макета, и у вас появится линия.
- Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой.
Как получить Фигму бесплатно?
Переходим на сайт figma.com/education. Figma предлагает 2 года бесплатного использования для образовательных учреждений и нам это на руку. Жмём Apply now («Применить сейчас»). Теперь нам нужно оформить заявку.
Как работать в Figma без интернета?
Скажу сразу, что figma без интернета не работает, так как программе при запуске нужно синхронизация с облаком. НО! Можно обойти это требование: для этого запустите программу с включеным интернетом, дайте программе все загрузить, а затем отключите интернет. Готово!
ЧИТАТЬ ЕЩЁ: Yandex обучение
Что лучше Фигма или фотошоп?
В чем разница между Figma и Photoshop
Figma – онлайн-редактор для создания прототипов и интерфейсов. Подходит для работы с векторной графикой. Photoshop – редактор для работы с растровой графикой (в первую очередь – для ретуши фотографий).
Для чего можно использовать Фигму?
Figma — один из самых популярных и удобных кроссплатформенных графических редакторов для совместной работы. В ней можно создавать: макеты сайтов, приложений и кликабельные прототипы с анимацией отдельные элементы интерфейса: иконки, кнопки, формы и многое другое
Можно ли в Фигме рисовать иллюстрации?
В Фигме присутствует ряд инструментов, позволяющий создавать красивые дизайны. Если вы умеете использовать встроенные возможности системы, то сможете создать прототипы веб-сайтов и приложений, нарисовать иллюстрацию и векторную графику.
Figma с нуля за 1 час! (уроки веб дизайна для начинающих)
Источник: highloadblog.ru