×

Научитесь создавать сайты на WordPress
и дизайн в Figma и Pixso

Практические уроки по ВордПресс и Фигма
в текстовом и видео-формате от школы Фрила.
Научитесь создавать сайты от самого нуля до профессионала
в области веб-дизайна и разработки.
  • Как дублировать блоки между сайтами в ВордПресс

    Как дублировать блоки между сайтами в ВордПресс

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

    Читать далее

  • Как перенести блочную тему на другой домен в WordPress

    Как перенести блочную тему на другой домен в WordPress

    Иногда возникает необходимость переехать на другой домен, или просто скопировать тему на другой сайт.Для того чтобы перенести блочную тему можно воспользоваться экспортом.Но что если у Вас много страниц на сайте…

    Читать далее

  • Плагин который перевернет ваше представление о блочных темах.

    Плагин который перевернет ваше представление о блочных темах.

    В темах на блоках есть свои элементы для размещения контента. Например колонки, строки, ряды и много другое.Но вот элементов которые позволяют располагать контент«Как захочется» пока нет. Поэтому я пользуюсь специальным…

    Читать далее

  • Как создать корзину с выводом количества товаров в WooCommerce

    Как создать корзину с выводом количества товаров в WooCommerce

    Давайте предположим что вам нужно вывести количество товаров рядом с каким то элементом. У меня это просто текст в шапке сайта ВордПресс. Я использую блочные темы, а значит не могу…

    Читать далее

  • Что такое колонки, ряды, группы в блочных темах на WordPress.

    Что такое колонки, ряды, группы в блочных темах на WordPress.

    Для управления контентом на сайте, размещения его по вертикали и горизонтали используются определенные инструменты внутри блочного редактора ВордПресс. Если вы ещё не знаете что такое блочные темы читайте здесь К…

    Читать далее

  • Что такое блочные темы в ВордПресс.

    Что такое блочные темы в ВордПресс.

    Все мы знаем что существуют классические темы, такие как Astra к примеру.Существует конструктор Элементор… И вообще еще куча разных конструкторов. И тут ВордПресс делает свое решение.Я вообще думаю что такому…

    Читать далее

  • Если не пробовать не узнаешь.

    Если не пробовать не узнаешь.

    Я сам по себе имею такой склад ума как анализаторТо есть я много анализирую но мало делаю, у меня появляется какая то идея, и я начинаю ее смаковать и продумывать…

    Читать далее

  • Ещё раз про сохранение или Бекап вашего сайта на ВордПресс.

    Ещё раз про сохранение или Бекап вашего сайта на ВордПресс.

    Помните я говорил про Бекап, это сохранение вашего сайта на хостинге либо скачивание его на комп. Вообще я сталкиваюсь с восстановлением нечасто, но тут приключилась со мной такая история. У…

    Читать далее

  • Как работает ВордПресс под капотом, объясняю на простом языке.

    Как работает ВордПресс под капотом, объясняю на простом языке.

    В ВордПресс все управляется с помощью Бекенда, а фронтенд это картинка которую мы видим. ✅ Что такое Бекенд простым языком. Бекенд — это «задняя часть» любого веб-сайта или приложения. Он…

    Читать далее

  • Обучение созданию сайтов на WordPress (ВордПресс)

    Обучение Созданию Сайтов на WordPress (ВордПресс): Шаг за Шагом WordPress — это мощная и популярная платформа для создания сайтов, которая доступна каждому, кто хочет запустить свой собственный веб-проект. В этой…

    Читать далее

Figma

  • Как сделать кнопку в фигма

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

    Чтобы сделать кнопку в фигма, нужно для начала создать форму под нее Как вы понимаете вариаций кнопок может быть очень много, вообще в веб-дизайне на сайтах, кнопки это ссылки Для…

    Читать далее

  • Как сделать квадрат в фигме

    Как сделать квадрат в фигме

    Чтобы создать квадрат в Figma, выполните следующие шаги: Нарисуйте квадрат на холсте: Теперь у вас есть квадрат на холсте в Figma, который вы можете дальше редактировать или использовать в вашем…

    Читать далее

  • Горячие клавиши фигма

    Горячие клавиши фигма

    Figma имеет ряд горячих клавиш, которые могут значительно ускорить вашу работу. Вот некоторые из них: Горячие клавиши в Figma предназначены для ускорения рабочего процесса и повышения эффективности работы дизайнера. Вот…

    Читать далее

  • Как сделать стекло в Фигме

    Как сделать стекло в Фигме

    Чтобы создать эффект стекла в Figma, вы можете использовать комбинацию слоев, прозрачности и размытия. Вот шаги для создания эффекта стекла: Применение заливки: Применение прозрачности: Добавление размытия:

    Читать далее

  • Как сделать фон в Фигме

    Как сделать фон в Фигме

    Чтобы сделать фон в Figma, вы можете использовать несколько способов: После того как вы создали фон, убедитесь, что он расположен под всем остальным контентом, чтобы он не перекрывал другие элементы…

    Читать далее

  • Как создать аватар с помощью нейросети в фигма

    Как создать аватар с помощью нейросети в фигма

    Привет, давайте разберем как работать с нейросетью в фигма, там огромное количество плагинов которые вы сможете использовать для работы с нейросетью. В первую очередь с помощью нейросети можно создать логотип.…

    Читать далее

  • Как сделать меню в фигме | адаптивное меню в figma

    Как сделать меню в фигме | адаптивное меню в figma

    Чтобы сделать меню в фигме, выполните следующие шаги: Откройте Figma и создайте новый документ или откройте существующий проект, в котором вы хотите создать меню. Создайте новый фрейм в котором мы…

    Читать далее

  • Направляющие в фигме

    Направляющие в фигме

    Как сделать в фигма направляющие линии и включить линейку в фигме? Горизонтальные и вертикальные направляющие:которые можно добавить на холст Figma для выравнивания элементов интерфейса по горизонтали или вертикали. Они помогают…

    Читать далее

  • Как добавить шрифт в figma, фигма.

    Как добавить шрифт в figma, фигма.

    Чтобы добавить новый шрифт в Figma (фигма), вам нужно сначала установить его на своем компьютере. Шрифты в Figma необходимы для создания дизайна с использованием различных стилей и размеров текста. Они…

    Читать далее

  • Что такое auto layout в figma

    Что такое auto layout в figma

    Что такое Auto Layout — это функция в Figma, которая позволяет автоматически адаптировать элементы дизайна в зависимости от их содержимого и размеров экрана. Она значительно облегчает процесс создания резиновых (responsive)…

    Читать далее

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

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

    Этот урок научит вас, как создать эффект размытого круга в приложении Figma. Вы узнаете, как использовать инструменты размытия и настройки формы, чтобы создать стильный и профессиональный дизайн для ваших проектов.…

    Читать далее

  • Как сделать сетку в фигма

    Как сделать сетку в фигма

    Для создания сетки в Figma вам понадобится открыть редактор и создать фрейм Далее нужно нажать на элемент Layout Grid И выставить вот такие значения для сетки Сетка в фигме будет…

    Читать далее

  • Делаем дизайн сайта в figma для продажи домов из бруса

    Делаем дизайн сайта в figma для продажи домов из бруса

    В этом видео создадим дизайна сайта в фигма для продажи домов из бруса. Дизайн выполнен в минималистичном стиле, на 2 экрана. Первое видео из этой серии. https://www.youtube.com/watch?v=udydZJmQeLc&t=67s Работаем в фигма,…

    Читать далее

  • Как обрезать картинку в фигма

    Как обрезать картинку в фигма

    Предположим вам нужно сделать чтобы картинка в фигма стала меньшего размера. У нас есть картинка которая выходит за пределы фрейма в фигма нужно ее как то уменьшить без потери ее…

    Читать далее

  • Иллюстрации в фигме

    Иллюстрации в фигме

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

    Читать далее

  • Как сделать круг в фигме

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

    Figma является одним из наиболее популярных инструментов для дизайна и прототипирования интерфейсов. Он обладает множеством функций и возможностей, включая создание геометрических фигур. В этой статье мы рассмотрим, как легко и…

    Читать далее

  • Что такое превью в фигма

    Что такое превью в фигма

    Превью (Preview) в Figma — это функция, которая позволяет вам предварительно просматривать и проверять макет или прототип перед его публикацией или экспортом. Превью представляет собой интерактивную версию вашего дизайна, которую…

    Читать далее

  • Анимация по свайпу в figma

    Анимация по свайпу в figma

    Анимация по свайпу в Figma представляет собой способ создания анимированных эффектов, которые активируются при взаимодействии пользователя с макетом или прототипом путем свайпа (смахивания) по экрану. Эта функция позволяет имитировать свайп-жесты,…

    Читать далее

  • Как в фигме текст сделать вектором

    Как в фигме текст сделать вектором

    Можно ли в Фигме сделать вектор из текста? Да конечно! Для этого давайте создадим текст. я создал обычный текст слово LOGO И теперь чтобы превратить текст в кривые в фигме…

    Читать далее

  • как сделать анимацию в фигме при скролле

    как сделать анимацию в фигме при скролле

    В фигме можно создать анимацию скролла в несколько простых шагов. Давайте попробуем! В этом видео-руководстве я покажу вам, как создать горизонтальный скролл в Figma. Я начну с объяснения шагов и…

    Читать далее

  • Создание хлебных крошек в Figma — Пошаговое руководство

    Создание хлебных крошек в Figma — Пошаговое руководство

    В этом руководстве я покажу вам, как создать хлебные крошки в Figma. Хлебные крошки — это навигационный элемент, который помогает пользователям ориентироваться на сайте или приложении. Следуя этим простым шагам,…

    Читать далее

  • Как включить сетку в фигма

    Как включить сетку в фигма

    Для включения сетки в фигме, можно воспользоваться стандартной панелью с левой стороны. На английском языке она называется Layout Grid. Сетка является полезным инструментом для выравнивания и организации элементов в дизайне.…

    Читать далее

  • Как сохранять картинки в Фигме

    Как сохранять картинки в Фигме

    Узнайте, как легко и эффективно сохранять картинки в Figma с помощью этого полезного руководства. Изучите различные способы сохранения картинок, включая экспорт в различные форматы файлов или копирование и вставку в…

    Читать далее

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

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

    К примеру мы хотим сделать вот такое размытие краёв в фигме, как это сделать? Для начала создадим фрейм, жмем на решетку Выбираем размер экрана декстоп Далее нам нужно выбрать наш…

    Читать далее

  • Что такое фигма, зачем она нужна в 2022-2023 г.

    Что такое фигма, зачем она нужна в 2022-2023 г.

    Фигма — это инновационный инструмент для дизайна интерфейсов, разработанный и выпущенный в 2016 году. Он представляет собой облачную платформу, которая объединяет возможности векторного редактора и прототипирования в едином рабочем пространстве.…

    Читать далее

  • Как сделать слайдер в figma

    Как сделать слайдер в figma

    Чтобы создать слайдер в Figma, вам потребуется использовать функционал компонентов и переходов. Вот пошаговая инструкция: Создаем фрейм размером 1440*1024 Далее нам нужно создать стрелки для слайдера, вы можете посмотреть полное…

    Читать далее

  • Как создать фрейм в фигма

    Как создать фрейм в фигма

    Фигма — это мощный инструмент для дизайна интерфейсов и создания прототипов веб-сайтов и мобильных приложений. Один из ключевых элементов в работе с Фигмой — это создание фреймов. Фреймы позволяют организовать…

    Читать далее

Figma курс

  • Курс по Figma — Урок 11, Как наложить маску в фигма, как склеить векторные изображения в Figma

    Курс по Figma — Урок 11, Как наложить маску в фигма, как склеить векторные изображения в Figma

    Урок 11: Наложение Маски и Склеивание Векторных Изображений в Figma Введение: В Figma, наложение маски и склеивание векторных изображений – это мощные техники для создания сложных и интересных графических элементов.…

    Читать далее

  • Курс по Figma — Урок  10 , Работа с изображениями в Фигма, как вставить картинку

    Курс по Figma — Урок 10 , Работа с изображениями в Фигма, как вставить картинку

    Урок 10: Работа с Изображениями в Figma: Вставка и Основные Настройки Введение: В Figma работа с изображениями – важный аспект создания дизайнов. В этом уроке мы рассмотрим, как вставлять изображения…

    Читать далее

  • Курс по Figma — Урок — 9, Группы и слои в Figma, как объединить слои в фигме

    Курс по Figma — Урок — 9, Группы и слои в Figma, как объединить слои в фигме

    Урок 9: Группы и Слои в Figma: Как Объединять и Управлять Элементами Введение: Группы и слои в Figma предоставляют организацию и управление элементами вашего дизайна. В этом уроке мы рассмотрим,…

    Читать далее

  • Курс по Figma — Урок  8, Векторные изображения в Фигма, создаем иконку логотипа. Перо в Фигма

    Курс по Figma — Урок 8, Векторные изображения в Фигма, создаем иконку логотипа. Перо в Фигма

    Создание Векторных Изображений и Иконок в Figma с Использованием Инструмента «Перо» Введение: Векторные изображения позволяют создавать масштабируемые и качественные графические элементы. В этом уроке мы рассмотрим инструмент «Перо» в Figma…

    Читать далее

  • Курс по Figma — Урок 7, Как редактировать текст в Фигма, шрифты, лайн хейт, межстрочное расстояние, начертание

    Курс по Figma — Урок 7, Как редактировать текст в Фигма, шрифты, лайн хейт, межстрочное расстояние, начертание

    Работа с текстом в Фигма Введение: В этом уроке мы поговорим о редактировании текста в Figma, включая работу с шрифтами, настройку линь-хейта (tracking), межстрочного расстояния и начертания текста. Эти элементы…

    Читать далее

  • Курс по Figma — Урок 6 Сетка и направляющие в Фигма

    Курс по Figma — Урок 6 Сетка и направляющие в Фигма

    Урок 6: Сетка и Направляющие в Figma(Фигма) Введение: В этом уроке мы рассмотрим важные инструменты, которые помогут вам создавать более точные и симметричные дизайны в Figma. Сетка и направляющие —…

    Читать далее

  • Курс по Figma — Урок 5 что такое фрейм в Фигма

    Курс по Figma — Урок 5 что такое фрейм в Фигма

    Фрейм в Фигма: Основы и Применение в Дизайне Что такое фрейм в Фигма и почему это важно? Figma, инструмент для дизайна интерфейсов и прототипирования, предоставляет множество мощных инструментов для дизайнеров.…

    Читать далее

  • Курс по Фигма(Figma) — Урок — 4 Как создать Квадрат,  круг, прямоугольник, линию, стрелку. создать фигуру в Фигме

    Курс по Фигма(Figma) — Урок — 4 Как создать Квадрат, круг, прямоугольник, линию, стрелку. создать фигуру в Фигме

    Как создать фигуру в фигме В Figma создание форм, линий и стрелок довольно просто. Вот как вы можете создать различные фигуры: Примеры: Это основные шаги для создания различных фигур в…

    Читать далее

  • Курс по Фигма(Figma) — Урок 3 Как скачать Фигма

    Курс по Фигма(Figma) — Урок 3 Как скачать Фигма

    Как скачать Figma на компьютер Figma в основном предоставляется как веб-приложение, и вам не требуется загружать или устанавливать его на свой компьютер. Вы можете использовать Figma прямо в веб-браузере, посетив…

    Читать далее

  • Курс по Фигма(Figma) — Урок 2 настройка холста

    Курс по Фигма(Figma) — Урок 2 настройка холста

    В Figma термин «холст» (canvas) обозначает рабочую область, на которой вы создаете и редактируете свой дизайн. Холст представляет собой пустое пространство, где вы можете размещать и манипулировать элементами интерфейса, создавать…

    Читать далее

  • Курс по Фигма(Figma) — Урок 1 Что это за программа

    Курс по Фигма(Figma) — Урок 1 Что это за программа

    Figma — это веб-приложение для дизайна интерфейсов, которое позволяет дизайнерам создавать, прототипировать и совместно работать над дизайном в режиме реального времени. Она часто используется для разработки веб-сайтов, мобильных приложений, графических…

    Читать далее