webdonsk.ruКак в фигме сделать рамку телефона
Добавил пользователь Евгений Кузнецов Обновлено: 10.09.2024
На протяжении многих лет Sketch и Adobe были де-факто предпочтительными приложениями дизайнеров пользовательского интерфейса и пользовательского интерфейса. Но в последние несколько лет мы увидели, что на рынке появляется много новых претендентов. Среди них Figma выделяется по нескольким причинам. Компания недавно добавлен долгожданный плагин чтобы упростить жизнь своим пользователям. Мы выбрали одни из лучших плагинов Figma из списка ниже.
Работа дизайнера может быть утомительной без поддержки плагинов. Плагины Figma не всегда использовались. Кроме того, Figma работает с любой операционной системой, в которой работает веб-браузер, например Mac, Windows, ПК и т. Д.
Горячей темой Figma сейчас является поддержка бесплатных и премиальных плагинов, которые оказывают столь необходимую помощь в течение долгих часов разработки пользовательского интерфейса.
1. Unsplash
Это самоочевидно. Вместо того, чтобы тратить часы на поиск высококачественных бесплатных изображений в Интернете, вы можете выбрать плагин Unsplash для Figma и начать использовать изображения-макеты прямо с главного экрана Figma. Неудивительно, что у Unsplash такое большое количество загрузок в магазине плагинов.
2. Ролик с контентом
Большинство дизайнеров полагаются на Lorem Ipsum для генерации случайного текста для использования в макетах пользовательского интерфейса. Content Reel выводит опыт на новый уровень. Он позволяет генерировать случайный контент, такой как имя пользователя, даты, адрес, валюта, аватары, значки, изображения и т. Д., И он намного более полезен и эффективен, чем Lorem Ipsum.
3. Каркас
Мы знаем, что рынок полон каркасных решений, таких как Balsamiq, но если вы хотите быстро создать прототип в Figma, то плагин Wireframe вам просто необходим.
Каркас имеет список предварительно разработанных каркасов (шаблонов) для Интернета и мобильных устройств, разделенных на категории, которые можно добавить непосредственно на страницу Figma, щелкнув рамку. Все файлы являются компонентами Figma (SVG) и легко редактируются. Благодаря этому вы можете легко управлять всеми действиями по созданию каркасов и прототипов.
4. Иконизировать
Каждому дизайнеру нужны иконки для работы с UI-проектом. Вместо того, чтобы бесконечно искать их в Интернете, вы можете выбрать сторонний плагин, такой как Iconify, для реализации различных типов значков в проекте.
Iconify позволяет импортировать значки Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и многие другие значки (более 60 наборов значков, содержащих более 50 000 значков) документ Figma в виде векторных фигур.
5. Палитра изображений
6. Сюжет
Дизайнеры любят иллюстрации, не так ли? При разработке страницы приветствия для веб-сайта или приложения вам в основном потребуется использовать иллюстрацию, чтобы повлиять на нее.
Если вам нужна красивая иллюстрация, сделанная на заказ, вы можете импортировать и редактировать ее в соответствии с вашими потребностями с помощью плагина Stories by Freepik. Есть более 1000 бесплатных иллюстраций, которые могут вас побаловать.
7. Создатель логотипа
Ваш клиент просит создать собственный логотип, а вы не знаете, с чего начать? Плагин Logo Creator для Figma позволяет выбрать лучший логотип или создать его, используя разные компоненты. Вы можете создать красивый логотип, выбрав различные формы или лучший логотип из готовых коллекций из 300+ логотипов.
8. Графики
Добавление простых необработанных данных в ваш дизайн может сделать его мягким. Вы можете использовать диаграмму, чтобы сделать общий дизайн более привлекательным. Для этого мы рекомендуем Charts для плагина Figma.
Диаграммы позволяют создавать диаграммы, которые можно добавлять и редактировать в документе Figma. Выберите линейную, площадь, круговую, кольцевую, точечную или гистограмму. Каждая диаграмма имеет свой собственный набор конфигураций, таких как несколько точек, максимальные и минимальные значения.
9. Фигмодзи
Фигмоджи — забавный персонаж. Если ваша работа связана с эмодзи во время дизайнерских проектов, Figmoji — идеальный плагин для вас. Одним щелчком мыши вы можете внедрить смайлики прямо в свой проект пользовательского интерфейса. Как и ожидалось, плагин добавляет смайлики в формате SVG, поэтому у вас есть вся гибкость для их редактирования.
10. Map Maker
Часто дизайнерам приходится добавлять карту в свой дизайн. Затем они переходят к картам Google и извлекают данные вручную. Плагин Map Maker для Figma избавит нас от лишних хлопот. Map Maker позволяет быстро создавать индивидуальные карты. В настоящее время он поддерживает Google Maps и Mapbox.
11. Супер аккуратный
Выравнивание необходимо в каждом дизайнерском проекте. Абсолютно следует избегать простого перекоса. Super Tidy для Figma позволяет легко выравнивать, переименовывать и переупорядочивать кадры в зависимости от их положения на холсте. Super Tidy также переименовывает ваши рамки и меняет их порядок в списке слоев по их положению на холсте.
12. Вектор
Плагин Vectary 3D для Figma добавляет недостающее третье измерение в ваши 2D-проекты. Поместите свой дизайн Figma в предопределенный 3D-макет или свой собственный 3D-элемент. Установите желаемую перспективу в 3D и одним щелчком поместите результат в сцену. Это незаменимый плагин, особенно если вы хотите произвести впечатление на клиентов.
13. Предварительный просмотр шрифта
Грамотно созданная типографика в дизайне интерфейса делает его привлекательным для многих. Текстовый тип может создавать или разрушать интерфейс. Использование одной и той же типографики может навредить вашему дизайну. Вы можете использовать предварительный просмотр шрифта, чтобы избежать этого. Используя этот плагин, вы можете предварительно просмотреть свой текст в более чем 1000 стилях типографики.
Используйте Figma как профессионал
Плагины для программного обеспечения для дизайна пользовательского интерфейса похожи на расширения для браузера. Используя правильный набор плагинов, вы можете значительно улучшить свой рабочий процесс и производительность с Figma. Просмотрите список выше и сообщите нам, какие плагины вы установили, в комментариях ниже.
Что такое Figma
Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.
Возможности Figma
Создание прототипов
Отрисовка элементов интерфейса
Работа с векторными объектами
Создание блок-схем
Плюсы и минусы Figma
Перед началом использования сервиса, важно узнать о его сильных и слабых сторонах.
Не работает без интернета
Ограниченные возможности работы с текстом
В программе нельзя сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж
Чтобы начать самостоятельную работу нужна только регистрация в сервисе, все инструменты программы доступны сразу, также в бесплатной версии можно давать доступ на просмотр документа. Для совместной работы необходимо выбрать платный тариф
Нельзя добавить плагины
Нельзя настроить горячие клавиши
Основные инструменты Figma
Фреймы
Модульная сетка
Сетка — это линии и клетки, которые позволяют выравнивать и упорядочивать все объекты дизайна во фрейме. Сетки создаются через панель Grid Layout. В сервисе можно поменять цвет сетки, растянуть её или настроить нужный размер, в одном макете можно использовать неограниченное количество сеток.
Компоненты
Компоненты — это объекты пользовательского интерфейса, которым можно задавать общие стили и при необходимости быстро их изменять. Допустим, вы создали макет из 30 страниц, а заказчик попросил поменять шрифт в заголовках, чтобы не менять всё вручную, можно использовать компоненты и заменить шрифт лишь в одном заголовке, остальные изменятся автоматически.
Векторные формы
В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.
Изображения
В макет можно добавить любое изображение и начать работу с ним. Для этого нужно открыть панель File и использовать инструмент Place Image или просто перетащить нужные картинки с рабочего стола.
История версий
Все изменения, внесённые в документ, автоматически сохраняются в облаке. При совместном доступе можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Также всем версиям можно присвоить названия.
Кому пригодится Figma
Изначально программа создавалась для дизайнеров, но сейчас ей пользуются люди самых разных профессий. Рассказываем кому и как сервис помогает решать рабочие задачи.
Дизайнерам
Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.
Разработчикам
Блогерам
Smm-специалистам
Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры для ютуба, рекламу в инстаграме и др. А также создавать рекламные объявления на основе готовых шаблонов для фейсбука.
Менеджерам
Редакторам
Редакторы могут схематично отрисовывать иллюстрации к статьям и передавать их в работу дизайнерам, а также создавать диаграммы и блок-схемы для управления редакцией.
Начало работы в Figma
Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе
Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.
После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.
Так создаётся новый файл
После того как откроется рабочая область, создайте фрейм и задайте размер вашему будущему макету. Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов.
Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.
Как быстро освоить онлайн-сервис Figma
Срок обучения: 1 месяц
Стоимость обучения: бесплатно
На этом интенсиве вы всего за три дня научитесь работать с фреймом и сеткой, поймёте принципы работы с текстом и сможете создать свой первый дизайн: иконку или баннер. На интенсиве вы сможете пообщаться с другими участниками курса и получить обратную связь от преподавателей.
Срок обучения: 3 дня
Стоимость обучения: бесплатно
Срок обучения: 4 месяца
Стоимость обучения: 22 400 руб.
Коротко о главном
Для дизайнеров в Интернете представлено много программ, но именно работа в Figma особенно популярна. Это бесплатный сервис, который прост в установке, а в его интерфейсе разберется даже новичок. Подойдет не только для веб-разработчиков и дизайнеров, но и для маркетологов, чтобы создавать инфографику.
Сервис удобен тем, что над одним проектом может работать целая команда, а у ее руководителя есть возможность оставлять комментарии по тем или иным элементам. Таких общих работ хранить в Figma можно сколько угодно, но лишь только месяц. Если вас это не устраивает, можно подключить другой тариф. Цены и принцип работы в сервисе подробно описаны ниже в статье.
Возможности сервиса Figma
Онлайн-сервис Figma отлично подходит для тех, кто занимается интернет-маркетингом, дизайном интерфейсов и веб-разработкой ресурсов. Программа представляет собой графический редактор, в котором можно создавать макет приложения или сайта, детали интерфейса (кнопки, иконки и пр.), векторные иллюстрации. Прелесть сервиса и в том, что здесь можно работать в команде, обсуждая изменения и внося поправки. Программа доступна в браузере и в приложении, которое устанавливается на ПК.
Возможности сервиса Figma
Сервис пользуется успехом не просто так. От многих графических редакторов Figma отличается тем, что:
- Имеет бесплатные функции. Сервисом можно пользоваться, но ряд возможностей будет ограничен: например, количество макетов, время, в течение которого будут храниться проекты и прочее.
- Функционал встроенных компонентов. Например, вы сделали несколько макетов в одном стиле, но в последний момент решили изменить какую-то деталь, которая повторяется во всех них. В других редакторах эту деталь нужно менять вручную в каждом макете. В Figma работа будет упрощенной: если меняется что-то в стиле одного элемента, то меняются все элементы, созданные в этом стиле.
- Возможность интеграции с другими программами. Можно переносить макеты, например, из Sketch или Zeplin, без искажения графиков, изображений и шрифтов. Также можно подключиться к корпоративному мессенджеру Slack, пространству Confluence и т. д.
- Возможность работы в браузере или в приложении. Для работы в Figma можно использовать веб-формат или установленное приложение, которое можно скачать с официального сайта. Просто регистрируете профиль и начинаете работать.
- Возможность командной работы. Это одновременно и преимущество сервиса: совместная работа в едином артборде.
Ваш Путь в IT начинается здесь
Подробнее
У Figma есть и свои недостатки, хотя они не играют большой роли при правильном выстраивании рабочего процесса. Например, интерфейс сервиса не русифицирован. Также для работы с программой необходимо подключение к Интернету.
Системные требования Figma
Для работы в приложении нужно будет обратить внимание на параметры ОС. Но большинство ПК вполне совместимы с данной программой.
Figma становится все более полезной платформой для совместной работы. Так считает продуктовый дизайнер Deep Joshi, который регулярно пользуется плагинами инструмента. Он создал список ставших для него наиболее эффективными, а мы публикуем перевод рекомендаций дизайнера с приложенными ссылками.
Выбор дизайнеров:
Плагин Aninix для анимации интерфейсов у Figma появился в свободном доступе
Плагин Aninix для анимации интерфейсов у Figma украинского дизайнера Тони Пинкевича уже появился в свободном доступе.
Aninix – плагин для Figma, позволяющий создавать интерактивные прототипы и анимацию для промо видео и генерировать код снипетов для разработчиков.
Плагин Aninix
Цель плагина – связать систему дизайна и анимацию вместе. Все данные анимации хранятся непосредственно в кадрах Figma, поэтому все члены вашей команды будут иметь к ним доступ.
Ранее Тони Пинкевич поделился, какие сложности в анимации интерфейсов вдохновили разрабатывать плагин для Figma и как новый продукт поможет их решить.
1. Autoflow
Autoflow облегчает рисования схем и связей. Просто выберите два объекта, нажмите горячую клавишу и волшебная линия сразу появится между ними.
- Выделите два объекта.
- Правым кликом вызовите меню плагинов и найдите Autoflow.
- Сделайте это для всех экранов: если нажать комбинацию ??P, она запустит последний использован плагин.
2. Able — доступность без проблем
Able помогает дизайнерам позаботиться о доступности (accessibility) и требует минимум усилий. Откройте плагин и он автоматически сравнит контраст между двумя выбранными слоями. Можно не закрывать Able и при необходимости сравнивать контраст между различными слоями, каждый раз его запускать не нужно.
3. Remove BG
Remove BG (Remove background) автоматически удаляет фон из изображений в один клик — используя remove.bg API. Внимание: для этого вам нужно зарегистрироваться на remove.bg.
4. Figmotion
Figmotion — инструмент для создания анимации, разработанный специально для Figma. С ним не нужно обращаться к другим моушн-программ вроде Principle, Haiku или After Effects, все можно делать внутри.
Figmotion создан с учетом вебтехнологий и он делает процесс анимации для разработчиков существенно удобнее.
5. Isometric
С Isometric можно создавать изометрические слои автоматически, без настройки вручную. Как использовать: 1. Выберите слой. 2. Нажмите ПКМ и найдите Isometric. 3. Выберите нужную перспективу. Проект имеет открытый исходный код и распространяется под лицензией MIT (можно использовать бесплатно и без ограничений).
6. Content Reel
Если вам нужно заполнить макет контентом, Content Reel вставить текст, аватарки и иконки в ваш проект. Для этого выберите один или несколько слоев в файле, а затем выберите шаблон из Content Reel.
7. Rename It и Color Palettes
Rename It помогает организовать файлы в Figma, переименовывать группы слоев и фреймов.
Color Palettes
Предлагает большой список цветовых палитр, которые можно вставить в дизайн-проект. Также плагин будет полезен, если нужно найти код любимого цвета, номер или название палитры.
8. Component Cloner
Хотели когда-нибудь повторно использовать те же компоненты (не меняя оригинал) или сделать несколько их вариантов? В Component Cloner можно выбрать экземпляры, которые хотите переиспользовать, и они будут привязаны к новой копии оригинального компонента. Или можно просто скопировать компонент.
9. Unsplash
Добавляет красивые изображения с Unsplash сразу к вашему дизайн-проекта. Можно найти конкретное изображение или взять случайно — они все бесплатные и доступны для коммерческого или персонального использования.
10. Brands Colors
Ищет и подбирает цвета с палитры мировых брендов или программ, чтобы вы могли использовать их в своем дизайне.
11. Datavizer
Создает графики и диаграммы с вашими данными. Можно взять и случайный набор данных, если надо показать просто любую шкалу (например, добавить рандомный график на мокап). Если загрузить свои данные (в формате CSV или JSON), показатели можно настроить вручную.
12. Iconscout и Icon Resizer
С Iconscout можно добавлять в Figma качественные изображения. Среди функций этого плагина:
Icon Resizer изменяет и стандартизирует размер иконок, чтобы они соответствовали вашему дизайну. Гораздо удобнее работать, когда все иконки одинаковые по размеру и вписываются в квадрат. Выберите один или несколько фреймов, укажите размер изображений и ограничительной рамки. Готово!
13. Image Palette
Показывает палитру из 5 цветов на выбранном изображении. Внимание: плагин использует алгоритм медианного среза, он выделяет наиболее отличные цвета на картинке. Работает быстро, но может выдавать неидеальные результаты, особенно для малоцветовые изображений, векторной графики и тому подобное. Полученные цвета не всегда отвечать кода цветов на картинке.
14. Viewports
Проверьте, как адаптируется ваш дизайн для мобильных телефонов. Viewports показывает, как изменить размер фрейма, чтобы он правильно отображался на разных дисплеях. Сейчас плагин поддерживает устройства Google и Apple iPhone, ожидается поддержка Samsung и настольных версий.
15. Interplay
Interplay привязывается к репозитория вашей дизайн-системы, чтобы в Figma вы могли использовать код компонентов. С плагина вы можете скачать код, редактировать свойства (properties), изменять контент и импортировать компоненты в макет Figma. Interplay работает на лету и сохраняет связи, поэтому элементы вашего дизайна будут всегда синхронизироваться с рабочим кодом.
Читайте также: