Вкладка №1 (Основные параметры)
Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку
“Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.
Ниже я привел скриншоты с разделами, а также с переводом.
Для начинающих веб-дизайнеров важно всегда иметь некий ориентир в уровне работ. Также это касается полезных инструментов, которые позволяют создавать дизайн-макеты на более высоком уровне. С данной целью и была создана огромная открытая библиотека Figma Community. Данный раздел поддерживается не только командой Фигма, но и обычными пользователями, что дает возможность данной библиотеке расти быстрыми темпами.
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.
С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.
Рассказываем, как анимировать ваши компоненты для прототипа.
Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.
Изображение: Skillbox Media
Каждый интерактивный компонент можно в любой момент изменить в комбайне, и они будут одинаково работать на всех экранах вашего прототипа:
Внутри одного интерактивного компонента может быть сразу несколько. Это позволяет делать сложные элементы интерфейса и быстро их менять, если вам в них что-то не нравится. Для примера сделайте всплывающее меню, в котором все пункты меняют цвет по наведению курсора.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
Научитесь: Figma с нуля до PRO
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Olyasnow для Skillbox Media
Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.
Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.
Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.
9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с вариантами элементов интерфейса, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.
Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:
Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:
Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:
Как сделать кнопки с системой названий в Figma
Теперь у вас есть два готовых компонента, которые можно превращать в варианты.
Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.
Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.
Как воспользоваться вариантом
Ваша контрастная кнопка перекрасится в серый:
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.
Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:
Как добавить новое свойство
Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:
То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.
С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.
Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:
Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.
Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.
Как пользоваться плагином:
У вас на макете появится готовый комбайн с базовыми состояниями кнопки:
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Соберу сюда горячие клавиши в фигме (Figma). Горячих клавиш (hotkeys) в фигме много, но мы же привыкаем лишь к некоторым, правило Порето во плоти, мать его :). Поэтому, чтобы после долгого перерыва снова не искать их на просторах интернета, сделаю свою статейку для горячих клавиш в фигме.
Вообще, их можно найти в меню:
Выпадающее меню и раздел с горячими клавишами
Или нажать на знак вопроса справа снизу:
Горячие клавиши в хелпе Фигмы
И появится такая панель с вкладками, в которых и указаны сами горячие клавиши.
Панель с горячими клавишами фигмы
Основной список горячих клавиш я честно скоммуниздил с этого сайта — https://d-e-n.info, немного добавив оформление.
Мной часто используемые
- Открыть «Панель слоев» Alt + 1
- Открыть «Библиотеку компонентов» Alt + 2
- Открыть «Вкладку Design» Alt + 8
- Открыть «Вкладку Prototype» Alt + 9
- Открыть «Вкладку Inspect» Alt + 0
Масштабирование
- Масштабировать все рабочее пространство Shift + 1
- Масштабировать выделенный элемент Shift + 2
Инструмент «Текст»
- Установить прозрачность 10% 1
- Установить прозрачность 50% 5
Выравнивание
Вот такие вот есть горячие клавиши в Фигме(figma), полезно бывает хотя бы раз прочитать их полностью, такие функции интересные узнаешь, о которых и не услышишь на том же ютубчике :).
Пользуйтесь на здоровье!
Figma — горячие клавиши
Этот сайт использует cookies для улучшения качества обслуживания. Продолжая пользоваться сайтом, вы соглашаетесь с использованием файлов cookie.
Редактируете одну кнопку — меняются все. Разбираемся с главной фишкой Figma, за которую её любят веб-дизайнеры.
Иллюстрация: Dana Moskvina для Skillbox Media
Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию.
Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.
Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню. Исходный компонент называется основным (main component), его копии — экземплярами (instances).
Допустим, мы создали основной компонент — чёрный квадрат. Затем добавили два его экземпляра.
Основной компонент — «родитель» и два экземпляра — «потомки» чёрного цветаСкриншот: Skillbox Media
Перекрасим первый в красный цвет. Все три тоже станут красными — экземпляры наследуют параметры основного компонента.
Наследование цвета от «родителя» «потомками» — все три квадрата красныеСкриншот: Skillbox Media
Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть.
Свойства «потомков» можно изменять напрямую — форму, цвет и любые другие характеристикиСкриншот: Skillbox Media
Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Если уменьшить и перекрасить «родителя» в жёлтый цвет, один из его «потомков» всё равно останется фиолетовым, а другой — прямоугольником, потому что эти свойства были приобретены самостоятельно, а не от основного компонента.
Приобретённые свойства экземпляров — фиолетовый цвет и прямоугольная форма — имеют больший приоритет, чем унаследованные от «родителя»Скриншот: Skillbox Media
Основной компонент — шаблон для будущих элементов дизайна. Например, для кнопки он состоит из прямоугольника, текста и иконки. А их размер и содержание зависят от экземпляра.
Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:
Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.
Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.
С библиотеками проще работать, если соблюдать несколько правил:
Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. После этого участники могут их использовать.
Поместить экземпляр компонента в дизайн можно тремя способами:
Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:
Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром. Сохраняйте в них всё, что будет использоваться многократно. Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать самостоятельным компонентом.
Как рисовать универсальные компоненты, которые адаптируются к размеру экрана, создавать команды, взаимодействовать с разработчиками и не только — вы узнаете на нашем курсе. Прокачайте знание Figma и станьте настоящим профессионалом веб-дизайна!
Научитесь: Профессия Графический дизайнер
Вкладка №8 (Курсор)
Столбец №1
С лета 2022 года плагины не нужно устанавливать в свой аккаунт Фигма. Вместо этого мы можем сохранять плагины себе в избранное, загружая их в нужный момент. Это очень классное решение с точки зрения оптимизации ресурсов.
Добавить плагин в Фигму можно двумя способами:
Для того чтобы добавить плагин в Figma внутри проекта:
Этот способ подходит тем, кто знает, какой плагин ему нужен. Поэтому мы просто используем поиск, добавляем и запускаем все плагины.
Для того чтобы добавить плагин в Figma через Figma Community:
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на платный интенсив по веб-дизайну. Вы изучите полностью весь дизайн-процесс, в том числе: работа в Figma, общение с заказчиком, анализ и выполнение ТЗ, управление проектами и т.д. Ссылка на сайт интенсива.
Вкладка №7 (Выделение)
Все материалы в данном разделе отсортированы по категориям и тегам.
Как сохранить к себе проект-референс из Figma Community?
Для того чтобы сохранить готовый проект к себе в Фигму, нужно:
Вкладка №6 (Векторные изображения)
Работа с точками векторных изображений (Эти функции я не использую)
Вкладка №4 (Масштабирование)
Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma — нужно всего лишь
нажать клавиатурное сокращение «Ctrl + Z». И в зависимости от количества нажатий, вы отмените предыдущие
действия.
Важно! Когда вы изучили все клавиатурные сокращения в Figma — рекомендую для закрепления отработать
их на реальных макетах. По этой и этой ссылкам вы можете найти готовые макеты для оттачивания своих
навыков.