Как собрать UI/UX-портфолио в Figma: пошаговый гайд

Если вы рассылаете отклики на дизайн-вакансии и получаете тишину — скорее всего, дело не в навыках. А в портфолио. Рекрутер тратит на него от 30 секунд до двух минут. За это время нужно показать не умение украшать, а способность думать как дизайнер.

Хорошая новость: Figma подходит для этого лучше всего. Это не просто инструмент для отрисовки интерфейсов, а полноценная платформа для создания, хостинга и прототипирования портфолио. Любой может подвинуть кнопку на три пикселя. Ценность — в обосновании решений. Вот как это сделать.

Почему портфолио важнее резюме

Резюме рассказывает, что вы делали. Портфолио показывает, как вы мыслите. В UI/UX мышление и есть продукт. Хайринг-менеджеры смотрят не на то, какие красивые у вас экраны, а на то, можете ли вы объяснить, какую проблему решали, для кого, почему выбрали именно такое решение и что бы сделали иначе.

Если портфолио — просто галерея скриншотов без контекста, это книга, из которой вырвали все страницы, оставив только обложку.

Как собрать портфолио в Figma: пять шагов

Шаг 1. Выберите правильные проекты

Не пихайте в портфолио всё подряд. Пять-десять слабых проектов не сделают вас сильнее. Лучше три-пять глубоких кейсов, каждый — с демонстрацией отдельного навыка. Например:

• исследование и поиск проблемы;
• аккуратный UI-крафт;
• работа с ограничениями (доступность, дизайн-система);
• коллаборация с другими специалистами.

Нет реальных клиентских проектов? Сделайте редизайн приложения, которым пользуетесь каждый день и о котором у вас есть собственное мнение. Рекрутеры отличают любопытство от работы «лишь бы в портфолио».

Шаг 2. Стройте кейс как историю

Сначала проблема, потом исследование, затем процесс: скетчи, вайрфреймы, итерации. Не пропускайте «грязную середину» — она самая убедительная. И только потом финальное решение, объяснённое с намерением, а не просто показанное. В конце — реальные метрики или честная рефлексия.

Заметьте: сами визуалы появляются ближе к концу. Всё до них — мышление. Это и отличает портфолио, которое зовут на интервью, от того, которое листают дальше.

Шаг 3. Используйте Figma как профессиональная команда

Самоучки часто рисуют в Figma, но не работают в ней так, как это делают в реальных продуктовых командах. Дизайн-лиды видят это с первого взгляда. Вот что сразу повышает уровень:

• компоненты и варианты вместо скопированных слоёв;
• осмысленные имена слоёв — никаких «Frame 47»;
• auto layout — проверка на понимание адаптивности;
• рабочий прототип, даже простой, показывающий поток;
• чистая структура страниц: обложка, исследование, вайрфреймы, финальный UI, прототип.

Эти мелочи — маркер того, что вы реально работали с продуктом, а не просто открывали Figma.

Шаг 4. Сделайте портфолио продуктом

Ваше портфолио — это не контейнер для работ, а отдельная работа. Вы проектируете опыт для усталого рекрутера, просматривающего десятки портфолио за раз. Что работает:

• короткое интро без дежурного «я страстный дизайнер»;
• кейсы, которые можно просмотреть за две минуты, но с глубиной для тех, кто задержится;
• единая типографика и отступы на всех страницах;
• видимая ссылка на резюме и контакты.

Собрать можно прямо в Figma и экспортировать, через Figma Sites, Webflow или Framer. Инструмент не важен — важна ясность истории.

Шаг 5. Получите обратную связь до публикации

Поделитесь портфолио в Figma-сообществах, дизайн-чатах в Discord или со знакомыми дизайнерами. Просите жёсткой критики, а не комплиментов. Частая претензия новичкам: «слишком много визуала, мало решений». Услышали это — примите всерьёз, потому что почти всегда это правда.

Ошибки, которые убивают портфолио

• Слишком много проектов без глубины. Десять поверхностных проигрывают трём глубоким.
• Нет объяснения компромиссов. Дизайн всегда про выбор, и если кейс выглядит идеальным от начала до конца — ему не верят.
• Копирование д-стиля с Dribbble без функциональной логики.
• Игнор мобильной версии и доступности. Достаточно одного упоминания, чтобы показать зрелость.
• Резкий обрыв истории. Не заканчивайте на «и я нарисовал финальный экран». Расскажите, чему научились, что бы изменили и какой эффект получили.

Слабый и сильный кейс: сравнение

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