Как держать макет в Figma в порядке

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

Как использовать референсы и не копировать

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

Как собрать понятный лендинг

Красивые блоки не спасают страницу, если посетитель не понимает, что ему предлагают.

Как выбрать шрифт для проекта

Красивый шрифт в подборке может плохо смотреться в твоём тексте. Проверяй его на настоящем заголовке и абзаце.

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

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

Как показать улучшение макета

Картинка «до и после» полезна, когда видно, что изменилось и зачем. Просто сделать новую версию ярче недостаточно.

Как проверить макет на телефоне

На большом экране всё красиво, а на телефоне заголовок занимает половину страницы и кнопка не помещается.

Как работать с командой в другом часовом поясе

Когда вы редко онлайн одновременно, вопрос может задержать проект на день.

Как работать с крупным заголовком

Большой заголовок помогает заметить главное. Но если он занимает весь экран, человеку трудно понять предложение и найти следующий шаг.

Как разбирать красивый сайт с пользой

Скриншот в папке вдохновения быстро забывается. Разбор помогает перенести полезный приём в работу.

Как связать экраны в Figma

Сделай макет, в котором можно нажимать кнопки и переходить между экранами. Так ты проверишь будущий сайт до разработки.

Как сделать длинный текст удобным

Человек читает легче, когда видит короткие абзацы, ясные заголовки и достаточно места между строками.

Как сделать кнопку, которую легко менять

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

Как сделать текст в макете удобным

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

Кириллические шрифты — Paratype

Проверка контраста — Coolors

Типографика: основы и работа с текстом

ambientCG

PBR-поверхности, окружения и 3D-ассеты. Для реалистичного рендера используй карты материала вместе, а не только цветную картинку.

Google Design: как выбрать шрифт

Материал Google Design на английском: выбор шрифта, длина текста и языки проекта.

Heroicons

Аккуратные контурные и залитые значки. Хорошая отправная точка для форм, кабинетов и панели управления.

Iconoir

Лёгкий линейный набор: SVG, Figma и компоненты для разработки. Удобен для плотных экранов и продуктовой навигации.

Ls.graphics

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

Lucide

Контурные SVG для навигации, кнопок и статусов. Выбери единые толщину линии и размер для всего интерфейса.

Manypixels

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

Mockupworld

Каталог бесплатных мокапов из разных источников. Выбирай сцену под свой кейс и переходи к автору за файлом и условиями.

Phosphor Icons

Иконки с несколькими начертаниями для интерфейсов и презентаций. Сохраняй один вес внутри одного экрана.

Poly Haven — текстуры

Материалы дерева, камня, ткани и других поверхностей. Подходят для сцен, предметных рендеров и фактурных визуальных экспериментов.

Practical Typography: заголовки

Материал Мэттью Баттерика на английском об оформлении заголовков.

SVG Repo

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

Tabler Icons — исходники

Открытый набор SVG для интерфейсов. Бери бесплатные исходники из репозитория; готовые коммерческие бандлы на сайте продаются отдельно.

unDraw

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

100 Days of Fonts

1001 Fonts

1001 Free Fonts

2 цветовых сочетания

3д иллюстрации рабочего места (фриланс)