Figma сколько нужно оперативной памяти
Обновлено: 04.07.2024
В 2016 году наша компания полностью перевела процесс прототипирования и веб-дизайна на молодой и развивающийся графический онлайн-редактор Figma (до этого мы проектировали в Moqups, а рисовали в Photoshop). Мы попросили Егора, нашего дизайнера, рассказать о продукте и поделиться своими впечатлениями. Собственно, Егор и нашёл Фигму, досконально изучил её и внедрил в отдел дизайна «Лидера поиска». Так что слово заслуженному фигмоведу!
Сразу скажу: у меня нет макбука, поэтому, работая UI/UX и веб-дизайнером, все макеты я по старинке создавал в Фотошопе и мог лишь облизываться на недоступный мне Скетч. Объяснять недостатки такого подхода нет смысла: как только проект выходит за рамки одной-двух страниц, работать становится ресурсозатратно. Куча файлов с макетами, в которых приходится следить за единообразием и боль внесения мало-мальских правок.
С Фигмой я работаю с самой первой версии (специально посмотрел: вышла 27 сентября 2016 года). Это стал просто-таки глоток свежего воздуха. Наконец, появился кроссплатформенный конкурент Скетча!
В сети полно статей, нахваливающих Фигму, поэтому мой обзор на те вещи, которые стали для меня ключевыми.
Главные преимущества
Простота освоения
Забавно, но когда работаешь с продуктами Adobe 20 лет, перестаешь замечать, насколько это монструозные и сложные программы с бесконечным количеством функций и возможностей. Осознаёшь это только тогда, когда кто-то просит тебя объяснить, как повторить какой-то трюк или решение. Порой это реально сложно.
Так вот, для того чтобы внедрить программу в работу и начать делать на ней проект, мне понадобилось несколько часов, а в течение пары дней я изучил абсолютно все возможности Figma. В дальнейшем достаточно просто следить за блогом и твиттером фигмовцев, чтобы быть в теме появляющихся фишек.
Так же просто программа осваивается для минимальных нужд и недизайнерами. Процесс обучения в Figma проходит быстро. Наши менеджеры глянули видеоуроки по Фигме, за день получили необходимые знания и уже могли кроить прототипы.
Интерфейс Фотошопа. Под капотом еще тонна панелек и скриптов, которые я скрыл
А это — интерфейс Фигмы
Производительность
Фигма действительно быстра. Работа в ней происходит на куче холстов, расположенных рядом. И если на моём неслабом, в общем-то, ноутбуке (I7, 32 Гб ОЗУ, SSD) Фотошоп уже на 5-7 холстах с хорошим количеством графики начинает ощутимо притормаживать (у Фотошопа в принципе проблема с артбордами), то Фигме и 20 холстов нипочём, продолжает летать.
На этом документе Фотошоп прилично притормаживает
А Фигма легко справляется с такими количеством холстов
Это не значит, что у неё нет пределов. Фотошоп требователен прежде всего к процессору и объему оперативной памяти, а основные системные требования Figma — к видеокарте, поэтому на слабых ноутбуках с интегрированной видеокартой комфортная работа может стать проблемой: при очень большом количестве холстов (3-5 страниц с 20 холстами каждый) документ грузится долго или вообще «вешает» маломощный компьютер.
Автоматическое сохранение и контроль версий
Онлайновость Фигмы отменяет необходимость постоянного сохранения макета и риск потерять данные (Вы же тоже нажимаете Ctrl-S после каждого действия в Фотошопе? Если нет, значит вы просто еще ни разу не теряли работу за последние два часа из-за внезапного вылета программы.) А прекрасный контроль версий за последний месяц (Фигма делает автокопии, но можно сделать и вручную) избавляет от необходимости плодить кучу подверсий проекта. Выручало не один раз, проверено лично.
Список версий проекта
Компоненты и фреймы
Да, это её основные фишки, и они действительно круты. Фреймы — это, по сути, холсты в холстах со своими отступами, направляющими, правилами выравнивания и масштабирования элементов внутри них.
Компоненты — это те же фреймы, только превращенные в шаблонизированные блоки по типу смарт-объектов в Photoshop или символов в Illustrator / Animate. Это потрясающе. Кнопки, наборы иконок, шапки, подвалы сайтов, формы обратной связи — всё можно превратить в компоненты и затем, как из конструктора, формировать однотипные страницы.
Дочерние копии еще и самодостаточны: можно поменять параметры (например, цвет отдельно взятой кнопки), а остальные копии и родительский объект останутся незатронутыми. С компонентами скорость работы и оперативных правок на прототипах выросла в разы.
В PRO-версии Фигмы (Да, она бесплатная, чёрт побери! Это ж просто праздник какой-то!) можно создавать полноценную динамическую библиотеку компонентов, блоков, стилей для использования в различных проектах. Поменял главный компонент — и обновление произошло сразу в нескольких проектах, а разработчикам об этом пришла оповещалка. Для продуктового дизайна эта возможность позволяет постоянно актуализировать дизайн-систему. Мне это не столь критично, я обычно работаю над разными несвязанными между собой проектами, но сама парадигма библиотек отличная.
Для дизайнеров в Интернете представлено много программ, но именно работа в Figma особенно популярна. Это бесплатный сервис, который прост в установке, а в его интерфейсе разберется даже новичок. Подойдет не только для веб-разработчиков и дизайнеров, но и для маркетологов, чтобы создавать инфографику.
Сервис удобен тем, что над одним проектом может работать целая команда, а у ее руководителя есть возможность оставлять комментарии по тем или иным элементам. Таких общих работ хранить в Figma можно сколько угодно, но лишь только месяц. Если вас это не устраивает, можно подключить другой тариф. Цены и принцип работы в сервисе подробно описаны ниже в статье.
Возможности сервиса Figma
Онлайн-сервис Figma отлично подходит для тех, кто занимается интернет-маркетингом, дизайном интерфейсов и веб-разработкой ресурсов. Программа представляет собой графический редактор, в котором можно создавать макет приложения или сайта, детали интерфейса (кнопки, иконки и пр.), векторные иллюстрации. Прелесть сервиса и в том, что здесь можно работать в команде, обсуждая изменения и внося поправки. Программа доступна в браузере и в приложении, которое устанавливается на ПК.
Возможности сервиса Figma
Сервис пользуется успехом не просто так. От многих графических редакторов Figma отличается тем, что:
- Имеет бесплатные функции. Сервисом можно пользоваться, но ряд возможностей будет ограничен: например, количество макетов, время, в течение которого будут храниться проекты и прочее.
- Функционал встроенных компонентов. Например, вы сделали несколько макетов в одном стиле, но в последний момент решили изменить какую-то деталь, которая повторяется во всех них. В других редакторах эту деталь нужно менять вручную в каждом макете. В Figma работа будет упрощенной: если меняется что-то в стиле одного элемента, то меняются все элементы, созданные в этом стиле.
- Возможность интеграции с другими программами. Можно переносить макеты, например, из Sketch или Zeplin, без искажения графиков, изображений и шрифтов. Также можно подключиться к корпоративному мессенджеру Slack, пространству Confluence и т. д.
- Возможность работы в браузере или в приложении. Для работы в Figma можно использовать веб-формат или установленное приложение, которое можно скачать с официального сайта. Просто регистрируете профиль и начинаете работать.
- Возможность командной работы. Это одновременно и преимущество сервиса: совместная работа в едином артборде.
Ваш Путь в IT начинается здесь
Подробнее Если есть потребность в более расширенном функционале, то можно оформить платную подписку.У Figma есть и свои недостатки, хотя они не играют большой роли при правильном выстраивании рабочего процесса. Например, интерфейс сервиса не русифицирован. Также для работы с программой необходимо подключение к Интернету.
Системные требования Figma
Для работы в приложении нужно будет обратить внимание на параметры ОС. Но большинство ПК вполне совместимы с данной программой.
ОС должна отвечать минимальным требованиям:
- Windows младше 8.1;
- MacOS младше 10.10 (Yosemite);
- Linux ― версия не имеет значения.
Если же вы планируете работать в программе через браузер, то отслеживайте обновления приложения.
Системные требования Figma
Для исправной работы браузер должен иметь минимальные версии:
- версии Google Chrome старше 58;
- версии Mozilla FireFox старше 57;
- версии Safari старше 11.
Первые шаги работы в Figma
Итак, с чего начать работу в Figma?
Шаг 1. Регистрируемся:
Как увеличить свой доход минимум на 50% выбрав правильную профессию Запутались в разнообразии профессий и не знаете, куда двигаться? Хотите больше зарабатывать или работать удалённо? Уже повзрослели, но так и не поняли, кем хотите стать? Мечтаете наконец найти любимую работу и уйти с нелюбимой?
Мы в GeekBrains каждый день обучаем людей новым профессиям и точно знаем, с какими трудностями они сталкиваются. Вместе с экспертами по построению карьеры поможем определиться с новой профессией, узнать, с чего начать, и преодолеть страх изменений.
Карьерная мастерская это:
- Список из 30 востребованных современных профессий.
- Долгосрочный план по развитию в той профессии, которая вам подходит.
- Список каналов для поиска работы.
- 3 теста на определение своих способностей и склонностей.
- Практику в разных профессиях на реальных задачах.
Уже 50 000 человек прошли мастерскую и сделали шаг к новой профессии!
Запишитесь на бесплатный курс и станьте ближе к новой карьере:
Зарегистрироваться и получить подарки
Далее скачиваем локальную версию приложения.
Шаг 2. Загружаем приложение:
Теперь нужно авторизироваться в приложении, чтобы начать работу.
В верхнем углу правой части экрана находится значок +, на который нужно нажать, чтобы создать новый макет. Далее следует найти соответствующий формат будущего проекта и нажать на кнопку «Create file». При выборе пункта «Blank canvas» будет открыто стартовое рабочее поле.
Если у вас есть проекты, созданные в Sketch, то можете смело импортировать их в Figma – все элементы останутся в первоначальном виде. Причем импорт можно сделать путем простого перетаскивания файла из одного приложения в другое. Также доступен перенос отдельных элементов векторной графики формата SVG.
Дальнейшая работа в Figma
Теперь рассмотрим основы работы в Figma, а именно настройку стилей, фреймов, слоев и т. д.
Чтобы создать макет, нужно выделить определенный слой. Далее в разделе «Layout grid», находящемся по правую сторону в поле «Design», выбрать необходимые размерные параметры, уровень прозрачности и цветовое решение. Можно изменить формат сетки, оставив только столбцы или строки. Можно работать сразу с несколькими макетами, переключаясь между ними с помощью сочетания клавиш Ctrl + G.
Чтобы наглядно увидеть, как будет отображаться разработанный интерфейс на экранах с различным разрешением, нужно обратиться к разделу «Prototype». Далее в подпункте «Device» выбрать требуемый тип устройства и ознакомиться с результатом.
При желании можно поменять цвет деталей и изменить ориентацию положения (например, с горизонтального на вертикальное). Когда все настройки будут закончены, нужно активировать кнопку «Present» (находится слева от «Share»), чтобы увидеть качество отображения макета в указанном устройстве.
Также Figma позволяет накладывать на изображения эффекты и корректировать некоторые параметры. Все это можно сделать с помощью инструментов, расположенных на панели с правой стороны от выделенного изображения.
Вы можете сделать свою собственную библиотеку элементов из созданных ранее объектов, добавив их в раздел «Компоненты». То есть не нужно каждый раз создавать элемент заново. Для перемещения объекта в библиотеку его нужно выделить и одновременно зажать клавиши Ctrl + Alt + K – это преобразует объект в компонент.
Если вы начинаете редактировать детали основного компонента, то автоматически будут корректироваться все существующие копии. Чтобы найти ранее добавленный в библиотеку компонент, нужно обратиться к вкладке «Assets» в левой панели.
В Figma можно изменять стилистику сразу нескольких объектов и создавать собственные цветовые вариации. Чтобы реализовать эту функцию, нужно выделить созданный объект и нажать на кнопку в форме квадрата.
Робота аналогично работе с Photoshop. Есть возможность конструировать отдельные группы, помещать отдельные детали на передний или задний план. Нужные функции находятся в разделе «Layers», распложенного на панели в левой части интерфейса программы.
Рассмотрим кратко инструкцию по работе с Figma в составе команды.
При регистрации в программе происходит автоматическое формирование команды. При желании ее можно переименовать, щелкнув RButton мыши по нужному объекту и активировав функцию «Rename». Аналогичным путем можно удалить существующую команду. Если нужно создать новую группу для совместной работы, то необходимо кликнуть на «Create new team» в нижней части панели слева.
Работа с текстом в Figma имеет много возможностей. В сервисе по умолчанию установлены шрифты Google. Если вы пользуетесь десктопной версией программы, то можете скачать и установить плагин Font Helper – это даст возможность пользоваться локальными шрифтами с вашего ПК.
Для создания текстового объекта нажмите в панели слева инструмент «Text» или активируйте кнопку с буквой «Т» в левой верхней части интерфейса. Все те параметры, которые можно менять и настраивать, будут отображаться в окне справа (цвет, тип, размер, стиль шрифта и т. д.).
Программа предусматривает установку плагинов, необходимых для повышения эффективности работы. Информацию о списке всех существующих плагинов можно найти на главной странице «Community» → «Explore», а установленные можно увидеть в разделе «Plugins» в настройках профиля.
Для просмотра параметров фрейма нажмите кнопку «F» – в правой части экрана отобразится панель с вариациями артбордов. В рамках одного проекта возможно выложить отдельно друг от друга несколько разноформатных фреймов.
Параметры фрейма
При необходимости можно задать точные размеры артборда: нажимаете «F», далее в рабочем поле создаете фрейм, зажав левую кнопку мыши. Чтобы задать размеры, отпускаете левую кнопку.
3 тарифа онлайн-сервиса Figma
Если вам не хватает тех возможностей сервиса, которые описаны выше, то можете подключить платный тариф. Но с этим вопросом советуем разобраться еще на первом этапе работы в Figma. Рассмотрим, какие варианты предлагает сервис.
- Тариф StarterБесплатный тариф с базовым функционалом, который рекомендуется использовать для индивидуальной работы и командного теста сервиса.Тариф включает:
- количество файлов в черновиках не лимитировано;
- нет ограничений по числу зрителей и комментаторов;
- предоставлено три командных файлах с неограниченным числом редакторов;
- можно создать один командный проект;
- срок сохранения истории версий – 30 дней;
- нелимитированное облачное хранилище.
Графический редактор — второй по важности инструмент верстальщика после редактора кода. Дизайнеры создают макеты сайтов и приложений и передают готовые файлы в вёрстку. Верстальщик получает из них всю необходимую информацию: тексты, иллюстрации, цвета, положения элементов на странице и расстояния между ними.
Есть много графических редакторов, и как из них выбрать непонятно. Поэтому возьмём две популярные программы — Photoshop и Figma — и сравним их.
Photoshop — мощный графический редактор, основное предназначение которого — работа с растровой графикой. Он вышел в 1990 году и за это время собрал большое сообщество пользователей. В исследовании инструментов дизайна от 2020 года он занимает первые места самых популярных инструментов. Причем 66% дизайнеров используют Figma для дизайна пользовательского интерфейса по сравнению с 37% в 2019 году. Такой огромный рост, вероятно, связан с увеличением удаленной работы в 2020 году.
Figma — онлайн-редактор для создания интерфейсов и прототипов. Он появился в 2016 году, но успел обогнать Photoshop по количеству пользователей почти в 4 раза. В том же исследовании инструментов дизайна Figma занимает второе место по количеству пользователей.
Чтобы выбрать редактор, сравним удобство интерфейсов и совместной работы, варианты использования ПО и его установки, минимальные требования к компьютеру.
Хоть Фигма, хоть Фотошоп
Всё равно нужно уметь верстать, чтобы не ругаться с программистами.
Интерфейс
При выборе графического редактора полезно оценить интерфейс. Сложный интерфейс потребует больше времени, чтобы в нём разобраться. Пользователи таких программ путаются из-за большого количества информации и инструментов, поэтому чаще ошибаются.
Figma
В Figma есть две основные рабочие области — графический редактор и менеджер файлов.
Менеджер файлов нужен для настройки аккаунта и управления файлами и проектами. Здесь можно создать команду, отредактировать настройки аккаунта, просмотреть текущие и недавние проекты, подключить новый плагин.
Вторая рабочая область в Figma — графический редактор. Здесь дизайнеры делают макеты, а верстальщики находят иллюстрации, тексты, параметры объектов для вёрстки.
Photoshop
В Photoshop сложный интерфейс с множеством инструментов, информационных панелей и вкладок. Это связано с тем, что им пользуются разные специалисты: веб-дизайнеры, фотографы, верстальщики, иллюстраторы. Всем им нужны разные инструменты.
Такое обилие мешает новичкам. Среди панелей с информацией трудно найти параметры текста или слоя или выбрать нужный инструмент.
Можно немного облегчить жизнь, если оптимизировать рабочее пространство. Для этого достаточно скрыть инструменты и панели, которые не нужны для вёрстки. Тогда лишняя информация не будет отвлекать, а найти нужный инструмент станет проще.
Ниже — пример того, как может выглядеть Photoshop верстальщика.
Окно Photoshop, настроенное для работы верстальщика Окно Photoshop, настроенное для работы верстальщикаСпособ установки
Чтобы выбрать графический редактор, полезно оценить, насколько легко начать им пользоваться. Чем проще установка, тем быстрее можно приступить к работе.
Есть два варианта — десктопное приложение и браузерная версия. Приложение нужно установить на компьютер, а браузерный редактор работает сразу без всяких установок.
Figma
Figma — это онлайн-редактор, который работает в браузере. Это значит, что ничего устанавливать на компьютер не нужно. Чтобы начать работать, достаточно открыть веб-приложение в браузере и авторизоваться.
У этой реализации есть свои недостатки. Figma не работает без интернета и может тормозить, если видеокарта недостаточно мощная. Для доступа к локальным шрифтам на компьютере придётся установить небольшую программу Figma Font Helper .
Разработчики Figma побеспокоились об удобстве пользователей и создали десктопное приложение для Windows и Mac OS. В нём есть те же функции, что и в браузерной версии. Недостаток приложения в том, что оно не работает без интернета и через прокси-сервер. Тем, у кого прокси-соединение, подойдёт только браузерная версия.
Photoshop
Photoshop устанавливается на компьютер. Это удобно тем, что приложение работает без интернета. Интернет понадобится, чтобы активировать программу, подтвердить подписку или получить доступ к облачному хранилищу.
Стоимость
Не все графические редакторы бесплатные. Об этом нужно помнить, чтобы рассчитать силы и понять, есть ли деньги на покупку или регулярное продление подписки.
Figma
Figma — условно бесплатный графический редактор. У него есть 3 варианта использования: начальный, для профессионалов и для организаций.
Начальный тариф бесплатный с доступом к безлимитному облачному хранилищу, количество пользователей, которые могу просматривать проекты, не ограничено. В нём есть лимиты:
- не более 2 пользователей могут редактировать макет одновременно;
- не более 3 проектов в работе в одной команде;
- история действий с файлами и проектами хранится 30 дней.
Тарифы для профессионалов и организаций платные. Профессионалы платят по 12 долларов за пользователя в месяц при оплате на год вперёд или по 15 долларов помесячно. Для студентов и преподавателей этот тарифный план бесплатный. Правда, придётся подтвердить факт учёбы в университете.
Организации платят по 45 долларов за пользователя в месяц. Причём заплатить придётся сразу за весь год, помесячной оплаты нет. Тариф подходит командам от 9 пользователей.
Привет, я уже замучился подбирать ноутбук и надеюсь на ответы и советы. Заранее спасибо!
Погуглив, я определился со следующими параметрами:
— Процессор: i5 8265U либо i7 8565U
— Видеокарта: Mx150 либо Mx250
По остальным характеристикам есть вопросы:
1. Оперативная память(8гб):
1.1. Стоит ли заморачиваться и брать не LPDDR3, а DDR4? Я так понял LPDDR3 занижает в определенных моментах частоты. Сильно ли от этого может проседать быстродействие?
1.2. В отзывах к разным ноутбукам читал, что где-то работает в 2-канальном режиме, а где то только в 1-канальном. Верно я понял, что это означает условно 1 или 2 слота для ОЗУ (в случае, если она вообще не распаяна на материнке).
1.3. Верно ли я понял, что лучше всего брать вариант с поддержкой 2-канальной работы памяти и 2-мя слотами? Только так я получается смогу добавить еще 8 гб
3. Операционная система — сейчас много версию ноутов с операционками LINUX или с какой то FREE DOS. Я же смогу на такие ноуты спокойно накатить свою 10-ую LSTB-винду? Какова вероятность танцев с бубном? Конечно хочется взять без винды, т.к. цены в таком случае на 6-10к ниже (можно например благодаря этому взять не i5, а i7). Кстати, когда последний раз брал ноут (2010) - в магазинах всё было на винде
4. Бренд — может сегодня есть какие-то очевидно рулящие фирмы? Я помню раньше все любили ASUS и нелюбили Acer. А сейчас вот очень много Lenovo и Dell, хотя и ASUS и Acer и HP тоже есть. Мне почему то кажется что DELL и ASUS — классные ребята и качество у них лучше. А Acer и Lenovo доверия не вызывают (в отзывах видел много танцев с бубнами, мерцающие экраны, отваливающийся Wi-Fi). Но может здесь есть более прошаренные люди
5. Может я чего-то не учёл и есть еще на счет чего подумать — буду рад информации.
У меня уже есть несколько подобранных вариантов, хочется получить по ним комментарии и предложения по альтернативе:
В обоих вариантах мне нравится здесь всё, кроме LPDDR3 и факта, что нет никаких обзоров. Видимо новая модель. Ну и еще здесь Linux, но выше об этом есть вопрос.
Существует множество графических редакторов для дизайнеров: Photoshop, Adobe XD, Sketch, Canva и т. д. Среди них выделяется Figma (Фигма) ― один из самых популярных и удобных продуктов для UX/UI-дизайна. В ней можно проектировать прототипы и работать командой в онлайн-формате. Если вы дизайнер, рекомендуем хотя бы на базовом уровне освоить Фигму.
В этом гайде мы расскажем вам, что такое Figma, какие у неё возможности и кому она может пригодиться. После того, как прочитаете нашу статью, вы разберётесь, как работать с Figma.
1. Для вставки стилизованного по дизайну оглавления вставляем в режиме исходного кода
Что такое Figma
Figma ― графический кроссплатформенный онлайн-редактор. Он предназначен в основном для веб-разработчиков и дизайнеров интерфейсов. Через два блока мы расскажем, кто ещё может пользоваться редактором.
Figma можно скачать на компьютер или работать в браузере. Главное преимущество этого редактора ― возможность совместной работы над проектом. Все данные хранятся в облаке, поэтому можно работать над макетами без скачивания.
В Figma можно создавать:
- прототипы сайтов и приложений,
- векторные иллюстрации,
- составляющие интерфейса ― кнопки, иконки и др.
Существует ли Figma на русском языке
Её не существует. Не пытайтесь найти версию на русском языке. Скорее всего, файлы на сайтах с такими заголовками заражены. Вы скачаете вредоносную программу и поймаете вирус на компьютер.
Не переживайте, если не знаете английского. У сервиса дружественный интерфейс ― вы поймёте, куда нажимать. Плюс при регистрации вас ждет небольшое обучение: 6 всплывающих подсказок, которые сориентируют вас.
Чем Figma отличается от Photoshop
До появления Figma самым популярным инструментом для работы у дизайнеров был Photoshop. Но у него было достаточно минусов, чтобы при появлении нового сервиса разработчики и дизайнеры интерфейсов перешли в Figma.
Что есть в Figma и чего нет в Photoshop:
- онлайн-доступ,
- есть бесплатный тариф,
- возможность командной работы над проектом,
- можно экспортировать отдельные элементы,
- единая система шрифтов Google Fonts,
- можно демонстрировать проект заказчику в программе,
- возможность импортировать файлы в формате Sketch,
- кроссплатформенность ― можно работать с любого устройства и из любой операционной системы,
- можно дать онлайн-доступ клиенту или руководителю для наблюдения,
- можно оставлять комментарии,
- есть техподдержка.
Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.
В каких профессиях может потребоваться работа с Figma
Выше мы уже сказали, что в программе Фигма в основном работают дизайнеры интерфейсов и веб-разработчики. Но есть ещё несколько профессий, которым тоже будет удобно вести проекты в этом сервисе.
Кому нужна Figma:
- веб-дизайнерам,
- проектировщикам,
- дизайнерам интерфейсов,
- UX-исследователям,
- аналитикам,
- маркетологам,
- руководителям проектов.
Преимущества и недостатки
Фигма — это относительно новый редактор, он активно обновляется и совершенствуется.
Преимущества:
- просто освоить ― интуитивно понятно, как начать работу,
- работает быстро ― облачный сервис не задействует мощность компьютера, поэтому работа с несколькими холстами не затормаживает компьютер,
- автоматическое сохранение версий ― шанс потерять несохранённую работу сводится к нулю,
- контроль версий ― сервис делает автокопии,
- изменения в исходной копии вносятся во все остальные автоматически,
- выравнивание и привязка объектов в фрейме,
- просто работать со стилями текста,
- командная работа и комментирование,
- удобно демонстрировать макет заказчику ― есть функция встроенной презентации.
Недостатки:
- нужен интернет,
- нельзя кастомизировать горячие клавиши,
- интерфейс только на английском языке,
- ограниченность времени хранения и числа макетов в базовой версии.
Инструменты и возможности Figma
Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.
Многопользовательский режим редактирования
До появления Figma не было доступного всем инструмента, который обеспечивал бы общий доступ к проекту. Для MacOS создали Sketch, а для других операционных систем решения не существовало.
Начать работу в командном режиме просто.
Облачные технологии дают возможность совместного доступа к проекту. Если вам нужны макеты на компьютере, вы можете их скачать в расширении fig.
Облачный сервер хранения файлов
Figma — это онлайн-редактор. У него есть своё облачное хранилище, где хранятся все файлы, и пользователь работает над ними. Фигма практически не задействует мощности вашего компьютера ― вы можете работать с огромным количеством холстов без потери скорости.
Компоненты
Удобный раздел для тех, кто работает со множеством мелких повторяющихся элементов. С его помощью можно превратить группу объектов в компонент и внести изменения кликом мышки. Например, эту функцию можно использовать, если надо изменить цвет кнопок во всём макете.
Чтобы объекты и группы объектов на разных артбордах стали компонентом, кликните на объект, нажмите на значок сверху и создайте копии. Теперь все изменения будут отражаться одновременно на всех фреймах.
Компоненты выделяются фиолетовым цветом, а родительский помечается ромбиком сверху:
Фреймы
Фреймы (артборд, холст) — это рабочие пространства. Чтобы вызвать панель фреймов, нажмите F. Есть библиотека предустановленных артбордов.
Можно сочетать рядом несколько фреймов, как на примере ниже:
Вы можете создать свой авторский фрейм: поставьте курсор на свободное место, нажмите и растяните прямоугольник до нужного размера.
Сетки
Сетка во фрейме — это направляющие, которые помогают дизайнеру в Figma ровно размещать объекты и упорядочивать их. Частота линий, цвет и прозрачность могут быть разными ― они настраиваются в окне при нажатии.
Чтобы настроить сетку, нажмите «+» рядом с надписью Layout Grid:
По умолчанию установится значение расстояния между линиями 10 px. Задайте необходимую ширину сетки:
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid.
Если вы работаете с мелкими деталями, вам может понадобиться дополнительная разметка. Чтобы добавить нужные линии, щёлкните ещё раз на «+».
Отличия десктопной версии Figma от браузерной
Несмотря на всю схожесть версий, у скачиваемой Фигмы есть некоторые преимущества перед браузерной версией.
Отличия десктопной версии:
- можно работать офлайн ― изменения синхронизируются, когда появится интернет,
- работают горячие клавиши,
- есть вкладки внутри программы,
- загружает макеты и его элементы быстрее,
- можно настроить папку загрузки файлов,
- можно разрабатывать плагины,
- предустановленное расширение для шрифтов.
Если вы хотите посмотреть макет, провести презентацию, показать макет в режиме прототипирования, то браузерной версии будет достаточно. Для работы же лучше скачать десктопную версию.
Работа с изображениями
Изображения в Фигме — это не отдельные объекты, а заливка фрейма.
Как добавить изображение:
- перетащить с рабочего стола на фрейм,
- добавить через File,
- использовать инструмент Place Image.
Изображение загружается с автоматическим параметром заполнения.
Параметры заливки изображений:
- Fill ― изображение заполняет фрейм без учёта пропорций,
- Fit ― изображение должно отразиться полностью, но при несовпадении пропорций и фрейма появляется пустое место или картинка обрезается,
- Crop ― изображение можно приблизить только нужным кусочком, а лишние части обрезать,
- Tile ― изображением можно «замостить» фрейм.
Работа со стилями и цветами
В Figma удобно работать с изображениями. Вы можете отрегулировать цвета, яркость отдельных частей рисунка и общую яркость, контраст, насыщенность.
Стили градиентов:
Чтобы добавить градиент на рисунок, кликните на «+» в разделе Fill и выберите подходящий:
Регулируйте настройки градиента: подбирайте нужный цвет, интенсивность, количество точек градиента и т. д.
Вы можете создать свой фирменный стиль или воспользоваться уже готовыми вариантами из библиотеки. Нажмите на кнопку, которая показана на скрине:
В этом списке вы можете выбрать из уже созданных стилей или собрать свой вариант. Нажмите «+» и назовите свой стиль. Так он сохранится у вас в библиотеке:
Слои и группы
Слои — это содержимое фрейма: картинки, текст, видео. Принцип работы со слоями в Фигме очень похож на Photoshop.
Слои располагаются слева от основной рабочей области. Вы можете создавать группы, менять порядок элементов.
Чтобы объединить элементы внутри фрейма, нажмите клавиши Ctrl + Alt + G на Windows и Cmd + Opt + G на MacOS.
Чтобы разгруппировать объекты, нажмите Ctrl + Shift + G на Windows и Cmd + Shift + G на MacOS.
Типографика
Figma работает с Google шрифтами ― они унифицированы и не слетают при передаче макета. Но если вы хотите использовать свои варианты, установите плагин Font Helper для десктопной версии и используйте шрифты с вашего компьютера.
Нажмите на букву Т в верхней панели сервиса, чтобы создать текст. Все настройки вы найдёте справа от рабочей поверхности:
Установка плагинов
У Figma есть библиотека плагинов, которые можно установить бесплатно. Они помогают оптимизировать работу дизайнера.
В настройках профиля вы можете посмотреть, какие плагины у вас уже установлены.
Тарифы Figma
У Фигмы есть 3 тарифа, расскажем подробнее о каждом.
Starter
Это базовый бесплатный тариф. Создатели Фигмы рекомендуют его использовать для личных целей и теста сервиса командой.
В тариф входят:
- неограниченное количество файлов в черновиках,
- неограниченное количество зрителей и комментаторов,
- неограниченное количество редакторов в 3 командных файлах,
- 1 командный проект,
- 30-дневная история версий,
- неограниченное облачное хранилище.
Professional
На этом тарифе у пользователей появляется больше возможностей. Он стоит 12$ с человека, если оплатить год использования, и 15$ с человека, если платить помесячно. Этот тариф предоставляется бесплатно на 2 года студентам и преподавателям направления дизайн.
Чтобы получить бесплатную версию Фигмы, надо зайти на сайт, заполнить небольшую анкету и ждать инструкций по почте.
В тариф входят:
- неограниченное количество проектов,
- неограниченная история версий,
- частные проекты только по приглашениям,
- совместно используемые командные библиотеки.
Organization
В тариф входят:
- неограниченное количество проектов,
- неограниченная история версий,
- частные проекты только по приглашениям,
- совместно используемые командные библиотеки,
- системы проектирования для всей организации,
- централизованные команды,
- частные плагины,
- администрирование плагина,
- общие шрифты,
- sso + повышенная безопасность,
- аналитика системы проектирования.
Системные требования Figma
Параметры запуска и установки десктопной версии Figma зависят от операционной системы. Скорее всего, ваш компьютер спокойно потянет Figma.
Минимальные требования к операционной системе:
- Windows не старше 8.1,
- MacOS не старше 10.10 (Yosemite),
- Linux ― любая версия.
Для тех, кто работает в Фигме из браузера, надо следить за обновлениями приложения.
Минимальные версии браузеров для корректной работы:
- Google Chrome 58+,
- Mozilla FireFox 57+,
- Safari 11+.
Чтобы Фигма стабильно работала, на вашем компьютере должна стоять видеокарта не старше 2012 года. На современные модели такие не ставят.
Как скачать программу Figma на компьютер
У Figma есть несколько вариантов работы ― не обязательно открывать её только в браузере. Если вы, например, путаетесь во множестве вкладок, то версия для компьютера облегчит вашу жизнь.
Зайдите на сайт программы Figma в раздел Downloads. Нажмите на нужную версию согласно операционной системе и следуйте инструкциям установщика.
Если вы часто работаете с телефона или планшета, можете скачать приложение Figma Mirror для мобильных устройств.
Как пользоваться Figma
Начать работать в Figma не сложно. Расскажем, что нужно сделать для старта.
Перед тем как вы сделаете свой первый проект, вам надо войти в свой аккаунт или создать его.
Создание нового файла
Чтобы создать новый файл, нажмите на кнопку в правом верхнем углу:
После этого откроется основная рабочая область. Выберите необходимые размеры фреймов, расположите их на столе и начинайте работать.
Разработка прототипов в Figma
Прототип — это макет сайта или приложения. В Figma можно наглядно представить, как люди будут взаимодействовать с продуктом. Дизайнер отрисовывает экраны, а затем добавляет связи между ними. Благодаря предустановленным размерам экранов устройств, можно сразу оценить прототип.
Скрин прототипа с ютуб-канала Веб-дизайн & Александр Решетников
В этой статье мы рассказали всё самое важное и полезное о Фигме. Этот сервис легко освоить новичку, потому что у него дружественный интерфейс. Это удобный онлайн-инструмент для совместной работы над проектом, который сделал проще жизнь разработчиков и дизайнеров. Если вам интересно развиваться в этом направлении, то без Figma не обойтись.
Читайте также: