Как сделать карточку клуба в фигме
Предобучение по курсу «Дизайнер карточек для маркетплейсов»
Второй урок. Теория
Практический урок «возьми и повтори»:
рисуем картинку в бесплатном онлайн-редакторе вместе с преподавателем
Сегодня вы сами зарегистрируетесь в бесплатном графическом онлайн-редакторе и нарисуете свою первую карточку вместе с действующим дизайнером Екатериной Каюмовой.
Перед практическим уроком посмотрите, как собирается карточка товара.
В этом видео на примере одного из товаров Екатерина покажет, как с нуля собирается карточка для маркетплейса Wildberries. Пересядьте за компьютер, чтобы рассмотреть все действия.
Вы узнаете из этого видео:
- О пяти ключевых действий, которые вы научитесь делать в бесплатном онлайн-редакторе Фигма
- Как сочетать элементы в карточке товара
- Как сделать карточку визуально живой и интересной
- Какую информацию важно располагать на картинке
Дальше вы сами соберете свою первую картинку в Фигме по примеру.
Переходите по кнопке и получите видео-инструкцию и набор файлов для практики.
Хардкорные карточки на Auto Layout – Figma-компоненты, часть вторая
Продолжаем оптимизировать UI-kit и дизайн-систему необычными способами. В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки.
Всё из статьи упаковано в этом Figma-проекте, тыкайтесь на здоровье. А пока вот краткое превью, как работают карточки:
Как видишь, всё работает внутри одного scroll-блока и нам не нужно множество компонентов Scroll Block/Small, Medium, Horizontal и так далее, а размеры картинок у нас и так должны быть в ките, если ты добрался до систематизации размеров изображений, конечно.
Все изображения можно менять через инстансы, а не удаление/проявление слоёв, значит наш проект будет в разы меньше весить и не будет лагать (особенно актуально для больших проектов).
Прежде чем у меня получился гибкий и лёгкий в использовании компонент, я потратил не одну попытку, а весь секрет карточки на auto layout оказался в одном НЕ auto layout слое, вот так вот.
Чтобы менять размер изображения в auto layout через instanse и не потерять саму заливку изображения, нужно добавить отдельный обычный слой внутрь него, который и будет отвечать за размер карточки.
Позже оказалось, что этот слой не останется пустышкой, внутрь него можно положить различные контролы (например, таймер для видео) и обводку, чтобы белые карточки имели чёткие границы, если тебе это нужно, конечно.
После того, как мы разобрались с изображениями, просто засовываем один из вариантов картинок и слой c заголовком и подзаголовком в один auto layout компонент. Для текстового слоя включите режим Stretch left and right, чтобы при смене размера изображения текстовый слой тоже расширялся или сужался до нужного размера автоматически.
Теперь без всяких извращений можешь использовать готовую карточку где угодно, а сменять изображение по Ctrl + нажатие и смена инстанса на нужный, всё легко и просто.
На этом всё. Рассказать об этой карточке, оказалось, намного проще, чем к ней прийти, обычно наоборот. Поэтому пробуйте и тыкайтесь в этом Figma-проекте, если будут какие-нибудь предложения, допиливайте и оставляйте ссылки в комментариях. Туда же пишите вопросы и пожелания, обсудим.
А если хочется ещё хардкорных статей по компонентам и дизайн-системам, залетайте в мой Telegram-канал 😉
Где ты был месяц назад.
Я месяц назад был в Москве, а вы?)
Разве самоизоляции тогда не было? По-моему мы уже по домам сидели))
Тире, минус или дефис?)
там был коммент, что не очень понятно зачем 2 раза оборачивать в автолайаут, но потом понял на больших размерах)
но не кажется, что это несколько оверкилл и проще всё же создавать определенные пресеты каруселей/ячеек?
Возможно, это разные подходы к формированию процесса создания дизайна интерфейсов, у каждого свои плюсы и минусы: с одной стороны моими способом кажется сложнее пользоваться, но я постарался сделать такую систему, что сменить карточки в пресете можно за один клик, а сэкономленное место в облаке фигмы поможет сохранить нервы, когда проект просто вырубится из-за большого количества синхронизируемых компонентов. У нашей команды недавно случился такой трабл и сейчас поддержка фигмы просто восстанавливает нам проект своими силами, поэтому сейчас я пытаюсь выжать максимум из каждого слоя и упаковать всё в один дополнительный контейнер вместо разделения на несколько компонентов)
КАК ДЕЛАТЬ ИНФОГРАФИКУ В FIGMA
Для создания инфографики на платформе Figma вам нужно создать новый файл и выбрать нужные размеры для дизайна. Вы также можете выбрать шаблон инфографики, чтобы упростить процесс создания. Следующим шагом будет выбор подходящих элементов дизайна, таких как иконки, графики, визуальные привлекательные линии и т.д.
Вы можете использовать Figma для создания интерактивных графиков и диаграмм, которые могут быть связаны с вашими данными. Для этого, вы можете использовать плагины для интеграции таблиц Google Sheets, которые обновляются в режиме реального времени. Это помогает сохранять данные графика актуальными, даже если их исходные значения изменяются.
Создавая инфографику в Figma, учитывайте, что вы должны оставлять место для текста и дополнительной информации. Оставляйте предполагаемые графики и текстовые блоки пустыми до тех пор, пока вы не будете уверены в конечном результате. Также важно не перегружать дизайн информацией и показывать только основную информацию.
Чтобы сделать графический элемент более интерактивным или анимированным, вы можете использовать штатные функции Figma или использовать плагины, доступные в магазине приложений. Штатные функции позволяют изменять формы и размеры элементов на диаграмме в режиме реального времени. Плагины помогают улучшить функциональность и подключить множество популярных инструментов.
Как сделать дизайн карточки товара на Wildberries. Урок в Figma
Дизайн сложной инфографики в Figma
Урок в Figma — Инфографика — 4 минуты урок
Midjourney создал дизайн карточки для Wildberries. Как использовать нейросеть в реальных проектах.
Рисуем дизайн 4 карточек AirPods 2 для Ozon, Wildberries в Figma
ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ НА ФРИЛАНСЕ LIVE / Дизайн карточки для Wildberries в FIGMA
Как сделать визитку в Figma
Начнем с того, что Figma даже не нужно устанавливать. Можно открыть веб-версию в браузере и работать в ней. В левом верхнем углу у вас будет три вкладки:
- Recents (Недавние);
- Drafts (Черновики);
- Community (Сообщество).
Пошаговая инструкция как сделать визитку в графическом редакторе Figma с указанием размеров в пикселях:
-
Создание файла
Чтобы создать новый файл, нужно нажать Drafts → + → New design file.
Откроется пустая рабочая область, и можно сразу назвать ее «Визитка», чтобы потом не запутаться в проектах. Стандартное имя новых файлов в Figma — Untitled (то есть «Без названия»). Поменять его можно, кликнув на слово Untitled в верхнем черном меню:
Для начала нужно задать прямоугольную форму визитки с помощью инструмента Shape tools (Формы). В левом верхнем углу найдите иконку, которая выглядит как квадрат. В выпадающем меню будет несколько форм, но нам нужен Rectangle (Прямоугольник).
Еще можно использовать горячие клавиши, они подписаны в меню напротив каждого элемента. У прямоугольника горячая клавиша R (потому что это первая буква в слове Rectangle).
Нажимаем R, и можно рисовать основу визитки. Нужно зажать левую кнопку мыши, потянуть и создать произвольную форму. Слева сразу появится вкладка со слоями, а справа будут параметры элемента.
Нужно зажать левую кнопку мыши, потянуть и создать произвольную форму. Слева сразу появится вкладка со слоями, а справа будут параметры элемента. Стандартный размер визитки — 90 х 50 см или 1063 х 591 пиксель, поэтому нужно подогнать нашу фигуру под эти параметры. Размер объекта в Figma можно изменить, если потянуть за угол или за одну из сторон.
Параметры также можно менять в панели инструментов справа и вручную ввести высоту и ширину визитки — 1063 х 591 пиксель.
Цвет фигуры тоже меняется в настройках — во вкладке Fill (Заполнение). Для первой визитки давайте выберем классическое сочетание белого фона и черного текста:
Имя, должность и другую текстовую информацию мы добавим с помощью элемента Text (здесь перевод, наверное, не нужен) в той же панели инструментов.
Для текста тоже есть горячая клавиша T, которую легко запомнить по первой букве в слове Text.
Внутри прямоугольника создаем фрейм для текста. В нем появится курсор, и можно будет набирать слова на клавиатуре или просто вставлять данные с помощью Ctrl + V. В меню справа будут настройки в блоке Text, там можно выбрать шрифт, начертание (обычное, жирное или курсив) и кегль, то есть размер букв.
Таким же образом с помощью инструмента Text добавляем все нужные данные:
— название компании;
— должность;
— номер телефона;
— адрес электронной почты;
— профиль в Telegram.
Figma подскажет, как выровнять все элементы между собой и сохранить пропорции. Размер интервалов обозначается красными стрелками:
Затем остается добавить логотип компании и по желанию — иконки для контактных данных.
Картинки в Figma добавляются несколькими способами, и все они простые:
перетащить изображение из папки на компьютере в рабочую область;
скопировать изображение из папки и вставить и с помощью Ctrl + V;
скопировать картинку прямо из браузера и вставить с помощью Ctrl + V.
Менять размер изображения можно так же, как размер фигур, — растягивать его курсором или задавать параметры в настройках справа.
Если захочется добавить иконки, можно найти подходящие и с открытой лицензией, например на ресурсе Freepik. Важно, чтобы они были из одного набора, потому что разные иконки будут создавать визуальный шум визитки и перетягивать на себя внимание.
Готовую визитку сохраняем через настройки справа. В разделе Export нужно выбрать формат:
— PNG;
— JPG;
— SVG;
— PDF.
Потом нажимаем на кнопку Export <Название файла>, и визитка сохранится на компьютере в выбранном формате.