Как сделать карточку товара в фигма

Добавил пользователь Владимир З.
Обновлено: 05.10.2024

Так же одним из преимуществ Figma то, что она условно-бесплатна. Есть free версия, возможностей которой вполне хватает дизайнеру.

Ссылку на проект можно передать другим людям и самое главное разработчику. Он сам сможет смотреть все размеры, цвета и шрифты. А самое главное он сможет самостоятельно оттуда все выгружать.

Как выгружать объекты из Figma.

Для этого выделяем наш объект, справа жмем Export, выбираем формат экспорта для изображения JPG или PNG (для экспорта векторного объекта выбираем SVG), далее жмем кнопку Export и сохраняем куда надо наш файл.

skrin01

Как поделиться ссылкой на проект в Figma.

Шаг №1. Жмем кнопку Share

skrin02

Шаг №2. Жмем Copy link, ссылка скопирована.

skrin03

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

skrin04

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

skrin05

Так же всегда можно следить, что человек сейчас делает или смотрит в вашем проекте.

skrin06

В Figma есть очень удобная функция выравнивания объектов относительно друг друга. Допустим у нас есть несколько объектов и мы хотим разместить их ровно. Для этого выделяем объекты, нажимаем Tidy Up

skrin07

skrin08

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

skrin09

skrin10

Если вам нужно много изображений одного размера

Работа с изображениями в Figma.

В Фигме удобно работать с изображениями. Их можно вставлять в нужный нам размер и вставляем нужное нам изображение.

skrin11

Можем выбрать каким способом будет размещено наше изображение (залито).

skrin12

Fill – все пространство фигуры заполняется изображением.

Fit – изображение вписывается в данную фигуру.

Tile – здесь изображение заполняет фигуру как плитка.

Crop – в этом режиме можно настроить как будет располагаться изображение в фигуре.

skrin13

Синие засечки определяют границы изображения, их можно менять. Изображение можно растягивать и сжимать, двигать в самом заданном пространстве.

Заключение.

Это далеко не все на что способна Figma. Как видим, в не есть много возможностей как работы с изображениями, векторами. Легко и удобно создавать прототип и в последующем дизайн сайта. И самое главное легко передавать в разработку.


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


Шаблон Social Media Kit для Figma

Отличный набор бесплатных шаблонов социальных сетей: Behance, Facebook, YouTube, Figma Community, Linkedin, Open Graph, Zoom и Twitter. В шаблонах указаны все размеры используемых изображений. Я думаю многим будет полезен этот файл. Забирайте 😉

147 раз скачали


Шаблон Brand Manual для Figma

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

129 раз скачали


Шаблон страницы оплаты iBANK для Figma

Бесплатный шаблон страницы оплаты заказа iBANK для Figma, который выполнен автором Caddiesoft очень качественно, в стиле минимализма и в нескольких цветовых решениях: тёмный и светлый шаблоны.

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

  1. Плагины по работе с графикой
  2. Плагины для генерирования контента
  3. Плагины для анимации
  4. Плагины по наведению порядка в проекте

Blobs и Get Waves

plugin плагин фигма figma svg фон

Blobs позволяет нам делать простые абстрактные фоны в виде клякс. А Get Waves позволяет генерировать разные волны, иногда используем для создания графиков.

Image Tracer

plugin плагин фигма figma svg растр изображение вектор

Color Kit

Этот плагин позволяет сгенерировать темные или светлые оттенки нужного цвета с выбором шага. Помогает нам при создании UI кита для проекта.

Webgradients и uiGradients

plugin плагин фигма figma цвет color градиент gradient библиотека library

TinyImage Compressor

plugin плагин фигма figma изображение image сжать экспорт export

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

Image Palette

plugin плагин фигма figma palette палитра color цвет

Плагин Image Palette создаёт цветовую палитру на основе выбранного загруженного изображения, можно использовать также на логотипах.

Stark и Contrast

contrast color plugin плагин фигма figma цвет

Remove BG

plugin плагин фигма figma фон fon image

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

Isometric

plugin плагин фигма figma isometric изометрия

Плагины для генерирования контента

Chart и Charts

plugin плагин фигма figma диаграммы charts

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

Figmoji

plugin плагин фигма figma эмоджи emoji

Iconify

plugin плагин фигма figma эмоджи emoji icon пиктограммы иконки

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

Unsplash

Unsplash - это большая библиотека фотографий, с помощью которой можно быстро найти и добавить фотографию прямо в проект.

Mapsicle и Map Maker

plugin плагин фигма figma map карта

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

Table Generator

plugin плагин фигма figma таблицы tables

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

Content Reel

С помощью этого плагина можно быстро заполнить сайт контентом. Например заполнить имя, фамилию, телефон, время и дату, быстро добавить аватар и тд… Один момент весь контент на английском.

Chroma

Теперь можно добавить цвет в цветовую палитру в один клик. Вам просто надо выбрать нужный объект с цветом и запустить плагин. Цвет появится в библиотеке стилей с названием выбранного объекта.

Wire Box

plugin плагин фигма figma ‪вайфрейм warframe

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

Плагины для анимации

GiffyCanvas

plugin плагин фигма figma ‪анимация animation gif

GiffyCanvas позволяет быстро создать gif внутри Figma. Нам просто надо выбрать 2 и более макетов, поставить время интервала и количество циклов.

LottieFiles

plugin плагин фигма figma ‪анимация animation gif

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

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

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

Содержание

Autoflow

Плагин позволяет создавать связи кривыми между объектами, артбордами и расположением в 2 клика. С этим инструментом легко проиллюстрировать связи между экранами и схемы переходов от страницы к странице

Avatars

Avatars

С помощью плагина вы можете генерировать аватарки вымышленных людей, в заданную дизайнером область (прямоугольник, звезда, многоугольник и т.д.). Плагин поддерживает множественную загрузку.

BeatFlyer Lite

BeatFlyer Lite

Этот плагин позволяет дизайнеру создать анимационные эффекты всего за пару кликов мыши. В анимацию можно добавлять сколько угодно эффектов.

Blend

Blend.jpg

Этот инструмент помогает создать логотипы и паттерны (фоны) на основе экземпляра фигуры.

Blobs

Blobs

Bullets

image005.jpg

Редко, когда макет обходится без создания списков. Плагин Bullets позволяет создать стильные маркированные списки. Создавайте стили, сохраняйте их в Figma и используйте их в рамках работы над всем проектом.

Chart

image007.jpg

Плагин Chart позволяет создавать графики разнообразных форм. Работает как с рандомными данными, так и с данными клиента. Поддерживается копипаста из Google Sheet, Excel, Numbers, что значительно уменьшает время на обработку данных.

Charts

Charts

Плагин Charts позволяет создавать линейные, круговые, кольцевые и многие другие диаграммы. Является неким аналогом Chart, так что стоит решить, каким плагином вам пользоваться удобнее.

Chroma

image009.jpg

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

Coda for Figma

image010.jpg

С помощью этого плагина, вы сможете заполнять макеты данными из Wikipedia, Gmail, Github, Jira и т.д.

Color Kit

Color Kit

С помощью плагина Color Kit можно генерировать оттенки выбранного цвета от тёмных к светлым. Раннее дизайнерам требовалось использовать сторонние программы и приложения. Теперь получить 50 оттенков синего можно непосредственно в Figma.

Content Buddy

Content Buddy

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

Content Reel

Design Lint

Design System Organizer

Многие дизайнеры знакомы с ситуацией, когда после сдачи макета, разработчики находят расхождения – несоответствие цветов, шрифтов, заливки и т.д. Design Lint избавляет дизайнера от таких ошибок. Он проверяет макет полностью и автоматически исправляет несоответствия. Инструмент работает динамически и учитывает при проверке уже внесённые дизайнером исправления.

Плагин позволяет работать над макетом, не зацикливаясь на ошибках и мелких помарках.

Design System Organizer

Dot Grid

Dot Grid

Плагин для тех, кто работает с сетками. С его помощью, можно украсить точечную сетку согласно выбранным параметрам (ширина, длина, цвет, разрывы). Dot Grid поможет заполнить пустоту ненавязчивым привлекательным элементом.

Figmoji

Figmoji

С помощью плагина Figmoji можно добавлять различные Эмодзи в формате svg.

Figmotion

Figmotion

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

Font Scale

Font Scale

Get Waves

image018.jpg

С помощью плагина Get Waves вы сможете создавать собственные эффекты волн.

GiffyCanvas

Без этого плагина, дизайнеру приходится создавать изображения с расширением GIF в отдельной программе, а после загружать её в прототип. Плагин GiffyCanvas позволяет создать GIF прямо в Figma. Нужно только загрузить изображения, из которых должна получится гифка, и прописать чёткие параметры.

Humaaans for Figma

Humaaans for Figma

Добавив плагин Humaaans for Figma, вы получаете возможность пользоваться огромной библиотекой с иллюстрациями людей. С этими иллюстрациями можно работать прямо в Figma, комбинируя, создавая новые образы. Плагин позволяет менять причёски и одежду, добавлять разное окружение.

Image tracer

Image tracer

Плагин Image tracer поможет вам преобразовать растровые чёрно-белые изображения в кривые, чтобы получить возможность внести изменения. Подходит для тех, кто часто теряет исходники логотипов и иконок.

Isometric

Isometric

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

LilGrid

LilGrid

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

LottieFiles

LottieFiles

Плагин LottieFiles позволяет украсить прототип анимациями. Плагин позволяет создавать собственные анимации или использовать готовые из библиотеки. Плагин позволяет вставлять анимационные фреймы как высококачественные SVG.

Mapsicle

Mapsicle

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

Material Palette

Material Palette

Многие дизайнеры используют инструмент Material Design для создания палитр. Теперь создавать палитры можно прямо в Figma, экономя время и силы. Сейчас в плагине три типа палитр: True monochrome, Monochrome и Material.

Movie Posters

Movie Posters

Palette

Palette

Status

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

Table Paste

Table Paste

Table Paste – ещё один табличный плагин, который позволяет перенести данные из Excel в стилизованные таблицы в Figma. Работать с ним достаточно просто – нужно создать свой стиль таблицы, а затем переносить данные из Excel, они автоматически стилизуются.

Themer

Themer

TinyImage Compressor

TinyImage Compressor

Плагин TinyImage Compressor позволяет экспортировать ваши файлы в Figma и сжать их размер без потери качества. Плагин оптимизирует JPEG, а также PNG без фона, автоматически преобразует множественную загрузку в ZIP-папку. Правда у плагина есть ограничение на сжатие 15 файлов бесплатно, после придётся приобрести лицензию, но многие дизайнеры отмечают, что плагин сжимает файлы на 90% лучше, чем встроенные инструменты Figma.

Translate

Translate

Плагин Translate помогает автоматически перевести интерфейс на выбранный язык. Пока количество языков ограничено, но у расширения огромный потенциал.

Tumble

Tumble

Unsplash

Unsplash

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

Vector Maps

Vector Maps

С помощью Vector Maps можно загрузить в макеты векторные карты. Для выбора страны или региона достаточно ввести название в поиск или выбрать на карте. Карта импортируется в Figma в виде отдельного фрейма.

Webgradients

Webgradients

В плагине Webgradients встроенный фильтр позволяет выбрать сочетания цветов для создания градиентов. Созданные градиенты можно добавить в избранное, чтобы, работая над разными страницами одного макета, экономить время на подборе.

Wire Box

Wire Box

Плагин Wire Box позволяет преобразовать макет высокой точности в варфреймы, помогая сосредоточиться на UX, а не на UI. Конечно, работать в системах hi-fi быстрее и проще, но иногда требуется вернуться в lo-fi. Изменение цвета прототипа на навязчивый розовый показывает, что прототип уже в варфрейме.

Вывод

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

Читайте также: