Перед тем как вы сделаете свой первый проект, вам надо войти в свой аккаунт или создать его. Если вы часто работаете с телефона или планшета, можете скачать приложение Figma Mirror для мобильных устройств. Параметры запуска и установки десктопной версии Figma зависят от операционной системы. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid. Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.
Чтобы создать новую команду, необходимо нажать на пункт «Create new team» в самом низу левой панели. До появления Figma самым популярным инструментом для работы у дизайнеров был Photoshop. Но у него было достаточно минусов, чтобы при появлении нового сервиса разработчики и дизайнеры интерфейсов figma как работать перешли в Figma. Чтобы предоставить доступ на редактирование файла, перенесите его в папку команды, зайдите в него и нажмите кнопку Share в верхнем левом углу. Чтобы начать работу в мобильной версии Figma, необходимо авторизоваться в своей учетной записи, используя логин и пароль.
Как обучиться работать в редакторе с нуля
С его помощью просто выделить любую рандомную область проекта и затем отправить ее на экспорт, например, в SVG или JPG. В этом разделе появятся пользователи, редактировавшие ваши проекты. Доступ к файлам в вашем проекте может получить любой участник такой команды. Для работы с этим редактором нужен браузер и подключение к интернету. Если вы хотите использовать редактор только для себя, можно обойтись бесплатным тарифом.
- Но открыв графический редактор впервые, можно запутаться или попасть в небольшой ступор.
- Figma («Фигма») — это графический кросс-платформенный онлайн-редактор, который позволяет пользователям работать вместе в режиме реального времени.
- Все настройки отображаются в правом окне, в том числе размер, цвет, выравнивание, тип шрифта, его стиль и прочие элементы.
- Больше не нужно вручную подбирать цвета каждый раз при изменении какого-либо объекта.
- Сначала выбираем нужную вам команду и в новом окне кликаем по кнопке «Invite» в правом верхнем углу.
То есть если у вас нет доступа к интернету, то начать работу в программе вы не сможете. Все проекты, над которыми вы работаете, хранятся в облачном хранилище Figma. Благодаря этому у дизайнеров отпадает необходимость расфасовывать все свои проекты по папкам и при каждом изменении обновлять файлы. Более того, у каждого дизайнера есть возможность просматривать версии проекта и наглядно видеть все вносимые правки. Весь интерфейс программы выполнен на английском языке.
Режим прототипирования в Figma (Prototype)
У «Фигмы» много инструментов для работы над проектами, расскажем об основных. В Figma можно создавать прототипы сайтов, векторные иллюстрации, кнопки, плашки и другие элементы интерфейсов. Рассказываем, как пользоваться «Фигмой», о преимуществах и недостатках сервиса и кому он подойдёт.
Если вы начинающий дизайнер, то вам с лихвой хватит бесплатной версии, потому что там есть весь функционал, необходимый для работы. Также у фигмы есть огромное сообщество, которое с каждым годом только растет. Этот инструмент позволяет разделить изображение на более мелкие части, которые соединяются вместе, как мозаика, но с прямыми краями. «Послайсить» изображение полезно, если у вас большое полотно. Разбивая его на части, вы добиваетесь того, что части изображения начнут загружаться первыми, давая пользователю знать, что дальше будет что-то еще.
Изображения
В этом уроке мы рассмотрим, как работать со слоями в Фигме. Даже создание самого сложного дизайна состоит из стандартных фигур. В этом уроке вы сможете познакомиться с основными векторными объектами в Фигме, а именно прямоугольник, линия, линия со стрелкой, круг, треугольник, и звезда.
Можно создавать внутри одного и того же объекта и с теми же свойствами. Чтобы переключиться в режим прототипирования нажмите на вкладку справа «Prototype». В этом режиме вы можете создавать интерактивные прототипы, связи между элементами и фреймами, делать всплывающие окна, анимации и т.д. Это поможет оживить ваш проект в режиме презентации. Если хотите поделиться вашим проектом, то нажмите кнопку «Share» сверху, справа. Нажав на иконку комментариев, как показано на скриншоте выше, вы сможете просматривать чужие комментарии и добавлять свои.
Вставка изображений. Инструмент «Place image»
Эти элементы позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль макета и в случае необходимости изменить его. Удобный инструмент внутри Figma, который похож на артборды в Photoshop. По сути, фрейм — это отдельное полотно, внутри которого дизайнеры могут проектировать экраны приложений. Рассказываем, в чём преимущества Figma перед другими редакторами и почему ей стоит пользоваться.
Аналогов, конечно, много, но этот редактор определенно стоит уделенного ему внимания. Все установленные плагины можно посмотреть в одноименном разделе, перейдя в настройки профиля. Фигма поддерживает установку плагинов для оптимизации работы. Полную коллекцию можно посмотреть в разделе «Community» на главной странице, перейдя в раздел «Explore».
Что такое Figma: возможности и принципы работы
При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее). Уже зарегистрированным пользователям необходимо кликнуть по ссылке «Log in». В результате откроется немного другое поле, где вы сможете ввести данные и авторизоваться.
Можно выбрать столько кадров и слоев, сколько хотите. Доступно масштабирование по ширине, высоте или процентам. Благодаря векторам можно создавать сложные объекты намного быстрее, чем при рисовании с помощью традиционных инструментов. Мы увидели, как выполнять ряд наиболее популярных операций в редакторе.