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

Содержание

Иконка Figma

Данное приложение используется дизайнерами для создания макетов сайта. Оно же является популярным и у верстальщиков. Последние с помощью программы получают нужные им отступы, CSS-стили, общую информацию о шаблоне и так далее. Более детально об этом будет рассказано в статье, а в конце странички вы сможете бесплатно скачать графический редактор Figma Professional на русском языке или же воспользоваться его онлайн-версией.

Описание и возможности

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

Также тут поддерживается и ряд дополнительных функций:

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

Пользовательский интерфейс Figma

Уроки Figma | 01. Скачивание и установка программы фигма

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

Как пользоваться

Теперь переходим к практике и в 2 этапа разберемся, как установить данное приложение на ПК, а также как начать работать с Figma.

Загрузка и установка

Первое, что нужно сделать пользователю, это перейти в самый конец странички и при помощи кнопки загрузить архив с нужной программой. Затем приступаем непосредственно к установке:

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

Запуск установки Figma Desktop

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

Создание аккаунта в Figma

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

Выбор способа авторизации в Figma

С установкой Figma покончено и теперь мы можем переходить к использованию программы.

Инструкция по работе

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

Работа с Figma

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

Достоинства и недостатки

А теперь рассмотрим сильные и слабые стороны Figma на фоне ее аналогов.

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

У программы гораздо меньше возможностей чем, например, у

Adobe Photoshop. Последний также часто используются для создания дизайна HTML-сайта.

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

Как уже говорилось, программа отличается минимальными системными требованиями и способна работать практически на любом компьютере.

Центральный процессор: 1.6 ГГц.
Оперативная память: 1 Гб.
Пространство на жестком диске: от 100 Мб.
Платформа: Microsoft Windows 32/64 Bit.

Скачать

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

Разработчик:	Figma
Платформа:	Windows XP, 7, 8, 10
Язык:	Русский
Лицензия:	RePack
Пароль к архиву:	bestsoft.club

Видеообзор

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

Вопросы и ответы

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

Источник: bestsoft.club

Гайд по работе в Figma: знакомимся с программой

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

Академия дизайн-профессий Pentaschool совместно с Комьюнити подготовила для вас подробный гайд по Figma, который будет состоять из 6 статей. Вместе с экспертом вы пошагово разберетесь в интерфейсе программы, узнаете о работе с векторной графикой, научитесь использовать плагины и разрабатывать сложные элементы дизайна. А сегодня мы предлагаем познакомиться с Figma, сравнить ее с другими редакторами и разобраться, какие проекты вы сможете здесь создавать.

Что такое Figma и для каких задач она подходит

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

Программу используют веб- и UX/UI-дизайнеры, графические дизайнеры, разработчики. Она удобна для командной работы, поэтому также ей пользуются, например, менеджеры проектов и специалисты, которые работают по методике CustDev: общаются с целевой аудиторией, тестируют гипотезы и улучшают прототипы на основе тестов.

Место Figma среди графических редакторов

Наряду с Figma дизайнеру нужно владеть и другими программами. В профессиональную базу входят, например, редакторы из пакета Adobe: Illustrator, Photoshop, InDesign. При этом перед вами не будет стоять выбор – Figma или Photoshop. Эти графические редакторы не заменяют друг друга, а дополняют, так что важно освоить разные инструменты и сочетать их в работе.

Для каждого типа задач самой удобной будет одна программа:

В Figma работают с элементами веб-дизайна и прототипами интерфейсов.
В Adobe Photoshop чаще всего делают сложную обработку растровой графики, создают коллажи и фотомонтаж для оформления сайтов.
В Adobe Illustrator создают векторную графику: логотипы, иллюстрации, элементы фирменного стиля брендов.
В Adobe InDesign работают с версткой: создают макеты книг и журналов, рекламные баннеры и многое другое.

Также есть несколько технических различий между сервисами:

Figma – это онлайн-редактор с функциями для командной работы. Все файлы хранятся в облаке, и над ними можно работать вместе с коллегами в режиме реального времени. У Adobe тоже есть облачное хранилище. Оно позволяет синхронизировать изменения на разных устройствах, но каждым файлом может одновременно пользоваться только один человек, а не команда.
Figma проигрывает редакторам Adobe по количеству функций, поэтому иногда стоит совмещать в работе несколько программ. Например, если вы привыкли создавать векторные объекты в Adobe Illustrator, их можно легко импортировать в Figma.
Преимущество Figma – простота, скорость работы и возможность пользоваться всеми функциями бесплатно. У программ Adobe сложный профессиональный интерфейс, и это замедляет работу над некоторыми задачами.

Фигма

В 2010 году, за несколько лет до Figma, на рынке появился Sketch. Этот редактор создали специально для проектирования интерфейсов, и в нем не было лишних инструментов и перегруженности. Установить его могли только пользователи macOS, но, тем не менее, Sketch очень быстро стал отраслевым трендом.

Чуть позже Adobe представили свой редактор интерфейсов XD, чтобы занять место в конкурентной нише, а в 2016 году появилась Figma. Создатели сделали программу бесплатной, кроссплатформенной и простой в использовании, чем привлекли огромное количество пользователей по всему миру.

Стоит ли бояться ухода Figma с российского рынка?

В марте 2022 года Figma ввела ограничения для некоторых корпоративных аккаунтов в России. В основном, это те компании, которые попали под санкции.

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

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

Эксперт академии Pentaschool рассказывает о возможностях Figma

Павел Ярец, дизайнер с опытом более 15 лет, продюсер Digital media OKTAEDER, преподаватель курса по Figma от академии Pentaschool.

Впервые я познакомился с Figma в 2018 году, когда сервис находился еще в зачаточном состоянии – у редактора были перспективы, но никто всерьез его не воспринимал. Все прогрессивные команды работали в Sketch или Adobe XD, многие студии пытались делать свои онлайн-решения (Invision Studio, Framer и другие).

Главными «фишками» Figma были абсолютно бесплатное использование и возможность командной работы над проектом, но функционал у редактора оказался весьма ограниченным. Даже у Adobe XD было больше плагинов, расширяющих функционал приложения, не говоря уже о Sketch. В общем, мы познакомились с этим редактором и отложили его в сторону.

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

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

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

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

Как установить Figma: системные требования и тарифы

Figma – облачный сервис, которым можно пользоваться прямо в браузере, поэтому устанавливать программу необязательно. Если вы часто открываете файлы с разных устройств, для вас будет удобнее онлайн-версия. Достаточно создать аккаунт на сайте Figma, и можно начинать работу. Проверьте, чтобы у вас была установлена самая свежая версия браузера.

Программу для iOS/Windows или мобильное приложение Figma Mirror можно скачать здесь. Жестких системных требований нет, важна только видеокарта компьютера. Подойдут Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850 и более поздние.

Базовая версия Figma бесплатна, и она позволяет:

Использовать большинство инструментов и плагинов без ограничений.
Подключать к командной работе еще одного человека с правами редактора, кроме вас.
Создавать до 3 папок проектов.
Делиться файлами с любым количеством пользователей.
Хранить историю версий каждого макета не более 30 дней.

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

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

Следите за выходом новых материалов в Комьюнити, чтобы ничего не пропустить. До встречи!

Источник: timeweb.com

Figma — где скачать и как установить программу на компьютер

Онлайн-сервис Figma: принцип работы, лучшие фишки облачной платформы и полезные лайфхаки

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

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

1. Регистрация в Figma

Первое что вам необходимо сделать это перейти по адресу figma.com. В верхнем правом углу нажмите на кнопку Sign up.

Регистрация в Figma черезг гугл аккаунт или email и пароль.

Во всплывающем окне можно авторизоваться с помощью Google аккаунта, либо ввести e-mail и пароль. Рассмотрим второй вариант. Ввожу e-mail и пароль. Нажимаю на кнопку Create Account.

Выбор деятельности при регистрации в Figma.

На следующем шаге укажите ваше имя и выберите род деятельности. Например «Design». Этот выбор ни на что не повлияет в дальнейшем.

Если хотите получать полезную рассылку от фигмы, то поставьте галочку напротив надписи «I agree to join Figma’s mailing list» и нажимаете на кнопку «Create Account».

Подтверждение email адреса при регистрации в figma

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

Подтверждение email адреса при регистрации в figma

Проверьте вашу почту и найдите письмо от Figma с заголовком «Verify your email address». Нажмите на кнопку для подтверждения регистрации верификации email адреса.

Figma — платная или бесплатная программа

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

Тарифы фигма

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

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

Работа с объектами

Объекты, помещенные на холст, можно редактировать. За это отвечают три раздела: Design, Prototype и Inspect.

Design. С помощью инструментов этого раздела можно менять размеры объекта, его цвет, выравнивать по расположению во фрейме, а также накладывать различные эффекты. С помощью меню Export можно сохранить файл на устройство.

Prototype. Позволяет расширить функционал объекта. Например, можно связать два объекта в разных фреймах ссылками.

Inspect. Здесь можно посмотреть цвет, размеры и другие параметры объектов. В отличие от вкладки Design, менять настройки нельзя. Этот раздел полезен для разработчиков. Можно быстро скопировать код объекта и легко вставить в свою верстку.

Что ещё подойдёт вместо GitHub Desktop?

Этим вопросом я задалась уже позже. Мне стало интересно, какие ещё есть варианты.

Ну во-первых, пушить изменения на удалённый репозиторий можно с помощью Git.

На мой ноутбук программа установилась нормально. Я пробовала залить изменения через консоль — всё получилось.

Работа с Git

Во-вторых, есть разные аналоги GitHub Desktop: SmartGit, SourceTree и т.д. Но фишка в том, что большинство из них 32-битной Windows 7 не подходят. Я много чего пробовала установить, даже архивные версии, которые якобы работают и на x86. Может, есть какие-то ещё варианты (если вы знаете — поделитесь, пожалуйста), но ноутбук подружился только с TortoiseGit.

В TortoiseGit не надо разбираться в консольных командах, как в Git. Достаточно просто нажать правой кнопкой мыши на проект и выбрать в контекстном меню команду «Push».

Открывается окно, там проверяем, что изменения пойдут в нужный репозиторий и нажимаем «ок».

Работа с TortoiseGit

Стоимость

Навороченная версия Figma стоит дороже, чем Photoshop: 860 рублей в месяц против 598 соответственно.

Однако у Figma есть бесплатный тарифный план.

Ранее многие бренды объединялись и во время пандемии выпускали общую рекламу. В этом проекте, например, приняли участие 34 производителя

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

Инструменты и возможности 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 есть библиотека плагинов, которые можно установить бесплатно. Они помогают оптимизировать работу дизайнера.

В разделе Community кликните на Plugins и прейдёте в раздел Explore:

В настройках профиля вы можете посмотреть, какие плагины у вас уже установлены.

Центральный процессор: 1.6 ГГц.
Оперативная память: 1 Гб.
Пространство на жестком диске: от 100 Мб.
Платформа: Microsoft Windows 32/64 Bit.