Figma сколько нужно оперативной памяти
Для дизайнеров в Интернете представлено много программ, но именно работа в Figma особенно популярна. Это бесплатный сервис, который прост в установке, а в его интерфейсе разберется даже новичок. Подойдет не только для веб-разработчиков и дизайнеров, но и для маркетологов, чтобы создавать инфографику.
Сервис удобен тем, что над одним проектом может работать целая команда, а у ее руководителя есть возможность оставлять комментарии по тем или иным элементам. Таких общих работ хранить в Figma можно сколько угодно, но лишь только месяц. Если вас это не устраивает, можно подключить другой тариф. Цены и принцип работы в сервисе подробно описаны ниже в статье.
3 тарифа онлайн-сервиса Figma
Если вам не хватает тех возможностей сервиса, которые описаны выше, то можете подключить платный тариф. Но с этим вопросом советуем разобраться еще на первом этапе работы в Figma. Рассмотрим, какие варианты предлагает сервис.
Бесплатный тариф с базовым функционалом, который рекомендуется использовать для индивидуальной работы и командного теста сервиса.Тариф включает:
- количество файлов в черновиках не лимитировано;
- нет ограничений по числу зрителей и комментаторов;
- предоставлено три командных файлах с неограниченным числом редакторов;
- можно создать один командный проект;
- срок сохранения истории версий – 30 дней;
- нелимитированное облачное хранилище.
В этом тарифном плане добавлен более расширенный функционал. При оформлении годовой подписки стоимость составит 12$ с одного пользователя, при помесячной оплате – 15$ с одного пользователя. Для студентов и преподавателей учебных заведений дизайнерского направления этот тариф можно оформить бесплатно на два года. Для этого нужно заполнить небольшую анкетную форму на сайте и ждать ответного письма на e-mail.Тариф включает:
- нелимитированное число проектов;
- срок сохранения историй версий не ограничен;
- участие в частных проектах возможно только по приглашению;
- возможно коллективное использование командных библиотек.
- Тариф Organization
3 тарифа онлайн-сервиса Figma
- число проектов не ограничено;
- срок сохранения историй версий не лимитирован;
- участие в частных проектах только по приглашению;
- коллективное использование командных библиотек;
- системы и инструменты проектирования доступны для всей организации;
- централизованная командная работа;
- доступны частные плагины;
- возможность администрирования плагина;
- общие для всех шрифты;
- SSO-технология с повышенной безопасностью;
- возможность аналитики системы проектирования.
Стоит отдельно отметить, что сервис легок в освоении, поэтому любой новичок может начинать работу в Figma с нуля. Инструментарий программы позволяет реализовывать с командой совместные проекты. Многие разработчики и веб-дизайнеры уже отдали должное Figma. Если и вы планируете развиваться в этом направлении, то обязательно осваивайте программу.
В начале какого-нибудь фитнес-курса обычно объясняют, какой понадобится реквизит: специальная палка, мячи разных размеров, резинка, пенный ролл. На курсе по вёрстке сложнее. Понятно, что нужен компьютер, там нужны программы. Чего тут ещё рассказывать? Поэтому как филолог, который раньше никогда не писал код, я даже подумать не могла, что собственный ноутбук будет мешать мне учиться верстать.
Ноутбук мне подарили ещё в 10 классе за хорошую учёбу. Я закончила школу, два университета, а он всё это время был со мной. Многое вытерпел: бесконечные загрузки всяких файлов из интернета, установки программ и расширений, сутки работы над документами, многочасовые просмотры фильмов и сериалов. Конечно, иногда его чистили, проверяли на вирусы, удаляли лишнее, но время берёт своё. И вот потихоньку он начал притормаживать. То включается долго, то ничего не грузит. Но в сложных программах я не работала, поэтому в целом меня всё устраивало. Пока я не начала изучать вёрстку.
Мне дали ссылку на макет и инструкции. Но почти сразу что-то пошло не так.
Что можно делать в Figma: базовые фичи
Figma Templates
Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта. Для каждого предусмотрено описание и инструкция по применению.
Работа с Figma — плюс-минус
Я открыла макет в браузерной версии Figma и сделала копию — теперь можно что-то менять. А раз сразу получилось, то и десктопную версию решила не скачивать.
Макет в браузерной версии Figma
Проблема первая
Направляющие layout grids отображались первые несколько дней. Потом они просто исчезли прямо во время работы. Зашла в другую вкладку, вернулась — их нет. Хотя написано, что они остались включёнными. Я попробовала переключать их всякими способами: через меню сверху, слева, комбинацией клавиш — появлялись какие-то помехи.
Баги при отображении направляющих в макете
Пошла гуглить. Увидела, что у людей тоже есть такая проблема, но все советы сводились к тому, чтобы просто попробовать включить направляющие другим методом — сверху, слева, клавишами. Что, собственно, я уже миллион раз делала. Кто-то считал, что это баги новой версии Figma: у кого-то пропадали целые макеты. Ничего полезного, в общем, я не нашла. Кстати, спустя пару месяцев я вернулась к этому макету и снова попробовала включить направляющие, но ничего не изменилось.
Проблема вторая
После проблем с веб-версией Фигмы я решила открыть макет в десктопной версии, но при её установке произошёл какой-то сбой. Как выяснилось лёгким движением руки в гугле, программу нельзя установить на 32-битную систему.
Ошибка при установке Figma на ноутбук с 32-битной системой
Что ещё подойдёт вместо GitHub Desktop?
Этим вопросом я задалась уже позже. Мне стало интересно, какие ещё есть варианты.
Ну во-первых, пушить изменения на удалённый репозиторий можно с помощью Git.
На мой ноутбук программа установилась нормально. Я пробовала залить изменения через консоль — всё получилось.
Работа с Git
Во-вторых, есть разные аналоги GitHub Desktop: SmartGit, SourceTree и т.д. Но фишка в том, что большинство из них 32-битной Windows 7 не подходят. Я много чего пробовала установить, даже архивные версии, которые якобы работают и на x86. Может, есть какие-то ещё варианты (если вы знаете — поделитесь, пожалуйста), но ноутбук подружился только с TortoiseGit.
В TortoiseGit не надо разбираться в консольных командах, как в Git. Достаточно просто нажать правой кнопкой мыши на проект и выбрать в контекстном меню команду «Push».
Открывается окно, там проверяем, что изменения пойдут в нужный репозиторий и нажимаем «ок».
Работа с TortoiseGit
Компоненты
Как и во всех графических редакторах, заточенных под проектирование интерфейсов, Figma умеет работать с компонентами. Для бесплатных аккаунтов библиотека компонентов доступна в рамках одного файла. А чтобы дать доступ целой команде и подключить её ко всем файлам проекта, нужно немного раскошелиться.
Что за машина?
Бывалый старичок-ноутбук Acer Aspire E1 Z5WE1.
Процессор — Intel Pentium 2117U (1.8 ГГц)
Графика — Intel HD Graphics 2500
Жёсткий диск — 600 ГБ
32-битная Windows 7.
Стоимость
Для личного пользования вполне хватит бесплатных возможностей Figma. Можно спокойно делать проекты на фрилансе. Бесплатный аккаунт Figma называется Starter, и возможности у него такие:
- история изменений хранится 30 дней;
- можно завести и поддерживать не более трёх проектов;
- только два пользователя могут иметь права на редактирование.
Платный тариф называется Professional, в нём нет описанных выше ограничений. Вдобавок вы сможете делиться с пользователями библиотеками компонентов ваших проектов. При единовременной оплате годовой подписки каждый месяц вам обойдётся в 12 $. Если этот вариант вам неудобен, можете оплачивать сервис помесячно — по 15 $ за каждый месяц.
Третий тариф — Organization — предназначен для больших команд. Стоит он 45 $ в месяц, оплатить нужно сразу год.
Сетки
Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:
- добавить её для фрейма легко;
- настроить можно очень быстро и просто;
- количество сеток для фрейма не ограничено.
Что такое эта ваша Figma?
Figma — кросс-платформенный графический онлайн-редактор для совместной работы. Программа позволяет создавать wireframe, UI, прототипы, презентации и с лёгкостью передавать материалы в разработку. В онлайн-режиме можно наблюдать рабочий процесс, оставлять комментарии и обсуждать макет.
Начать работать с Figma очень просто, так как программа не требует от пользователя специальной подготовки.
Что можно делать в Figma?
В первую очередь, Figma — инструмент для проектирования пользовательских интерфейсов. В ней вы можете рисовать сайты, мобильные приложения, проектировать дизайн-системы и создавать много других digital-проектов. Инструмент активно развивается и область применения со временем становится шире.
Прототипирование
Прототип — это схема экранов приложения, которая имитирует работу будущего продукта. В Figma удобно создавать качественные интерактивные прототипы. Предусмотрена даже интерфейсная анимация, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально похожие на реальный продукт.
Чтобы создать прототип, вам необходимо:
- Подготовить карту экранов в нужной вам последовательности.
- В верхней части правого блока переключиться на вкладку Prototype.
- Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
- Справа добавить и настроить действие.
В настройках прототипа можно выбрать мобильное устройство, для которого проектируется интерфейс. Так вы в режиме просмотра прототипа увидите, как будет выглядеть интерфейс на устройстве.
Графических редакторов для проектирования интерфейсов стало очень много, о них уже написаны статьи и туториалы, отснято огромное количество обучающих видео. Важное место среди этих инструментов занимает графический редактор Figma. Чтобы вы не искали информацию о ней в разрозненных источниках, я подготовил эту статью. Она поможет разобраться, что такое Figma, что она умеет, кому она нужна и с чего начать новичку.
Передача макетов разработчикам
Чтобы передать макеты разработчику, вам необходимо открыть ему доступ к файлу с правами на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android. Для определения размеров элементов и расстояний между ними есть направляющие.
Первые шаги работы в Figma
Итак, с чего начать работу в Figma?
Шаг 1. Регистрируемся:
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2022
Подборка 50+ ресурсов об IT-сфере
ТОП сервисов и приложений, на которые следует перейти уже сегодня
3,7 MB
Далее скачиваем локальную версию приложения.
Шаг 2. Загружаем приложение:
Теперь нужно авторизироваться в приложении, чтобы начать работу.
В верхнем углу правой части экрана находится значок +, на который нужно нажать, чтобы создать новый макет. Далее следует найти соответствующий формат будущего проекта и нажать на кнопку «Create file». При выборе пункта «Blank canvas» будет открыто стартовое рабочее поле.
Если у вас есть проекты, созданные в Sketch, то можете смело импортировать их в Figma – все элементы останутся в первоначальном виде. Причем импорт можно сделать путем простого перетаскивания файла из одного приложения в другое. Также доступен перенос отдельных элементов векторной графики формата SVG.
Кросс-платформенность
Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.
С чего начать?
Если вам приглянулась Figma и вы решили перейти на неё, обязательно скачайте десктопное и мобильное приложения — они есть в разделе Downloads на сайте.
После регистрации вам будут доступны сам графический редактор и менеджер файлов. Интерфейс Figma очень простой и интуитивно понятный, поэтому разобраться в нём будет легко.
GitHub Desktop — полный провал
На курсе по вёрстке мне объяснили, что недостаточно просто смотреть в макет и писать код в редакторе. Чтобы не потерять проект, видеть, как он менялся, давать доступ к нему коллегам и совместно над ним работать удалённо, нужен Гитхаб.
Почитала и посмотрела, как работать в Гитхабе, всё поняла и с энтузиазмом пошла скачивать десктопную версию. И вот тут-то ноутбук её не принял. Пришлось перезагружаться, пробовать качать несколько раз, гуглить. И как оказалось, эта программа тоже не любит 32-битную систему. Такой беды я не ждала. В браузере GitHub прекрасно открывался, но его же ещё надо было как-то связать с компьютером. Покупать новый ноутбук в тот момент я не планировала. Как новичок, начала немножко даже паниковать, но тут мне посоветовали установить GitKraken.
Работа с GitKraken
Этот осьминог меня и выручил. Он выполняет все те же функции, что и GitHub Desktop, и что самое главное — подходит как для 64-, так и для моей 32-битной системы.
Правда пришлось немножко покопаться в интерфейсе, потому что я уже посмотрела, как работать в GitHub Desktop и сходу была не готова работать в какой-то другой программе. Что касается связи с браузерной версией GitHub, то проблем не было: GitKraken всё пушил влёт. Не было проблем и при взаимодействии с VS Code. Изменения в графическом редакторе здесь сразу отображались.
Презентация
Режим Prototype можно использовать не только для создания прототипов, но и для показа презентаций. Это очень удобно на вебинаре, когда нужно и презентацию показать, и поработать с примером в режиме реального времени. Для этого не обязательно держать запущенными несколько программ, достаточно двух активных вкладок в Figma.
Минусы Figma
В главном преимуществе Figma (совместная работа) кроется и минус, который может оказаться для кого-то существенным. Например, если вы не переносите, когда кто-то наблюдает за вашей работой, Figma может вас расстроить.
Представим ситуацию: вы работаете над макетом, к которому настроен общий доступ для коллег, в том числе для вашего начальника. Менеджер проекта поделился с ним ссылкой для промежуточного отчёта. Босс открыл файл, а вы в этот момент дорабатываете макет. Курсор с именем руководителя возле фрейма, над которым вы в этот момент трудитесь, может выбить из колеи.
Был у меня забавный случай, связанный с совместным доступом. Мы в команде только получили подтверждение от руководства, что можем использовать Figma как основной рабочий инструмент дизайнера. Пока шла закупка лицензий, мы работали в бесплатном тарифе.
Ещё один, уже существенный минус, — это необходимость стабильного интернет-соединения. Если сеть пропадает, нет ни работы, ни результата. Конечно, можно периодически сохранять файлы локально, чтобы открыть их и продолжить без интернета, но в таком случае преимущества облачного продукта пропадают.
Редактор кода — без нареканий
Я выбрала Visual Studio Code. Здесь всё работало хорошо. Код спокойно писался, правильно открывался и сохранялся. Из расширений меня больше всего интересовали HTML Preview и Live Server. Первое по комбинации клавиш открывало справа окошко предварительного просмотра, второе — результат вёрстки в браузере.
Работа в VS Code
Системные требования Figma
Для работы в приложении нужно будет обратить внимание на параметры ОС. Но большинство ПК вполне совместимы с данной программой.
ОС должна отвечать минимальным требованиям:
- Windows младше 8.1;
- MacOS младше 10.10 (Yosemite);
- Linux ― версия не имеет значения.
Если же вы планируете работать в программе через браузер, то отслеживайте обновления приложения.
Системные требования Figma
Для исправной работы браузер должен иметь минимальные версии:
- версии Google Chrome старше 58;
- версии Mozilla FireFox старше 57;
- версии Safari старше 11.
Для бесперебойной работы Figma потребуется видеокарта не старше 2012 года. На современных моделях ПК такие уже не устанавливают.
Импорт Sketch-файлов
На Figma очень легко перейти со Sketch, и причина не только в схожести инструментов. У Figma есть возможность импорта Sketch-файлов. Реализована эта функциональность очень качественно. Сохраняются слои, группы, даже локальные компоненты. Проблемы возникают, только если к импортируемому файлу были подключены внешние библиотеки компонентов. Связи рвутся, и в Figma элементы будут отображаться некорректно.
История версий
Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.
Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.
Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.
Выводы
На мой взгляд, Figma — очень крутой инструмент со своими плюсами и минусами. Она одна заменяет несколько программ и помогает команде выполнить широкий спектр задач. Но каждый решает сам, каким инструментом ему удобнее пользоваться. И я надеюсь, что эта статья поможет сделать правильный выбор.
Файлы в облаке
Хранить файлы на диске сейчас неактуально — балом правят облачные сервисы. Figma — онлайн-редактор, поэтому результат вашей работы будет автоматически сохранён в её собственном облаке. Но возможность скачать файлы тоже есть. Для этого нужно в главном меню программы выбрать «Файл» и пункт «Сохранить как .fig».
Кому нужна Figma
Figma — отличный инструмент для веб-дизайнера, проектировщика и дизайнера интерфейсов. Ею также могут пользоваться UX-исследователи и разработчики. Руководители продуктов могут контролировать процесс, понимать, на какой стадии находится дизайн, и быстро собирать презентацию для коллег. Аналитики для описания сценариев могут экспортировать макеты, не отвлекая дизайнера от работы.
Плагины
Figma — удобный инструмент для работы над дизайном интерфейсов. Но можно сделать работу в редакторе ещё быстрее, автоматизировав часть рутинных задач. На помощь придут плагины.
Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.
Многопользовательский режим
Пожалуй, самый весомый аргумент в пользу Figma — многопользовательский режим. Пока ни один из популярных графических редакторов не может этим похвастаться. На момент написания статьи — точно. Если вы и несколько ваших коллег-дизайнеров работаете над одним крупным проектом, Figma может предоставить вам единое пространство. Вы всегда будете в курсе прогресса задач каждого из вас.
Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл ;) Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.
Все участники проекта могут оставить комментарии, вопросы и пожелания прямо на макете. Это сильно упрощает процесс согласования и избавляет от лишней переписки в почте или мессенджерах. История комментариев всегда доступна в файле проекта.
Настройки приватности достаточно гибкие: вы можете дать доступ как ко всему проекту, так и к отдельному файлу. Это позволяет управлять видимостью для каждого участника команды. Вы даже можете показать проект человеку, у которого нет аккаунта в Figma, и который, вероятно, никогда о ней не слышал. Например, вашему заказчику.
Работать можно, но больно
Итак, если вам нужен ноутбук только для самых базовых вещей (работа с документами, просмотр фильмов, общение), то подойдёт и 32-битная система на старом железе. Мне, например, за всё время учёбы особых неудобств ноутбук не доставлял: я училась на филфаке и в сложных программах не работала.
Но если вы хотите осваивать современные программы, верстать, писать код, то со старым ноутбуком придётся помучаться. Мне вёрстка была в новинку, поэтому мало того, что я долго разбиралась в теме, так ещё и убила уйму времени просто на подбор программ, которые потянет мой ноутбук. И кроме прочего, мешали баги в Фигме, которых нет на новом компьютере: позже я его всё-таки купила. Кстати, на нём 64-битная система и Windows 10 — и десктопные GitHub и Figma работают прекрасно.
Так что если вы решили научиться верстать, то заранее проверьте компьютер, на котором будете работать. Все ли программы открываются? Возможно, вам тоже придётся поискать другие решения. Обычно курсы ограничены по времени, и каждый день на счету. Поэтому лучше настроить технику перед началом обучения и больше на это не отвлекаться.
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:
Самый неоспоримый плюс – халява
В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.
Наличие Мультиплеера
Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.
Задействован принцип кроссплатформенности
Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.
Удобные быстрые клавиши
Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.
Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.
Возможность работы с векторной графикой
В Figma можно работать не только с растровыми изображениями, но и с векторной графикой, экспортируя и импортируя готовые решения в формат SVG. Эта фишка очень полезна, особенно если вы беспокоитесь о производительности своего web проекта, который можно очень сильно ухудшить, если вставлять не тот формат, или не того размера.
Возможность создания компонентов
Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)
Подключаемые плагины
В Фигме есть функционал настраиваемых плагинов, и их там довольно много.
Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.
А теперь о негативных моментах, с которыми сталкиваются пользователи Figma в процессе работы, ну или о том, чего так не хватает, а очень надо.
Проблема с определением фактических размеров элементов и расстояния между ними
К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.
Иногда эту проблему можно решить, выбрав элемент отсчета, а затем с зажатой клавишей Alt нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.
Перекрытие и заблокированные слои
Очень часто происходят случаи, что получив ссылку на макет сайта, верстальщик не может изъять нужные элементы дизайна по причине того, что они перекрыты вышестоящими слоями, или же эти слои вообще заморожены.
Скорее всего, ваш дизайнер вам не доверяет, и вы получите от него макет с правами , чтоб ничего там не поломали. К сожалению, функционал рабочего пространства макета ссылки очень урезан и тогда приходится создавать новый проект и переносить туда весь дизайн, только чтоб уже самому отключить мешающие слои, ну или решайте свои вопросы через общение и просьбы о помощи.
Проблемы с текстом
- Первое, что сразу бросится в глаза, получив новый проект — вы не узнаете какие шрифты там используются до того момента пока не проклацаете все слоя с текстами. Не понимаю, почему это пока не реализовали, к примеру, как в Avocode
- Также сталкивался с забавными случаями, что во вкладке Code написано к примеру:
а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.
Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).
Если же вы работаете не только с открытыми Google шрифтами, но и используете личный подключаемый набор, а он ещё и кирилличный, то будьте готовы к приключениям.
Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.
Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.
Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.
*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?
Иначе говоря, если у Вас нету связи с глобальной паутиной на хороших скоростях, возвращайтесь в свою пещеру к настенной живописи, или переходите на оффлайновые продукты. Тут Фигма увы бессильна и Ваше творчество так и останется недоступно для общественности, и не важно, что сроки горят, и завтра сдавать проект.
Работа в фигме расхолаживает дизайнера
Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)
- Там дизайнер посчитал, что называть слои уже не имеет смысла. Пхх там ведь и так всё видно. Неважно, что при экспорте файлов у верстальщика будет Group1.jpg Group1(1).jpg….и т.д. Разберётся.
- Там слои забыл объединять в группы, и что б нормально забрать картинку, как она выглядит, например, с наложенной маской, опять надо забирать на свой проект, и самостоятельно группировать.
- Ещё классика, это вместо определенно цвета, использовать изменение свойства прозрачности (opacity) когда это целесообразно, и нет.
И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета
скорее всего перейдет к rgba представлению
А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.
В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.
Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.
Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт
Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.
*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…
О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.
Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.
Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.
Сделаем web лучше.
P.S. Отдельное спасибо, дизайнерам, которых я доставал дурацкими вопросами, но они на них стойко отвечали, и пользователю AWG-RU за пост Правила подготовки макетов в Figma
Небольшая заметка о том, с какими проблемами я столкнулась, начав работать в Figma.
Figma работает быстро. Файлы всегда в актуальном состоянии. Легко обмениваться проектами внутри организации, поэтому сотрудничать легко.
Так, по заявлению Figma на их сайте, говорит старший менеджер по дизайну в Twitter. Сотрудничать то легко, а что на счет того, как в ней работать?
Figma позиционирует себя как супер-инструмент для совместной работы дизайнеров интерфейсов. Об этом они сообщают чуть ли не в каждом блоке на своем сайте. Но если копнуть глубже, то позаботившись о дизайн-отделах и корпорациях всего мира, Figma ну совсем забыла позаботится о комфорте каждого дизайнера в отдельности.
Я застала еще те бородатые времена, когда дизайнеры интерфейсов страдали, работая над своими проектами в Photoshop. В 2010 году в мир дизайнеров перевернулся, так как на рынок вышел его величество Sketch (забегая немного вперед, я до сих пор считаю его идеальным инструментом для одиночной работы). Это был действительно новый инструмент, адаптированный специально для проектирования и дизайна интерфейсов. Единственным минусом было отсутствие кроссплатформенности. В этот момент Adobe напрягся и, с небольшим отставанием, в 2015 году выкатил на рынок Adobe XD. Но он не успел как следует закрепиться на рынке и получить свою порцию славы.
В 2016 году выходит первый релиз Figma. Ребята серьезно постарались и выкатили не только кроссплатформенный сервис для дизайна интерфейсов, но и запилили крутую фишку в виде совместной работы над проектами. В этот момент рынок ахнул от удивления и все дружно мигрировали на Figma. Началась великая борьба тех, кто топит за Sketch и тех, кто топит за Figma.
Так вышло, что до декабря 2020 года я активно состояла в клубе «Я за Sketch», работала в связке Sketch+Zeplin или верстала сама по памяти. Но обстоятельства сложились так, что над следующим своим проектом мне нужно было работать в Figma, на которую я переходила со слезами на глазах. Спустя пол года работы в Figma я до сих пор иногда сижу на подоконнике с чашкой кофе и мечтаю о Sketch. И сейчас расскажу почему.
Начнем с маленькой (в прямом и переносном смысле), но довольно болезненной для меня вещи. История операций, которую хранит Figma. Она маленькая. Очень маленькая. Под историей операций я подразумеваю, сколько действий вы можете отменить с помощью Ctrl+Z.
Не знаю как остальные, но я довольно часто возвращаю макет в первоначальное состояние (почему так, расскажу чуть позже), проработав над ним минут 30-40. Figma позволяет отменить всего 100 последних действий, причем в эти действия включают в себя не только смещение, изменение настроек и т.п., но и фокус на элементе. То есть если вы прокликали 5 элементов, вы уже истратили 5 "жизней" из 100. Переключились на другой элемент - получите «-1». В итоге 100 действия в процессе активной работы я совершаю в среднем за 10 мин.
Речь идет о поиске страниц, артбордов, слоев и элементов. Хочешь пользоваться поиском - пили компоненты и ищи их в Assets, а страницы и артборды ищи в ручную. Sketch в этом плане милашки и позаботились о юзабельности.
Казалось бы, такая мелочь, а насколько сильно облегчает жизнь. В моем проекте более 60 страниц, на каждой из которых минимум 15-20 артбордов, бывает, что количество переваливает за 50. Мне дико сложно ориентироваться в проекте без поиска по дереву.
А вот мы и приехали к одной из причин негодующих дизайнеров по всему миру и почему я возвращаю макеты в исходное состояние, вместо того чтобы плодить версии. Десктопное приложение Figma ничем не отличается от вкладки браузера: приложение написано на Electron, что влечет за собой такую вот особенность. Так что нет смысла прокачивать свой ПК оперативкой, работая с Figma, вы все равно не выйдете за рамки дозволенного.
Если при работе с файлом (файлами) ваше приложение будет подбираться к потреблению 2GB, вы увидите предупреждение, а если перевалит, то вы просто потеряете к нему доступ, он перестанет открываться и нужно будет вытаскивать из истории менее тяжеловесную версию (то, что история версий тоже может просто крашнуть приложение, идет бонусом).
И не забудьте, что компоненты тащат за собой все элементы, которые есть в родителе (подтверждение этому есть в официальной документации). То есть компоненты не переиспользуются (что было бы логично), а дублируются, и когда вы вставляете его 3 раза, вместо одного комплекта элементов, вы получаете 3, просто связанных между собой.
Не хотите потерять доступ к файлу — следите за показателями потребления памяти тут:
View -> Resource use
Лично для меня это прям вообще адок еще тот. Я пишу много комментариев к макетам для разработчиков, которые в дальнейшем будут их верстать, казалось бы, идеальный функционал: включил, когда нужно, когда не нужно — скрыл, и места лишнего не занимают, но блин НЕТ!
Мой проект растет, память заканчивается, но я просто не могу его разделить, потому что комменты не привязываются к артборду или элементу. Они остаются висеть в пустом пространстве проекта, и вы не можете их ни перепривязать, ни передвинуть. Единственное, что вам остается — наслаждаться ими в списке Unattached Comments.
Теперь приходится писать комментарии отдельными текстовыми слоями, но все мы помним причину №3 (да-да, про те самые ограничения).
Да, этот пункт имеет 2 стороны медали, но все же, для меня это больше минус, чем плюс. Я считаю, в подобных инструментах режим автономной работы просто необходим.
Почему? Тут отдельный список причин.Одна из которых - зависимость от состояния серверов. Лежат сервера? Ну можете тоже спокойно прилечь, Figma будет лежать вместе с вами, работа встанет. Недавно такая история происходила стабильно каждый день, Figma либо вообще отваливалась, либо проекты грузились нереально долго. И это не скрасило даже то, что таким образом Figma видимо масштабно внедряли градиентный лоадер (который почему-то почти сразу выпилила 🤔). Шутка, изменения конечно были довольно обширными, но сути это не меняет.
Плюс такой подход не дает вам возможность свалить куда-нибудь в леса и творить в окружении птичек и деревьев. Нет интернета - нет работы. Figma все решила за вас, вы обязаны жить в цивилизованном мире.
Заранее оценивайте масштабы проекта и сразу дробите его на несколько отдельных проектов как можно мельче. Не допускайте тяжеловесов, иначе будете мучаться потом как я, и рискуете вообще потерять доступ к файлу.
Также продумайте дерево элементов и страниц и нейминг, ведь ориентироваться в проекте придется на глаз. Никакого поиска- только хардкорд. Как вариант, в названиях страниц и артбордов можно использовать смайлики, если найдете подходящие. Или разбейте страницы по цветам и используйте пустые страницы для группировки. Например так:
К сожалению юзабельность Figma очень низкая, по сравнению например со Sketch. У них продумана каждая мелкая деталь, которая упрощает работу с инструментом, там ты действительно кайфуешь от работы. Так как мне есть с чем сравнить, с Figma мне все еще сложно найти общий язык. По мимо прочего мне так же не нравиться организация файлов и визуальная составляющая, но это уже совсем другая история. Ребята сильно вкладываются в коллективную работу и за это большое спасибо, но к сожалению совершенно игнорируют потребности каждого отдельного пользователя.
Usability-тестирование
Когда прототип готов, вы можете протестировать решение на пользователях. Для этого нужно встретиться или связаться с респондентом и поделиться с ним ссылкой на интерактивный прототип.
Дальнейшая работа в Figma
Теперь рассмотрим основы работы в Figma, а именно настройку стилей, фреймов, слоев и т. д.
Чтобы создать макет, нужно выделить определенный слой. Далее в разделе «Layout grid», находящемся по правую сторону в поле «Design», выбрать необходимые размерные параметры, уровень прозрачности и цветовое решение. Можно изменить формат сетки, оставив только столбцы или строки. Можно работать сразу с несколькими макетами, переключаясь между ними с помощью сочетания клавиш Ctrl + G.
Чтобы наглядно увидеть, как будет отображаться разработанный интерфейс на экранах с различным разрешением, нужно обратиться к разделу «Prototype». Далее в подпункте «Device» выбрать требуемый тип устройства и ознакомиться с результатом.
При желании можно поменять цвет деталей и изменить ориентацию положения (например, с горизонтального на вертикальное). Когда все настройки будут закончены, нужно активировать кнопку «Present» (находится слева от «Share»), чтобы увидеть качество отображения макета в указанном устройстве.
Мы вместе с экспертами по построению карьеры подготовили документы, которые помогут не ошибиться с выбором и определить, какая профессия в IT подходит именно вам.
Благодаря этим гайдам 76% наших студентов смогли найти востребованную профессию своей мечты!
Скоро мы уберем их из открытого доступа, успейте скачать бесплатно:
Женщины в IT: мифы и перспективы в карьере
Как прокачать свою технику речи
100 тыс. руб за 100 дней с новой профессией
Список из 6 востребованных профессий с заработком от 100 тыс. руб
Критические ошибки, которые могут разрушить карьеру
Собрали 7 типичных ошибок, четвертую должен знать каждый!
Гайд по профессиям в IT
5 профессий с данными о навыках и средней заработной плате
4,7 MB
Изображения легко интегрируются из различных ресурсов, например, из памяти ПК или копировать из Интернета. Главное — помнить о соблюдении авторских прав.
Также Figma позволяет накладывать на изображения эффекты и корректировать некоторые параметры. Все это можно сделать с помощью инструментов, расположенных на панели с правой стороны от выделенного изображения.
Вы можете сделать свою собственную библиотеку элементов из созданных ранее объектов, добавив их в раздел «Компоненты». То есть не нужно каждый раз создавать элемент заново. Для перемещения объекта в библиотеку его нужно выделить и одновременно зажать клавиши Ctrl + Alt + K – это преобразует объект в компонент.
Если вы начинаете редактировать детали основного компонента, то автоматически будут корректироваться все существующие копии. Чтобы найти ранее добавленный в библиотеку компонент, нужно обратиться к вкладке «Assets» в левой панели.
В Figma можно изменять стилистику сразу нескольких объектов и создавать собственные цветовые вариации. Чтобы реализовать эту функцию, нужно выделить созданный объект и нажать на кнопку в форме квадрата.
Робота аналогично работе с Photoshop. Есть возможность конструировать отдельные группы, помещать отдельные детали на передний или задний план. Нужные функции находятся в разделе «Layers», распложенного на панели в левой части интерфейса программы.
Рассмотрим кратко инструкцию по работе с Figma в составе команды.
При регистрации в программе происходит автоматическое формирование команды. При желании ее можно переименовать, щелкнув RButton мыши по нужному объекту и активировав функцию «Rename». Аналогичным путем можно удалить существующую команду. Если нужно создать новую группу для совместной работы, то необходимо кликнуть на «Create new team» в нижней части панели слева.
Работа с текстом в Figma имеет много возможностей. В сервисе по умолчанию установлены шрифты Google. Если вы пользуетесь десктопной версией программы, то можете скачать и установить плагин Font Helper – это даст возможность пользоваться локальными шрифтами с вашего ПК.
Для создания текстового объекта нажмите в панели слева инструмент «Text» или активируйте кнопку с буквой «Т» в левой верхней части интерфейса. Все те параметры, которые можно менять и настраивать, будут отображаться в окне справа (цвет, тип, размер, стиль шрифта и т. д.).
Программа предусматривает установку плагинов, необходимых для повышения эффективности работы. Информацию о списке всех существующих плагинов можно найти на главной странице «Community» → «Explore», а установленные можно увидеть в разделе «Plugins» в настройках профиля.
Для просмотра параметров фрейма нажмите кнопку «F» – в правой части экрана отобразится панель с вариациями артбордов. В рамках одного проекта возможно выложить отдельно друг от друга несколько разноформатных фреймов.
Параметры фрейма
При необходимости можно задать точные размеры артборда: нажимаете «F», далее в рабочем поле создаете фрейм, зажав левую кнопку мыши. Чтобы задать размеры, отпускаете левую кнопку.
Фреймы
В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой.
У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:
- Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
- Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу Сmd (MacOS) или Ctrl (Windows), тогда все детали макета останутся на своих местах. В противном случае изображение станет непропорциональным.
Возможности сервиса Figma
Онлайн-сервис Figma отлично подходит для тех, кто занимается интернет-маркетингом, дизайном интерфейсов и веб-разработкой ресурсов. Программа представляет собой графический редактор, в котором можно создавать макет приложения или сайта, детали интерфейса (кнопки, иконки и пр.), векторные иллюстрации. Прелесть сервиса и в том, что здесь можно работать в команде, обсуждая изменения и внося поправки. Программа доступна в браузере и в приложении, которое устанавливается на ПК.
Возможности сервиса Figma
Сервис пользуется успехом не просто так. От многих графических редакторов Figma отличается тем, что:
- Имеет бесплатные функции. Сервисом можно пользоваться, но ряд возможностей будет ограничен: например, количество макетов, время, в течение которого будут храниться проекты и прочее.
- Функционал встроенных компонентов. Например, вы сделали несколько макетов в одном стиле, но в последний момент решили изменить какую-то деталь, которая повторяется во всех них. В других редакторах эту деталь нужно менять вручную в каждом макете. В Figma работа будет упрощенной: если меняется что-то в стиле одного элемента, то меняются все элементы, созданные в этом стиле.
- Возможность интеграции с другими программами. Можно переносить макеты, например, из Sketch или Zeplin, без искажения графиков, изображений и шрифтов. Также можно подключиться к корпоративному мессенджеру Slack, пространству Confluence и т. д.
- Возможность работы в браузере или в приложении. Для работы в Figma можно использовать веб-формат или установленное приложение, которое можно скачать с официального сайта. Просто регистрируете профиль и начинаете работать.
- Возможность командной работы. Это одновременно и преимущество сервиса: совместная работа в едином артборде.
Получите подборку бесплатно (pdf 2,5 mb)
- Гибкость фреймов. Они легко масштабируются, но есть и фиксированные размеры для разных устройств: ПК, планшет, телефон и т. д. При этом не нужно запоминать параметры – выбираете необходимый тип девайса и работаете в нем.
- Наличие истории предыдущих версий. Программа хранит ранние версии проекта 30 дней. Эта особенность программы здорово выручает, если возникает необходимость в просмотре прежних вариантов файла. Процесс сохранения автоматизирован: как только вносится изменение, происходит сохранение. Для удобства поиска каждой из версии можно присвоить название и описание.
- Облачный сервер хранения. Благодаря этому отпадает вопрос, как сохранить работу в Figma. Не нужно скачивать макет каждый раз после редактирования – файлы хранятся в облаке программы.
У Figma есть и свои недостатки, хотя они не играют большой роли при правильном выстраивании рабочего процесса. Например, интерфейс сервиса не русифицирован. Также для работы с программой необходимо подключение к Интернету.
Десктопное приложение и Figma Mirror для смартфонов
Читайте также:
- Huawei matebook d14 можно ли увеличить оперативную память
- Что будет если установить драйвера от другой видеокарты
- Где происходит хранение и обработка информации процессор носитель память дисковод
- Процессор t4300 какой сокет
- Архитектура процессора pentium pro какой способ обработки данных противоречит принципам фон неймана