📋Урок-практика 2. «Разбор и практика в Figma: создание главного экрана сайта»

Практический урок, где мы знакомимся с программой Figma сразу на практике по сборке главного экрана сайта! Включайте видео и повторяйте за тем, что я делаю, так будет намного легче – дизайн не из самых простых. Можете замедлять/ускорять его, самое главное, пишите, если у вас вдруг что-то не выходит, отправляйте свои вопросы/видео – я буду разбирать все прямо тут в комментариях, чтобы вы точно поняли (также вы можете писать мне в ЛС) 💖 Для удобства прикрепляю также ссылку урока на YouTube ✅ ⚠️Что обязательно нужно сделать перед уроком? 1. Зарегистрироваться в Figma (можно работать прямо в браузере, можно установить приложение на компьютер) 2. Перейти по этой ссылке (это будет ваш учебный файл после того, как вы его скопируете к себе) 3. В верхней части экрана, а именно в левом углу, будет название файла «Обучение по веб-дизайну (веб лаб.)» – кликаем на стрелочку справа от него и у вас появится выпадающий список – выбираем команду «Duplicate» Готово! Этот файл продублируется в ваши черновики (Drafts), и теперь вы сможете работать там (не переживайте – его видите только вы, а сам файл будет иметь пометку Copy в названии) ‼️Домашнее задание Необходимо повторить главный экран по моему уроку и прислать его на проверку (если у вас уже есть опыт, то вы можете сделать 2 версию главного экрана или вообще свою на базе нашего концепта) 1. Присылать его нужно мне в ЛС 2. В Figma, в правом верхнем углу у проекта нажимаем на синюю кнопку «Share» → и выбираем в появившемся окне кнопку «Copy link» → проверяйте доступ, чтобы был выбран пункт «Anyone → Can view» (иначе у меня не будет доступа) 3. Домашнее задание будет проверено примерно в течение 48 часов (все Д/з можно сдавать до 30 авгутса включительно) #бесплатник

Готовы ли AI-агенты к реальной работе дизайнера?🤷‍♂🤷‍♂🤷‍♂

Просишь Claude или GPT собрать экран, а в ответ получаешь набор компонентов, который потом все равно приходится переделывать руками. Цвета не из палитры, отступы не по сетке, у кнопок нет состояний. После пары таких попыток легко решить, что агенты пока не готовы к нормальной работе. Но тут есть нюанс: возможно, дело не только в самой модели, а в том, как мы ее используем. 😇 20 августа Pixel Perfect проведут бесплатный эфир: возьмут большую дизайн-систему банка и прямо в Figma попробуют собрать по ней новые экраны. Сначала попробуют собрать экраны без каких-либо настроек, а потом подготовят среду специально под эту задачу. И сравнят два результата. Заодно покажут, как дизайн-система попадает в среду, почему ее нельзя просто закинуть агенту целиком и как потом проверить результат. А еще посмотрят, где агент уже справляется сам, а где все-таки приходится вмешиваться руками. Все скиллы с эфира можно будет забрать и использовать в своих задачах, даже если большой дизайн-системы у вас нет. ↗20 августа, 18:00 мск. Эфир пройдет в телеграм канале, подписывайся!

В Figma появились новые настройки переноса текста: Pretty и Balance

Теперь не придется вручную расставлять переносы, чтобы заголовок выглядел аккуратно, а на последней строке абзаца не оставалось одно слово. В настройках текста появились два варианта: Balance делает строки примерно одинаковыми по длине. Подойдет для заголовков, подзаголовков, цитат и коротких подписей. Pretty сохраняет более естественный рисунок текста, но старается не оставлять одно слово на последней строке. Его удобнее использовать в описаниях, карточках и небольших абзацах.

Как сэкономить, работая дизайнером в эпоху подписок🤡

Особенно тем, кто живет в РФ, но остальным тоже будет полезно… 1. Виртуальная карта вместо зарубежной физической😎 Её проще и дешевле оформить, если нет возможности на иную, и не придётся больше обращаться к посредникам, чтобы оплатить нужную подписку (кстати, полезно не только для дизайна) 2. VPN можно сделать свой🔭 Есть способы сделать все самому – буквально с помощью GPT. Зато нет проблем с сервисами вроде Facebook, LinkedIn и Upwork, особенно если вы хотите работать и развиваться на зарубежном рынке. 3. Ищите альтернативные способы оплаты подписок, они есть💰 Figma и другие сервисы могут обходиться дешевле. Есть площадки, где стоимость подписки может отличаться в 2, а иногда и в 10 раз. Самое важное – читайте отзывы! (причины такой разницы в цене разные, так что да, такие лазейки есть) В общем, экономить на рабочих инструментах можно. Постремаюсь кого-либо рекламировать, но это все быстро пробивается и ищется🫂 Делаем 2 часть? #полезное
БЕСПЛАТНЫЙ КУРС ПО ДИЗАЙНУ 👇🏻
В общем, в комментах в ТТ под каждым роликом прилетают вопросы «Где искать клиентов», «Как научиться делать дизайн, если я прям полный ноль», «Что посмотреть» Ребят, сейчас не нужно покупать дорогущие обучения, можно бесплатно получить за 4 дня крепкую базу без нудной теории Бесплатные уроки здесь 👈 Что внутри: Освоишь бесплатную программу для дизайна Figma, соберешь 3 работы в портфолио (с анимацией), большой пак с шрифтами, графикой и рефами и вишенка на торте — личный куратор на весь курс с ОС, разбором домашних работ, опытный дизайнер, который поможет сделать первые шажки в профессию… Вам самое главное понять… Дизайн — это не какая-то вау магия для «особо творческих людей», это просто обычный навык, который может быстро освоить даже новичок и начать на нём делать первые 50-100 тысяч Если не сольешься сейчас, то буквально за неделю сделаешь первое портфолио и сможешь получить первые деньги и клиентов с дизайна 🔗 Ссылка на уроки (тыкай)
UI Table Builder
Удобный плагин для создания красивых таблиц в Figma Install
«СИМУЛЯТОР РАБОТЫ В ДИЗАЙН АГЕНТСТВЕ»
Залететь в интенсив не читая 🚀 Вы становитесь дизайнером, которому директор агентства дает крупного клиента. Это фарм-компания, которая выпускает новую линейку пасты для зубов и им нужен комплексный дизайн. 1️⃣ Карточки товаров для маркетплейсов 2️⃣ Презентация для мероприятия 3️⃣ Отчет для руководства Так начинается ваша миссия 😎 🚨 Симулятор длится 1 неделю – с 17 по 23 августа. 📍 Практические уроки: Figma, PowerPoint, нейронки 📍 3 эфира от основателей дизайн агентств 📍 3 задания с обратной связью 📍 Доступ к записям 6 месяцев 🎁 Именной сертификат о прохождении 💎💎💎 Лучшие студенты смогут попасть в агентство Марфа. Ребята ищут 2-3 человек Первые 500 мест отдаем за 990 рублей, потом цена растет постепенно до 5000 рублей. Купить доступ к интенсиву по лучшей цене ⬅️ Участвовать могут все! Программа адаптирована под новичков и опытных дизайнеров. Новички — выучат кучу практических фишек. Опытные — смогут сделать крутой кейс для портфолио и попасть на глаза основателю агентства. Даже если вы прошли Ниндзю и другие интенсивы, для вас будут новые приемы и креативные идеи. Купить доступ к симулятору ⬅️ Если будут проблемы с оплатой — пишите в нашего бота. Если есть вопросы по лагерю – пишите в комменты, на всё отвечу.
7 дней бесплатного обучения UX/UI-дизайну
Представь, каких результатов ты достигнешь под наставничеством дизайнеров с 9-летним опытом и кейсами от крупных брендов. Уже в первую неделю обучения ты освоишь Figma, сделаешь 5 дизайн-проектов и получишь стратегию роста в веб-дизайне с нуля до 2000$ в месяц. 👉 Запишись до 12 августа — участие бесплатно.
7 дней бесплатного обучения UX/UI-дизайну
Представь, каких результатов ты достигнешь под наставничеством дизайнеров с 9-летним опытом и кейсами от крупных брендов. Уже в первую неделю обучения ты освоишь Figma, сделаешь 5 дизайн-проектов и получишь стратегию роста в веб-дизайне с нуля до 2000$ в месяц. 👉 Запишись до 12 августа — участие бесплатно.
«СИМУЛЯТОР РАБОТЫ В ДИЗАЙН АГЕНТСТВЕ»
Залететь в интенсив не читая 🚀 Вы становитесь дизайнером, которому директор агентства дает крупного клиента. Это фарм-компания, которая выпускает новую линейку пасты для зубов и им нужен комплексный дизайн. 1️⃣ Карточки товаров для маркетплейсов 2️⃣ Презентация для мероприятия 3️⃣ Отчет для руководства Так начинается ваша миссия 😎 🚨 Симулятор длится 1 неделю – с 17 по 23 августа. 📍 Практические уроки: Figma, PowerPoint, нейронки 📍 3 эфира от основателей дизайн агентств 📍 3 задания с обратной связью 📍 Доступ к записям 6 месяцев 🎁 Именной сертификат о прохождении 💎💎💎 Лучшие студенты смогут попасть в агентство Марфа. Ребята ищут 2-3 человек Первые 500 мест отдаем за 990 рублей, потом цена растет постепенно до 5000 рублей. Купить доступ к интенсиву по лучшей цене ⬅️ Участвовать могут все! Программа адаптирована под новичков и опытных дизайнеров. Новички — выучат кучу практических фишек. Опытные — смогут сделать крутой кейс для портфолио и попасть на глаза основателю агентства. Даже если вы прошли Ниндзю и другие интенсивы, для вас будут новые приемы и креативные идеи. Купить доступ к симулятору ⬅️ Если будут проблемы с оплатой — пишите в нашего бота. Если есть вопросы по лагерю – пишите в комменты, на всё отвечу.
Mood - Moodboard Template — готовое решение для быстрого создания презентаций в Figma, включает в себя 40 различных слайдов.
Виджет «Checklist» by Aleksei Sushkov Виджет для Figma и FigJam для создания удобного чеклиста.
Little Doodles — Набор из 72 двух нарисованных от руки каракуль для использования в Figma
Как настроить масштабирование и перемещение камеры вслед за анимацией обводки в Figma Motion.
Закончил версию портфолио 1.0: задизайнил макеты в Figma → завайбкодил в Cursor c моделькой по дефолту Composer 2.5 Fast и с помощью того же Cursor за пару команд залил на GitHub. Ещё подключил простенькую аналитику кстати, тоже в пару команд — кайф.
Определяясь, в чём вайбкодить под свои требования (pixel-perfect, внимание к сетке, отступам и типографике), спросил совета у Gemini, он рекомендовал Cursor. В апреле пробовал ту же задачу с Claude, результат тогда «не зашёл», поэтому появилось сразу два аргумента в пользу Cursor. Общее ощущение напомнило работу с живым фронтендером, что меня реально порадовало: пишешь тз, спеки, описываешь задачу, даёшь гайды и макеты. Получаешь неидеальный макет, но зато где-то додуманный в правильном и нужном русле, а где-то нет и начинаешь точечно править, постепенно приходя к нужному результату. Прям вспомнил, как верстали сайты в 2000-х по макетам из Фотошопа, вот времена то были 😄 Что Cursor сделал круто: ✅ Интегрировал скрипт мобильного меню, который я не успел ему описать в ТЗ, а он додумал его сам, попав в стиль дизайна и даже добавил плавную анимацию раскрытия; ✅ С пары слов понял и добавил мобильную галерею с горизонтальным скроллом; ✅ Делал всё точь-в-точь по описанию там, где оно было, без самодеятельности. Что было НЕ круто: ❌ Border-radius, spacers и margins он никак не хотел собирать в едином ключе на всех страницах, но с пятой попытки сделал (скорее всего я криво напромтил, но в других местах он меня отлично понимал). Попутно, спросил у GPT, может надо было выбрать что-то вместо Cursor и тот посоветовал Claude. Мне пока ближе Cursor, буду экспериментировать ещё. Портфель пока не хочу показывать, хочу ещё допилить кое-что, прастити 😊 🌊🌊
Школа дизайна «Щелочь» х «ОАО»
Подготовили для вас мета-образование Наш курс подходит для каждого! ☠️🤍🤍🤍☠️* Узнать больше Метакурс — это проводник в мир создания современного цифрового визуала и контента Кому подходит: • Сммщикам и админам каналов. • Совсем новичкам, без умений и опыта. • Дизайнерам с базовыми навыками. • Людям запускающим свой бренд. Что даёт: • За полтора месяца вы научитесь пользоваться передовыми нейросетями от бота Хромика до Recraft'a, и на базовом уровне освоите Illustrator, Photoshop, TouchDesigner, Ableton, Blender 3D, After Effects, CapCut, Figma. • Погрузимся в смежные сферы, научимся комбинировать подходы для создания комплексного мета-визуала. • Взаимодействие с сильным преподавательским составом • Лучших заберут на стажировку в ОАО/Щелочь • Новые связи, знакомства, умения. • Предмет «униформа ученика» • Лучший VPN на год Приглашенные звездные лекторы: Вова Аюев — Арт-директор и основатель студии Sasha™. Лидировал дизайн-команды в бигтехе. Преподаватель НИУ ВШЭ, BBE, Центрального университета. Работал с Adidas, Coca-Cola, Yandex, Alfa, Beeline, Okko, Кинопоиск, Manizha, Нурланом Сабуровым и другими. На лекции разберем, как оформление личного медиа-канала может быть продолжением идентичности дизайнера. Поговорим о том, как найти собственный визуальный язык и сделать его частью личного бренда. Владимир Лифанов — Дизайнер-некромодернист, основатель агентства Супрематика, #1 в рейтинге АКАР в сегменте «Брендинг». Создаёт проекты пикселями, рисует картины красками, пишет тексты буквами и выступает словами. На лекции разберём, что такое символ, какое место он занимает в айдентике, как появился термин «брендинг» и что вообще такое дизайн. Также обсудим, чем ребрендинг отличается от рестайлинга и зачем бизнесу важно это понимать. Финальный проект/портфолио: • Полноценное оформление вашего телеграм-канала с применением всех вышеперечисленных способов создания современного аудио-визуального контента. ОАО «Образовательная программа» Возможна оплата частями METACOURSE 3.0 22 222 RUB 🖱 33 333 RUB 🖤 Щелочь, ОАО
В Figma появились вложенные папки.
Теперь папки можно создавать внутри других папок, выстраивая многоуровневую структуру для файлов и проектов. Вместе с этим Figma обновила логику шаринга и прав доступа для такой структуры. Функцию уже начали раскатывать, в течение нескольких недель она станет доступна всем пользователям.
Делаем скругления углов правильно в Figma by graphicschool_unid
В этом видео вам расскажут о том, как правильно рассчитать радиус скруглений. #figma #туториал
7 дней бесплатного обучения UX/UI-дизайну
Представь, каких результатов ты достигнешь под наставничеством дизайнеров с 9-летним опытом и кейсами от крупных брендов. Уже в первую неделю обучения ты освоишь Figma, сделаешь 5 дизайн-проектов и получишь стратегию роста в веб-дизайне с нуля до 2000$ в месяц. 👉 Запишись до 12 августа — участие бесплатно.
7 дней бесплатного обучения UX/UI-дизайну
Представь, каких результатов ты достигнешь под наставничеством дизайнеров с 9-летним опытом и кейсами от крупных брендов. Уже в первую неделю обучения ты освоишь Figma, сделаешь 5 дизайн-проектов и получишь стратегию роста в веб-дизайне с нуля до 2000$ в месяц. 👉 Запишись до 12 августа — участие бесплатно.