Макеты и шаблоны фигмы — как создать, перенести в тильду или html, где найти готовые

Как сделать дизайн макет сайта или мобильного приложения в фигме

Создание макета любого проекта — сложный процесс, который к сожалению не получится исчерпывающе описать в рамках одной статьи. Если вы хотите научиться создавать собственные макеты с нуля, я рекомендую пройти мой бесплатный курс графического и веб-дизайна. Чтобы получить этот курс, просто напишите мне в телеграм AgeenkoSchool слово «обучение» — и я открою доступ.

Где взять готовые бесплатные макеты интернет-магазинов или лендингов для верстки

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

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

Готовые шаблоны дизайна презентаций, сайтов, карточек товаров, постов, портфолио и резюме в фигме

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

Для этого нужно перейти на главный экран фигмы, нажать на кнопку Explore Community в нижнем левом углу и на появившейся странице в строке поиска ввести нужный вам запрос. Затем останется только выбрать понравившийся шаблон, скопировать его себе и внести желаемые изменения.

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

• шаблон — template, ui kit
• презентация — presentation, slide
• сайт — site, website, landing
• карточка — card
• пост — post, banner, social media
• портфолио и резюме — portfolio, cv

Как перенести макет из фигмы в тильду

Для начала на главной странице фигмы нужно перейти в меню профиля и нажать там на Settings:

Затем — сгенерировать Personal access token на вкладке Security:

Далее нужно ввести название токена и срок действия (его лучше поставить No expiration).

После этого нажимаем кнопку Generate token и в появившемся окне копируем и сохраняем себе код. Обратите внимание, что его можно посмотреть только один раз. Если не сделаете этого сразу, нужно будет всю операцию проводить еще раз.

Далее переходим в тильду, добавляем новый Зеро блок, заходим в режим его редактирования и в выпадающем меню выбираем Импорт из фигмы:

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

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

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

Несколько рекомендаций, чтобы импорт прошел более удачно:

• Ширину макета лучше делать 1200px
• Блоки лучше импортировать по одному, а не все сразу
• Группы элементов можно испортировать как картинку. Для этого в названии нужно указать image. Если хотите импортировать в SVG формате, в название нужно указать svg.
• В названии групп кнопок нужно указывать слово button
• Межстрочный интервал нужно задавать явно

Как перевести макет фигмы в html и css с помощью плагина

Есть несколько плагинов для этих целей, например Figma to HTML & CSS или Megezon Figma to code. Эти плагины, как и любые другие, можно найти на панели инструментов:

Выделяем нужный фрейм, запускаем плагин — и код готов. Впрочем, качество этого кода во всех плагинах получается крайне низким. Поэтому я рекомендую для верстки макетов в HTML и CSS обратиться к frontend-разработчикам. Даже новичок скорее всего сделает лучше, чем плагин.

Как сохранить макет или шаблон в фигме

Тут всё просто. Сами файлы сохранять не нужно — они автоматически сохраняются в облаке. Чтобы поделиться с другим человеком, достаточно просто отправить ему ссылку. Но если нужно сохранить макет в формате PNG, JPG, SVG или PDF — это можно сделать с помощью функции Export в нижней правой части интерфейса фигмы: