Мощные функции, которые вы, возможно, пропустили

Последние 6 месяцев мы упорно работали над улучшением инструмента визуального дизайна Framer. Вкладка дизайн вначале была скромным дополнением, но превратилась в самостоятельный инструмент визуального проектирования. С каждым выпуском, от Gradients и Effects до Export, мы упорно трудились, чтобы заработать свое место в вашем арсенале.

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

В этой публикации мы выделяем 10 UX функций — как уникальных, так и ожидаемых — которые делают Framer Design идеальным инструментом для любого момента вашего рабочего процесса.

1. Экспорт артбордов (Новинка)

Много чего изменилось в процессе проектирования, но трудно обойти решающий этап прототипирования. По умолчанию вы можете экспортировать артборд из Framer, чтобы быстро поделиться экранами вашей работы. Или выделите несколько артбордов, скопируйте и вставьте в Slack, чтобы показать коллегам и клиентам прогресс в работе.

Экспорт артбордов Figma (Новинка)

2. Копирование CSS (Новинка)

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

Копирование CSS Framer (Новинка)

3. Удалить все (Новинка)

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

Удалить все (Новинка)

4. Помощь с вводом (v100)

С Framer вы получаете свободу творчества, чтобы проверить на практике свои идеи, не увязнув в технических подробностях. Нажмите и перетащите стрелки в поля ввода любого свойства, чтобы быстро перебирать все возможные варианты. От размера и положения до поворота теперь можно достичь нужного уровня совершенства в пикселях.

Помощь с вводом (v100)

5. Экспорт пресетов (Новинка)

Мы сделали Framer адаптируемым для любого рабочего процесса. Когда вы будете готовы экспортировать свои мобильные изображения, вы можете щелкнуть правой кнопкой мыши по «Export», чтобы выбрать предустановки iOS или Android. Это автоматически сгенерирует ваши изображения во всех родных размерах операционных систем с параметрами PNG, JPG, PDF и WEBP.

Экспорт пресетов в Framer

6. Моделирование ограничений (v90)

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

Моделирование ограничений Framer

7. Настройка альфа канала (Новинка)

Вы не поверите, у нас есть быстрые клавиши. Выберите любой слой и используйте цифровые клавиши на клавиатуре, чтобы добавить инкрементные дополнения для значений непрозрачности. Например, нажмите 05, чтобы установить альфа-значение слоя на 5%. Или быстро нажмите 55 для 55%.

Настройка альфа канала слоев Framer

8. Стили обводки (v102)

Сплошная, точечная, пунктирная или двойная линии обводки. Благодаря нашим веб-технологиям все стили обводки, которые вы знаете и любите в CSS, доступны во Framer. Нажмите на значок + на панели «Граница», чтобы вызвать выпадающее меню.

Стили обводки шейпов у Framer

9. Фильтры изображений (v90)

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

Фильтры изображений

10. Настройка радиуса скругления (v90)

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

Настройка радиуса скругления