Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>24 июн 2022</li>

3 <li>0</li>

4 </ul>За десять минут и без знаний HTML и CSS.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Не так давно стал доступен новый конструктор сайтов Framer. Он не похож на привычные Readymag или Tilda, так как у него есть очень удобная интеграция с Figma. Благодаря ей вы сможете очень быстро запустить свой сайт, даже если раньше никогда этим не занимались.

8 Если вы уже работали в Figma, то разобраться во Framer вам будет нетрудно, так как интерфейс обоих сервисов практически идентичен.

9 Рассказываем, как без помощи разработчиков превратить макет из Figma в сайт с помощью Framer.

10 Framer работает по условно-бесплатной модели. В бесплатной версии вы сможете опубликовать сайт только на домене framer.app и с баннером конструктора, а объём памяти на весь код и иллюстрации - только 1 гигабайт. Если вы хотите сделать лишь портфолио, то этого вам хватит. Платную версию за 15 долларов можно купить только<a>с помощью зарубежной карты</a>.

11 Перед началом работы - зарегистрируйтесь на <a>Framer</a> :-)

12 Разработчики Framer создали специальный плагин для Figma, который позволяет полностью скопировать ваш макет как простой текст. Он доступен бесплатно и всем пользователям:

13 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>

14 <li>Зайдите в Figma, нажмите правой кнопкой мыши на фрейм с вашим макетом, в выпадающем меню перейдите в пункт Plugins и выберите Framer Copy Paste.</li>

15 <li>Все ваши слои скопируются и их можно будет добавить во Framer.</li>

16 </ul>Как только плагин скопирует все фреймы с макета, вы сможете добавить их во Framer, нажав Ctrl (⌘) + V в браузере:

17 Если ваш макет сразу работает как нужно, нажмите кнопку Publish в правом верхнем углу.

18 У Framer есть ограничение по максимальной ширине окна для десктопа - 1200 пикселей. Если ваш макет не соответствует требованию, то он просто не влезет в видимую область или будет слишком мал. У вас есть два варианта, как решить эту проблему:

19 <ul><li>Изменить размер видимой области на правой панели настроек.</li>

20 <li>Подогнать ваш макет под стандартную видимую область. Рекомендуем использовать этот способ, чтобы ваш сайт влезал в небольшие мониторы пользователей.</li>

21 </ul>После публикации границы вокруг вашего сайта будут всегда белыми, даже если вы делали макет чёрным. Чтобы это исправить, кликните на ваш макет и на правой панели настроек в пункте Style поменяйте белый цвет #FFFFFF на чёрный #000000:

22 Framer поддерживает далеко не все функции Figma. Например, у вашего текста не будет обводки, некоторые фигуры изменятся, а настройки градиента могут сломаться:

23 Скриншот: Skillbox MediaВсё это можно починить сразу в редакторе - текст перекрасить, а вместо фигур загрузить PNG-картинку:

24 Скриншот: Skillbox MediaПод каждый вид устройства вам придётся верстать отдельную версию сайта. Чтобы их редактировать, наведите курсор на ваш макет и кликните на слово Desktop - откроется список с доступными устройствами:

25 Скриншот: Skillbox MediaПо умолчанию минимальная ширина мобильной версии во Framer - 390 пикселей. Советуем сразу изменить её на 414, так как это ширина экрана iPhone XR и Samsung Galaxy S20 Ultra. Эти телефоны популярны в мире и, вероятнее всего, ваши пользователи будут переходить на сайт именно с них.

26 Чтобы изменить ширину окна, в выпадающем списке c устройствами нажмите кнопку Edit.

27 Обычно сайты не работают как статичные картинки, поэтому, скорее всего, вам понадобится сделать для него ссылки и якоря. Через Framer это сделать очень просто:

28 <ul><li>Выберите любой элемент сайта, на который должна вести якорная ссылка. Затем на правой панели настроек перейдите в блок Scroll Target, укажите его название и смещение по оси Y. Без смещения якорь может не работать.</li>

29 <li>Выберите любой элемент сайта, который будет ссылкой. Затем на правой панели настроек перейдите в блок Link, нажмите на пункт Target и выберите нужный якорь.</li>

30 <li>Если вам нужно сделать ссылку не на якорь, а на страницу в интернете, в самом верху блока Link переключитесь с Page на URL и вставьте нужную ссылку.</li>

31 </ul><a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>