Всем привет, у меня уже есть несколько статей по фигме, однако все еще нет первой вступительной части. Думаю пришло время это исправить. В данной статье хотелось бы рассказать о том что нужно знать на первых этапах знакомства с данной программой.
А дальше будут статьи по дальнейшему изучению и освоению данной программы. Думаю, можно начинать.
Первые действия
Итак для начала хотелось бы убедить вас скачать версию для ПК, пользоваться браузерной версией можно и не криминально, но установленная версия таки удобнее.
Окей, мы скачали программу и установили ее, далее нас встречает главный экран на котором мы увидим последние открытые проекты.
Если вы только установили у вас этот экран будет без файлов.
Создаем новый файл это можно сделать как минимум тремя способами.
Создав новый файл он автоматически открывается и мы видим рабочую область. И в этот момент предлагаю вам сразу же настроить шаг перемещения с помощью стрелок, так называемый nudge.
Уроки Figma (Фигма) – №1: Начало работы, основы программы | Школа Максима Солдаткина
Я использую шаг в 1 пиксель для обычного нажатия стрелкой и шаг в 8 пикселей для клавиш “Shift →”.
Почему именно 8?
Вот прям сильно точно не скажу, но слышал что в материал дизайне от гугла используется этот шаг и все размеры отталкиваются от степени числа 2. Да и вообще в разработке этот шаг часто используется. К этому просто нужно привыкнуть. По данной системе даже с шрифтами проще работать 16, 24, 32, 40 и т.д.
Если вы по этой теме знаете больше буду рад если поделитесь.
Настроить данный параметр можно в настройках nudge amount, которые можно найти вписав название в поиске настроек или в разделе Preferences в меня слева вверху.
Там же можно настроить привязку к пикселям.
Знакомство с рабочей областью
После базовых настроек можно знакомится с рабочей областью.
В блоке на левой стороне основная вкладка это слои (Layers) на которой будут списком отображаться все объекты которые вы будете использовать в своей работе.
Далее идут Assets так называемые компоненты, но об этом позже.
После компонентов(если быть точнее то они якобы в слоях но раскрывается их меню выше и после компонентов) расположены страницы (Pages), которые удобно использовать для того, чтобы у вас различные по назначению объекты не хранились на одном листе(Например UI kit, различные материалы от заказчика, мобильная версия и версия для ПК будут на разных страницах и компоненты, созданные на одной из страниц, можно использовать во всем документе)
Далее идет правая часть на которой есть 3 вкладки.
Design ваша основная вкладка во время работы, чаще всего вы будете работать именно с ней.
Prototype вкладка для прототипирования страниц.
Code Можно посмотреть как выглядит код разных объектов.
Все эти панели можно закрыть комбинацией клавиш “Ctrl ”
Панель со слоями отдельно закрывается клавишами “Ctrl Shift ”
Перед началом работы можно так же настроить фон рабочей области, в зависимости от ваших предпочтений. Сделать это можно в блоке справа, на вкладке Design если у вас не выделен никакой объект.
Figma с нуля за 1 час! (уроки веб дизайна для начинающих)
Для начала работы этих пред настроек должно хватить. Дальше можно перейти к Фреймам и Группам(у меня есть данная статья) а так же всегда будет полезно ознакомится с хоткеями для фигмы, о чем я так же уже писал статью.
Спасибо за внимание, надеюсь данная информация будет полезна для вас.
Запустил серию статей «Душная фигма» где стараюсь с начала рассказать о программе все что знаю, если интересно залетайте на первую статью на медиуме.
Ставьте клэпы(вы можете это сделать 50 раз, мне будет приятно и я буду знать что не зря это пишу)
Остались вопросы? пиши тут в комментариях или мне в телегу.
Всем желаю хорошего дня. До связи!
Источник: qvladislavp.medium.com
Что такое Фигма и как в ней работать
Figma — это облачный инструмент для проектирования и прототипирования, который позволяет пользователям создавать и совместно работать над дизайном веб-сайтов, мобильных приложений и других цифровых продуктов. Дизайн-система figma появилась в 2016 году и уже к 2018 набрала огромную популярность среди дизайнеров. Это инструмент на основе браузера, то есть его можно использовать на любом устройстве с подключением к Интернету. Здесь мы расскажем вам, что такое figma.
Подпишитесь на рассылку
Раз в неделю мы будем присылать вам полезные материалы, подборку интересных кейсов и статей.
Возможности и особенности Figma
Давайте разберемся, почему Figma из малоизвестного стартапа выросла в полноценный сервис, который так популярен у дизайнеров всего мира. Возможности фигмы очень велики.
Отсутствие оплаты за базовую функциональность. Этот графический редактор можно использовать бесплатно, но есть некоторые условия, которые прилагаются к нему, например, количество разрешенных библиотек и проектов, срок доступа к историям версий, общие шрифты.
Интегрированные компоненты. Если вы создаете несколько объектов в одном стиле, вы можете корректировать их по всему макету, а не изменять каждый по отдельности, как в других графических редакторах. Кроме того, вы можете переносить дизайн из Sketch не теряя шрифты, без искажений в изображениях или векторах. Эту программу можно подключить к другим сервисам, таким как Slack, пространство Confluence и так далее.
Работа из браузера и десктопа. Программу можно использовать в онлайн или через десктопное приложение, при условии, что вы вошли в существующий профиль. Работа в браузере требует стабильного подключения к интернету.
Фреймы с шаблонами размеров для смартфонов, ноутбуков и других девайсов. Дизайн-система в фигме устроена так, что позволяет выбрать нужный размер из списка и сразу начинать работать с ним.
Сохраняется история версий. Все итерации вашей работы с макетом хранятся в Figma 30 дней. За этот срок можно неограниченное количество раз вернуться к любому этапу работы и внести нужные правки. Можно дублировать версии и присваивать им индивидуальные названия. Файл сохраняется автоматом, как только вы внесли последнюю правку.
Облачное хранилище. Поскольку работает фигма онлайн, то скачивать файлы на компьютер для работы не требуется. Все работы хранятся на серверах Figma и доступны в любой момент.
Редактор векторной графики. Так как фигма программа для дизайна, то она дает возможность пользователям создавать и редактировать векторную графику с использованием форм, линий и текста.
Совместная работа. Функции совместной работы Figma в режиме реального времени упрощают совместную работу команд над проектом с возможностью видеть изменения друг друга в режиме реального времени и оставлять комментарии.
Прототипирование. Figma редактор позволяет пользователям создавать интерактивные прототипы своих проектов, которыми можно поделиться с заинтересованными сторонами для обратной связи. Прототипы в фигме, пожалуй, самый востребованный тип проектов.
Компоненты дизайна. Figma позволяет пользователям создавать повторно используемые компоненты дизайна, такие как кнопки и панели навигации, которые можно легко использовать в нескольких проектах.
Плагины. Figma имеет надежную экосистему плагинов с широким спектром доступных плагинов для расширения возможностей платформы.
Системы дизайна. Figma позволяет пользователям создавать и управлять системами дизайна, которые можно использовать для обеспечения согласованности дизайна продукта.
В целом, Figma — это мощный инструмент для проектирования и прототипирования, который особенно хорошо подходит для команд и совместных рабочих процессов. Далее мы ответим на типичный вопрос: «фигма как пользоваться».
Figma для дизайнеров
Почему работа в figma привлекает в первую очередь именно дизайнеров? Вот основные причины:
- Очень простой интерфейс, в отличие от Adobe Photoshop или Adobe XD;
- Работа над проектом в команде набирает все большую популярность, а Фигма заточена именно на командную работу;
- Команда может работать, не привязываясь к операционной системе или конкретному компьютеру, главное, чтобы был интернет;
- Можно работать с Google Fonts;
- Можно экспортировать проект в Sketch;
- Отличная система взаимного комментирования и рецензирования внутри команды;
- Оперативная техническая поддержка со стороны Figma.
Недостатки Фигмы
У каждой программы есть свои достоинства и недостатки. Вот что следует учесть, прежде чем вы приступите к изучению Figma, чтобы потом не было разочарования.
Изменение качества картинок. Когда вы помещаете растровые изображения, программа преобразует их и появляется зернистость в фигме.
Отсутствие защиты файлов в бесплатном тарифе. Любой пользователь, которому вы предоставите доступ для просмотра, может внести изменения в макет или скопировать его.
Зависимость от надежности интернет-соединения. В случае обрыва связи, ваша работа может прерваться в любой момент. Чтобы избежать досадных перерывов, прогружайте проект полностью после каждого внесения изменений. Для стабильной работы офлайн лучше использовать десктопное приложение.
Интерфейс не переведен на русский язык. Поэтому вместо того, чтобы искать на форумах, как в фигме поменять языки, стоит просто чаще обращаться к инструкциям или полностью прочесть руководство по фигме, чтобы в разобраться в меню.
Тем не менее, какие бы недостатки не содержала фигма, отзывы о программе в целом позитивные.
Начало работы в Фигме
Для начала работы зарегистрируйтесь или авторизуйтесь в figma официальном сайте.Для регистрации нажмите Get Started.
После входа появится рабочее пространство. Нажмите New design file, задайте необходимые параметры. Или импортируйте собственное изображение, нажав на иконку Import file.
Если предпочитаете работать офлайн, зайдите в свой аккаунт и в выпадающем меню выберите Get desktop app. Скачается десктопная версия.
Все, теперь вы можете начать делать новый макет.
Коротко о главном
Прежде чем приступать к самостоятельной работе, давайте закрепим принципы, по которым работает Figma. Разобраться в figma интерфейсе несложно.
В интерфейсе вы будете в основном обращаться к графическому редактору и менеджеру файлов. В основном окне открываются новые проекты. Все параметры интерфейса можно и нужно настраивать под себя: сделать индивидуальную аватарку, настроить оповещения, сменить при необходимости пароль. Если вы запутались в большом количестве проектов или загруженных файлов, то любой из них легко находится по поиску.
Поскольку Figma это облачный редактор, заботиться о сохранении файлов не нужно. Они не только сохраняются автоматически, но и отдельно сохраняются истории изменений. Так что к каждому этапу можно вернуться и внести туда изменения или восстановить копию.
Для быстрого доступа в к текущим проектам добавьте их в папку Favorites и они всегда будут под рукой.
Как создать группу в фигме? Группы — это коллекции элементов, которые можно объединить, чтобы упростить управление их свойствами.
Чтобы создать группу в Figma:
- Откройте файл Figma, в котором вы хотите создать группу.
- Выберите элементы, которые вы хотите объединить в группу. Можно выбрать сразу несколько элементов, удерживая клавишу Shift и кликая по ним левой кнопкой мыши.
- Выберите пункт «Группа» в меню «Структура» или нажмите клавишу Ctrl + G (или Cmd + G на Mac). Элементы будут объединены в группу.
Многопользовательский режим редактирования
В наше время метод, когда дизайнер работает над макетом в одиночку, а потом отдает заказчику на утверждение и ждет от него ответа, уходит в прошлое. Сейчас над макетом работает целая команда дизайнеров и представителей заказчика и все правки вносятся в режиме реального времени.
Такой переворот произошел во многом по причине широкого распространения Figma. Благодаря облачной обработке создатели приложения решили проблемы совместимости шрифтов на разных устройствах и другие неудобства, с которыми часто сталкивались пользователи Adobe Photoshop.
Чтобы сделать макет общим, просто создайте новую команду на главной странице Figma. Как создать группу в фигме? Нажмите New Team и присвойте ей название. Теперь всем этим людям будут доступны ваши файлы, которые вы перенесли в соответствующую папку и расшарили для них.
Облачный сервер хранения файлов
Принцип облачного хранения очень удобен тем, что файлы надежно защищены на серверах Figma. Нет причин постоянно нажимать кнопки сохранения или волноваться, что на компьютере произойдет сбой или внезапная перезагрузка. Бэкапы в облаке происходят постоянно и каждое изменение тут же фиксируется.
Небольшой лайфхак. Графический редактор figma можно использовать как бесплатное облачное хранилище для коллекции ваших фотографий и других футажей, которые будут всегда под рукой для вставки в проект.
Компоненты
Компоненты в фигма позволяют автоматически задавать групповые параметры к идентичным элементам макета и применять эти параметры к группе макетов. При прототипировании в фигме с помощью компонентов задают вид и размеры стандартных кнопок, виджетов, иконок, стиль списков. Например, заказчик попросил вас изменить размер и цвет виджета в прототипе. А у вас их 30! Что делать?
Менять все вручную в обычном редакторе займет много часов. А с использованием figma компонентов все изменения делаются парой кликов и применяются автоматически ко всей группе элементов.
Фреймы
Если вы работаете над макетом интерфейса для мобильного отображения, вам не обойтись без фреймов. В Figma фреймы (frames) представляют собой контейнеры для хранения и организации элементов интерфейса. Они могут содержать такие элементы, как текст, изображения, формы, иконки и т. д. Фреймы могут быть размещены на рабочей области и структурированы в слои, что позволяет легко управлять ими и создавать сложные макеты.
Как создать фреймы в фигме? Нажмите кнопку F. На панели свойств отобразятся параметры фрейма. Можно выбрать размер под определенную модель смартфона или создать фрейм по своим размерам.
Фреймы также могут использоваться для создания адаптивных макетов, так как они могут автоматически изменять размеры и расположение своих элементов в зависимости от размера окна просмотра. Это позволяет создавать макеты, понимать, насколько хорошо они будут выглядеть на различных устройствах и разрешениях экрана и тестировать прототипы в фигме.
При необходимости можно сразу выбрать самые популярные размеры Android и все размеры экранов iPhone.
Сетки
Продолжаем изучение фигма. Как работать с сеткой в этой программе? Сетка (Layout Grid) служит для выравнивания расстояний между элементами макета. С ее помощью можно также настроить размеры элементов и их количество. Причем можно настроить расстояние не только от центра, но и от краев объекта.
Это удобно, когда вам, например, нужно расположить много товарных карточек на сайте.
Вы можете сделать несколько сеток, применяя их к отдельному объекту или группе объектов. Количество колонок сетки для больших объектов — до 12, а для маленьких — до 24.
В отличие от стандартной сетки в обычных графических редакторов, Layout Grid в Figma адаптивный. С его помощью вы можете проверить, чтобы верстка макета выглядела одинаково на различных устройствах.
Десктопная версия
Дизайнеры ценят Figma за возможность коллаборации и функции облачного хранилища. Но что делать, если доступа в интернет нет или он нестабилен, а работу закончить нужно срочно? В этом случае на помощь приходит десктопное приложение.
Десктопная версия Figma устанавливается на компьютеры с Windows, macOS и Linux. При этом фигма нетребовательна к системным требованиям. Также существуют версии для мобильных устройств на Android, iOS.
Основное отличие между десктопной и браузерной версиями Figma состоит в том, что десктопная версия может быть использована без подключения к интернету, в то время как браузерная версия требует постоянного подключения. Десктопная версия это более разветвленный функционал и она более надежна, так как не зависит от стабильности интернет-соединения.
Макеты, созданные в десктопной версии, можно импортировать в браузерную, как только появится устойчивое соединение и продолжить работать вместе с командой и заказчиком.
Условная бесплатность
Фигма бесплатной или платной версии — какую выбрать? Формально Figma считается бесплатным приложением. Но за расширенный функционал придется доплатить. Рассмотрим самые распространенные в фигме тарифы.
В бесплатной версии (Starter) вам предложат:
- Создать 3 проекта;
- Доступ к 2 библиотекам;
- Месяц хранения истории на серверах Figma;
- Возможность совместной работы 2 дизайнеров.
Тариф Professional обойдется в $ 12 в месяц. Вот что можно получить за эти деньги:
- Проекты можно создавать без ограничения;
- Доступно большое количество библиотек;
- История изменения хранится пожизненно;
- Можно приглашать в команды новых учвстников.
Тариф Organization открывает все возможности и инструменты Figma. Ежемесячный платеж составит $ 45 в месяц. Вот эти возможности.
- Корпоративный план использования;
- Все проекты защищены от несанкционированного копирования и изменений;
- Дополнительные инструменты безопасности;
- Открыт доступ ко всем библиотекам;
- Доступны общие шрифты;
- Подключение собственных плагинов и управление ими;
- Аналитика проекта.
Почему так важно освоить Figma в 2023 году?
Figma — что это за программа и почему её так любят?
Графический онлайн редактор Фигма (Figma)
1. Лучший вариант для новичков
В отличие от Photoshop, InDesign, Illustrator и других редакторов от Adobe интерфейс в Figma очень простой для понимания. Продуманность сервиса значительно экономит нервы и время дизайнеров. При желании вполне реально освоить все функции по видеоуроку и сразу же начать творить. Один нюанс — приложение на английском, без возможности перевода.
И хоть Фигма на русском — мечта многих, даже на английском можно интуитивно понять любую функцию. Обещаю, вы ни разу не откроете переводчик, даже если совсем не знаете английский. К тому же, несмотря на многофункциональность, Фигма бесплатная. А в 2023 году это существенный плюс, чтобы освоить приложение!
2. Быстрая производительность
В Фигме дизайнеру предоставляется «бесконечное» пространство, на котором можно создавать фреймы (холсты для работы любого размера). Так вот, если Фотошоп начинает тормозить от 3 фреймов высокого качества, то Фигма легко выдерживает более 50 (!) макетов — и работает так же быстро, как с одним. Это существенный плюс для тех, кого интересует создание презентаций или анимации в Фигме. Спойлер: анимацию легко создать, используя плагины для Figma, одним из которых я поделюсь ниже.
3. Автоматическое сохранение изменений
Наверное, каждый дизайнер хоть раз сталкивался с ситуацией, когда многочасовая работа не сохранилась из-за глюка приложения. К счастью, для вас эта неприятность останется в прошлом! Figma — редактор, который, как компьютерные игры, сохраняет изменения ежесекундно. Дополнительным плюсом станет наличие автокопий за последний месяц, которые Фигма также создает сама.
Автоматические сохранение черновиков в Figma
4. Умное выравнивание элементов
Если в Фотошопе выравнивать элементы приходится вручную, то здесь Фигма снова на шаг впереди. Больше никаких мучений с пикселями! Сервис настраивает нужное вам расстояние, которое изменяется вслед за движением мыши буквально на ходу. Захотите поменять местами блоки с фиксированным расстоянием — нет проблем. Отступы при этом тоже сохраняются.
5. Экономия рабочего времени
Figma — сайт, который идеально подойдет для создания векторных элементов. Векторные изображения, в отличие от растровых, можно растягивать до огромных размеров без потери качества.
Также в Фигме можно создавать «компоненты». Превратите любой созданный вами элемент в «компонент» и он станет вашим шаблоном. Вы сможете копировать, видоизменять, группировать его с другими, делать варианты. Figma — это как Lego для дизайнеров. Позволяет конструировать макеты, не отвлекаясь на повторное создание одних и тех же элементов.
6. Командная работа и возможность оставлять комментарии
Вы с коллегами можете одновременно редактировать один макет или создавать рядом разные, накидывая друг другу идеи. Такой мозговой штурм с возможностью моментально показать, что имеешь в виду, гораздо эффективнее словесных баталий. Параллельно с дизайнером удобно работать и верстальщику сайта. Он может сразу корректировать творческий порыв дизайнера и экспортировать необходимые элементы. Доступ к макетам можно открыть и для клиента, которому будет удобно комментировать, не выходя из приложения.
Первые шаги в Figma
Вы можете выбрать любой удобный вариант работы: скачать Фигма на компьютер или пользоваться Фигма онлайн. Но предупреждаю: редактировать макеты можно только на ПК или на ноутбуке. Планшет или телефон для этих целей не подойдут. Хотя некоторые веб-дизайнеры скачивают Фигму на другие устройства, чтобы посмотреть, как выглядит адаптив сайта на разных экранах.
Итак, с вариантами разобрались. Если хотите загрузить приложение, введите в поиск Figma desktop app. Но я считаю, что работа в Фигма онлайн ничем не отличается, так что выбор за вами. Если вы будете работать в браузерной версии, то вам обязательно нужно скачать font installer, чтобы те шрифты, которые вы загружаете на компьютер, появились в браузерной версии Figma.
После прохождения регистрации (которая займет всего пару минут), создайте новый файл при помощи горячей клавиши ctrl + N. Сейчас вы, дистанционно повторяя со мной, изучите базовые функции Фигмы. Но если хотите изучить подробные видео, где я раскрываю все тонкости создания дизайна в Figma, приходите на мой авторский курс: https://goo.su/pbBNf. Там вы научитесь создавать не только красивый, но и функциональный дизайн на примере карточек товаров для маркетплейсов.
Либо вы можете пройти короткое обучение, где вы всего за 1 день освоите Фигма и создадите свои первые дизайн-макеты. Подробности тут: https://ddesign.moscow/intensiv.
Вернемся к обучению. Чтобы создать фрейм, зажмите на клавиатуре F и выберите настройки макета на правой панели. Очень удобно, что разработчики Фигма задали фиксированные значения для разных устройств и форматов. То есть вам не придется гуглить размеры экрана IPhone 13 или листа А4. Достаточно просто выбрать его из предложенных вариантов.
Источник: ddesign.moscow