Introducing: figma’s platform

Стоимость

Для личного пользования вполне хватит бесплатных возможностей Figma. Можно спокойно делать проекты на фрилансе. Бесплатный аккаунт Figma называется Starter, и возможности у него такие:

• история изменений хранится 30 дней;
• можно завести и поддерживать не более трёх проектов;
• только два пользователя могут иметь права на редактирование.

Платный тариф называется Professional, в нём нет описанных выше ограничений. Вдобавок вы сможете делиться с пользователями библиотеками компонентов ваших проектов. При единовременной оплате годовой подписки каждый месяц вам обойдётся в 12 $. Если этот вариант вам неудобен, можете оплачивать сервис помесячно — по 15 $ за каждый месяц.

Третий тариф — Organization — предназначен для больших команд. Стоит он 45 $ в месяц, оплатить нужно сразу год.

User actions

Plugins run in Figma or FigJam files and perform one or more user actions. These user actions are usually short-lived and must be initiated by the user.

• Users can only run one plugin and one action at a time.
• It’s not possible to build plugins that run in the background.
• It’s not possible to build plugins that monitor and respond to changes as they happen in a file.

Plugin UI

You can choose whether your plugin runs immediately, or if users can enter in

A plugin can open a modal as an and write HTML, CSS and JavaScript inside that . You’re free to create any UI you want inside that modal. You can decide if the modal is dismissed on, or can stay open within the file. Create a user interface →

Being able to pull from a library of components of Figma buttons, color picker, etc, significantly speeds up plugin development and helps you create a UI that’s mirrors Figma’s own UI.

We don’t provide these components as part of the core Figma Plugin API. Figmate and Figma plugin developer, Tom Lowry, has put together a library of React components which you can use to build the UI of your plugin. Open the Github repo →

Plugin parameters

Developers can create plugins with parameters that allow plugins to accept input from users via the quick actions menu.

Adding parameters means you don’t need to build a custom UI. It also provides a streamlined experience for users of the plugin, who can run a plugin directly from the quick actions menu.

Relaunch plugins

When developing a plugin, you have the option to include a relaunch button. Since it isn’t possible to set keyboard shortcuts for plugins, this makes it easier to run a plugin multiple times and allows collaborators to relaunch the plugin from the same file.

In Figma design files, the relaunch button will appear in the Properties panel. In FigJam files, the relaunch button appears in the properties menu for a node. Relaunch buttons are not available on page or document nodes in FigJam.

Multiple relaunch buttons can be added to the same node. If multiple relaunch buttons from the same plugin are added to the same node, they are grouped together into one button with submenus. The order of buttons is determined by the order of the elements in the manifest’s array. Learn more about relaunch in the plugin manifest →

Как нарисовать мяч для регби

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

Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:

Изображение: modi.ru / Skillbox Media

Основа мяча

1. Создайте круг и растяните его по длине и высоте мяча, чтобы получился овал.

2. В режиме векторного редактора подгоните форму овала под мяч, чтобы они были похожи.

Видео: Виктор Засыпкин / Skillbox Media

Поперечный шов

1. Создайте круг и растяните его по основному шву, который пересекает его.

2. В режиме векторного редактора подгоните форму овала под шов.

3. Удалите фон, добавьте на вектор обводку и перенесите его на овал в форме мяча.

Видео: Виктор Засыпкин / Skillbox Media

Дополнительный шов

1. Создайте квадрат и подгоните его размеры под форму дополнительного шва.

2. Удалите у фигуры фон, добавьте обводку и скруглите углы . В качестве эталона для скругления возьмите угол шва, который виден лучше всего. В нашем референсе — это левый нижний.

3. В режиме векторного редактора располагайте точки фигуры по направлению шва, а усами регулируйте скругление так, чтобы вектор повторял форму шва.

4. Этот шов не сплошной, а строчной. Укажите в настройках обводки пунктирный стиль. Чтобы это сделать, в блоке Stroke на панели инструментов нажмите и в появившемся меню в пункте Stroke Style укажите стиль Dash. Отрегулируйте настройки Dash (количество точек) и Gap (шаг), чтобы пунктир примерно напоминал шов настоящего мяча.

Видео: Виктор Засыпкин / Skillbox Media

Блик

1. Скопируйте основной овал, выделите его и укажите цвет заливки: белый.

2. Поместите белый овал на мяч и подгоните его под размер блика — он будет примерно на треть меньше основного овала.

3. Поместите блик на мяч. Скорее всего, он будет великоват, поэтому уменьшите его и подправьте ломаные углы с помощью усов.

Видео: Виктор Засыпкин / Skillbox Media

Левая белая полоска

Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:

1. Создайте круг и с помощью одной из его сторон повторите внешний левый край полоски.

2. Создайте ещё один круг и с его помощью повторите внутренний правый край полоски

Важно, чтобы этот круг в палитре слоёв находился ниже предыдущего

3. В режиме векторного редактора подправьте оба круга, чтобы они точно повторяли изгибы полоски. Для удобства укажите непрозрачность кругов на 50%, чтобы видеть и сами фигуры, и контуры мяча.

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

Иллюстрация: Виктор Засыпкин

5. Сделайте копию основной формы мяча и подложите её под полоску. Если она выходит за края фигуры, выделите и полоску, и форму мяча, затем на панели инструментов нажмите на иконку и в выпадающем списке выберите . В результате останется видимой только та часть, где ваши круги пересекаются.

Иллюстрация: Виктор Засыпкин

6. Поместите получившуюся фигуру на мяч. Если она залезает на шов, его можно немного уменьшить.

Видео: Виктор Засыпкин / Skillbox Media

Правая белая полоса

Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента :

Видео: Виктор Засыпкин / Skillbox Media

Белый шов

1. Белый шов повторяет форму основного. Возьмите поперечный шов, с зажатой клавишей Ctrl (⌘) выделите все точки снизу и удалите их. У вас должна получиться короткая линия длиной с поперечный шов.

2. Поместите линию на референс и, если нужно, сделайте её длиннее или короче в режиме векторного редактора.

3. Поместите вектор на нижний край шва и с помощью пера обведите и остальной контур шва.

4. С помощью пера повторите контуры всех стежков.

Видео: Виктор Засыпкин / Skillbox Media

В результате у вас получится примерно такой мяч:

Поиск (вкладка Search). Как пользоваться в Figma?

Если вы нажмете на надпись «Search», то сверху по центру поле, где вы можете осуществлять поиск.

Здесь можно осуществлять поиск по следующим вкладкам:

• Файлы.
• Проекты.
• Люди.
• Плагины и файлы в сообществе figma.
• Файлы в черновиках и командах.

Поиск файлов в сообществе

Если вы введете в поисковую строку какой-либо запрос (например Icons), то по умолчанию поиск осуществляется по вашим проектам. Если перейдете во вкладку Commynity (сверху справа или кнопка внизу), то увидите файлы, которыми делятся другие пользователи. Чтобы скопировать файл и редактировать его, нажмите на специальную иконку со стрелкой вниз.

Чтобы посмотреть проект более подробно, нажмите на его превью (изображение). Здесь вы можете сделать дубликат этого файла или посмотреть его более подробно.

Styles

These are APIs available to create new styles and retrieve existing ones in the current document. The newly created styles are local to the current document and do not contain default properties (except for TextStyle).

createPaintStyle(): PaintStyle

Creates a new Paint style. This might be referred to as a Color style, or Fill style more colloquially. However, since this type of style may contain images, and may be used for backgrounds, strokes, and fills, it is called a Paint.

createTextStyle(): TextStyle

Creates a new Text style. By default, the text style has the Figma default text properties (font family Roboto Regular, font size 12).

createGridStyle(): GridStyle

Creates a new Grid style.

The APIs below allow access to local styles, which are returned in the same order as displayed in the UI. Only local styles are returned, not the ones from the team library.

moveLocalPaintStyleAfter(targetNode: PaintStyle, reference: PaintStyle | null): void

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local paint styles.

moveLocalTextStyleAfter(targetNode: TextStyle, reference: TextStyle | null): void

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local text styles.

moveLocalGridStyleAfter(targetNode: EffectStyle, reference: GridStyle | null): void

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local grid styles.

moveLocalPaintFolderAfter(targetFolder: string, reference: string | null): void

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain paint styles. When referring to nested folders, the full delimited folder name must be used. See the section for more info.

moveLocalTextFolderAfter(targetFolder: string, reference: string | null): void

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain text styles. When referring to nested folders, the full delimited folder name must be used. See the section for more info.

moveLocalEffectFolderAfter(targetFolder: string, reference: string | null): void

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain effect styles. When referring to nested folders, the full delimited folder name must be used. See the section for more info.

moveLocalGridFolderAfter(targetFolder: string, reference: string | null): void

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain grid styles. When referring to nested folders, the full delimited folder name must be used. See the section for more info.

Что можно делать в Figma?

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

Прототипирование

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

Чтобы создать прототип, вам необходимо:

1. Подготовить карту экранов в нужной вам последовательности.
2. В верхней части правого блока переключиться на вкладку Prototype.
3. Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
4. Справа добавить и настроить действие.

В настройках прототипа можно выбрать мобильное устройство, для которого проектируется интерфейс. Так вы в режиме просмотра прототипа увидите, как будет выглядеть интерфейс на устройстве.

Usability-тестирование

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

Передача макетов разработчикам

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

Презентация

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

12 причин почему стоит обратить внимание на Figma и использовать её в своей работе

1. Скорость работы

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

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

3. Командная работа

Есть возможность работать над проектами совместно с другими людьми. В бесплатном тарифе над проектами можно работать вдвоем

Если хотите расширить команду, то обратите внимание на платный тариф

4. Автоматическое сохранение

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

5. История версий

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

7. Интерактивные прототипы

Можно создавать интерактивные кликабельные прототипы, всплывающие формы и т.д. Например это может помочь лучше продемонстрировать вашу работу заказчикам.

9. Бесплатные файлы для работы

Можно найти огромное количество бесплатных плагинов и файлов для работы от сообщества фигмы, которые помогут вам работать быстрее. Это дизайн системы, UI киты, Wireframe, иллюстрации, иконки, файлы для веб дизайна и дизайна мобильных приложений.

10. Компоненты

Есть возможность создавать так называемые компоненты. Это специальные элементы, которые можно редактировать в массовом порядке. Например если вы создадите кнопку, сделаете из неё компонент, а затем скопируете её, то при редактировании главного компонента, копии также будут меняться. Это сильно упрощает работу и экономит время. В курс по Figma будет включен подробный урок по работе с компонентами.

12. Auto Layout

Эта функция позволит сэкономить время на выравнивании и перестраивать элементы дизайна автоматически. Например возьмем простую форму. В ней настроена функция auto layout, если продублировать поле, то все перестроиться автоматически и ничего не придется двигать вручную. Аналогично дело обстоит с кнопками. Если в кнопке настроена эта функция, то при изменении текста, отступы перестраиваются автоматически.

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

Plugin API access

The Plugin API supports both read and write functions, allowing developers to view, create, and modify the contents of Figma design and FigJam files.

In both Figma and FigJam, you can access most of the plugin API through the figma global object.

Plugins expose, first and foremost, the contents of a file. That’s anything that exists in the layers panel and any properties associated with that layer in the properties panel. Plugins can view and modify aspects of these layers or nodes, like the color, position, hierarchy, text, etc.

The plugin API doesn’t allow you to access anything in that file that’s outside the canvas. Plugins can’t access:

• Styles and components from any team or organization libraries. The Plugin API can only access styles, components, and instances that are local to that file.
• External fonts or web fonts accessed via a URL. Plugins can only access fonts that are accessible in the editor. This includes Figma’s default fonts, shared organization fonts, or fonts stored locally on your computer. You’ll be required to . This doesn’t apply to fonts you want to use in your plugin’s UI.
• Other file metadata like the file’s team or location, permissions, users, or any comments associated with that file. The includes the version history of that file. You can get read access to these aspects of a file via I.

Document structure

Every file in Figma consists of a tree of nodes and at the root of every Figma or FigJam file is a Document node. The document node is how you access and explore the contents of a file.

In a Figma design file, every DocumentNode will have PageNode that represent each page in that Figma file. There can only be one document node per browser tab and each of it’s children must be PageNodes.

As FigJam files don’t support pages, there won’t be any PageNodes to explore. Instead, the children of the document node will be the layers and objects on that board.

The document node can then have any number of child nodes. Each subtree that stems from the document node represents a layer or object on the canvas. There are specific nodes or classes for different types of layers in Figma — like frames, components, vectors, and rectangles.

Nodes have a number of properties associated with them. Some of these are global properties, that exist on every node, whereas other properties will be specific to the type of node.

You can create plugins for a specific editor type, both editors, or build plugins that perform different actions in each editor. While some node types can only be created in a specific file or editor type, you will generally be able to read and modify most nodes, regardless of the editor type.

Browser based

Figma is predominantly browser-based software, which means it can be run on all full desktop operating systems (MacOS, Windows, Linux, etc), as well as Chrome OS .

Like Figma, plugins are powered by web technologies. Part of the plugin API runs in an meaning you can also access browser APIs. This includes making network requests, opening files, and using functionality like , WebGL, WebAssembly, and audio APIs, etc.

The Plugins API doesn’t support desktop-specific APIs. While Figma has desktop applications, not everyone accesses Figma via the desktop. We want plugins to be as accessible and cross-platform as Figma itself. There are also security concerns which require a thorough and considerate approach.

Browsers already come with APIs such as reading files and saving files. Browser engineers have already put a lot of hard work into creating secure APIs, and we are content to follow their lead.

Core API

We built the Plugin API around a set of fixed controlled endpoints. There’s a lot of extra functionality we could provide via the Plugin API, including helper functions that perform or automate a sequence of functions or events.

We made a conscious decision to keep the core Plugin API as contained as possible. This reduces the risk of us introducing code-breaking changes to the API and makes it easier for plugin developers to maintain plugins.

This means that we don’t include any helper functions that developers can write using existing functions available in the Plugin API.

Фигма – программа для дизайна, ее отличительные особенности

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

Фигму используют для создания простых прототипов мобильных приложений и сайтов, а также интерфейса. Несмотря на то, что программа не применяется для создания сложной графики, она встала на одну ступень со Sketch и Photoshop, которые занимают в веб-дизайне лидирующие позиции.

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

Но этот вариант предполагает совместную работу над проектом  не более 2 человек. Место в облаке при этом никак не ограничивается. Все изменения в личном кабинете сохраняются в течение 30 дней. Для новичков в сфере веб-дизайна такие условия вполне приемлемы.

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

Платные курсы Figma

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

«Онлайн-курс по Figma» от HEDU

Онлайн-курс по Figma
Научитесь разработке интерфейсов и прототипированию в Figma, и получите работу в области веб-дизайна, пройдя онлайн-курс по Figma

«Вводный курс по работе с графическим редактором Figma» от Geekbrains

Вводный курс по работе с графическим редактором Figma. Современный и понятный инструмент для системного подхода к созданию диджитал продуктов. | Обучение программированию онлайн на GeekBrains | GeekBrains — образовательный портал

GeekBrainsGeek Brains

Экспресс-курс «Figma с нуля» от W.D.i

WDI Design School — школа огненного визуала
Освой профессию дизайнера,
научись создавать топовый визуал
для веб, мобайл, рекламы

Бесплатные курсы Figma онлайн

Бесплатный онлайн-курс с чатом в Телеграм

«Веб-дизайн в Figma с нуля и не только»

Уроки Figma. Справочник, курсы, уроки, учебник.
Уроки по программе Figma. Статьи, видео и курсы.

Уроки FigmaIvan Protsko

Бесплатный онлайн курс Figma «Краткий обзор программы Figma и основных инструментов.»

Игорь Колесень, Школа дизайна — UX Mind School

Уроки Figma
Geniet van je favoriete video’s en muziek, upload originele content en deel alles met vrienden, familie en anderen op YouTube.

YouTube

«Бесплатный курс по Фигме» от автора проекта Хелп по Фигме

20 различныйх видеоуроков.

Хелп по Фигме | Хелп по Фигме на русском от одного энтузиаста 🙂 Видео, заметки, ответы — вот это вот все

Хелп по Фигме на русском от одного энтузиаста 🙂 Видео, заметки, ответы — вот это вот все

How it works

The first release of the Figma Web API has three core capabilities:

1. Read design files in an open JSON file format
2. Read/Write comments to design files
3. Render design files (and parts of design files) into standard image formats (png, svg, etc)

Our open file format allows third party tools to consume Figma designs in a reliable way. Unlike our desktop competitors, Figma’s Web API isn’t tied to operating systems, specific file paths or versions of design software. This means it’s possible to access the current state of a design from software running on entirely different computers, or even on the web like Figma itself — setting the stage for an entirely new class of design integrations.

Uber employee looks at a real-time feed of designs fed to a TV by Figma’s API

Once you know the unique key of a Figma design — which is contained in the URL — you can extract a live snapshot of the tree of shapes, text, components, prototype links, transitions, constraints, etc that define how a Figma design looks and behaves. You can also ping an endpoint to generate a JPG, PNG or SVG of any file or file subtree.

We’ve designed the API to be as ergonomic as possible so it’s fast and easy to script improvements to internal company workflows or integrate Figma with other tools. Because it’s web-based, you don’t need to learn esoteric scripting languages to do this. You can rely on the programming frameworks you’re familiar with and interface directly with a well defined web API rather than bind yourself unnecessarily to another proprietary plugin framework. (This will make it easier to keep integrations up to date — and therefore less buggy!)

We know you’re wondering what’s coming up soon. Here’s a preview:

1. Webhooks. Next we plan to release Webhooks that stream callbacks to events in Figma. You can attach a Webhook to a file or team. You’ll get back events mapping to file updates.
2. Write API. While our Comment API allows clients to write to Figma, today’s release is mostly about enabling read cases and opening Figma up to the outside world. We plan to introduce a Write API later this year… it’s something we’re super excited about!
3. Extensions. If we had $1 for every time customers requested in app extensions, we might not have needed to raise our last round of funding. That said, we have watched as our competitors added extension models which granted developers freedom at the expense of quality, robustness and predictability. We’re eager to leverage the incredible collective brainpower of the Figma community in making our tool better, but we’re not going to introduce extensions until we are confident our extension model is robust. There’s no ETA just yet, but we are actively exploring how to build this in a solid way.

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

• прототипирование в Figma;
• атрибуты кода;
• доступ для просмотра и комментирования;
• хранение документов без ограничений;
• импорт документов из Sketch и других форматов.

Ограничения:

• нельзя совместно редактировать документы;
• история версий хранится 30 дней.

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

• доступ к редактированию документов;
• сохранение истории версий без ограничений по времени;
• можно создавать библиотеку с UI элементами (компонентами);
• создание личных проектов с возможностью доступа для других пользователей.

Возможности Figma

Прототипирование

Figma позволяет сделать кликабельную версию сайта или мобильного приложения, создавая множество экранов. Можно протестировать и настроить любую функцию: кнопки, всплывающие меню, анимированные и модальные окна.

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

Создание связей между элементами в режиме прототипирования в Figma

Когда прототип готов, включаете режим презентации. В презентации можно нажимать на кнопки, переходить между разделами сайта, кликать на пункты меню.

Компоненты

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

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

Изменения в компонентах

Чтобы сделать элемент компонентом, выберите опцию «Создать компонент» на верхней панели или кликните правой кнопкой мыши на слое и в меню выберите «Создать компонент» (Create Component).

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

Создание зависимых компонентов в Figma

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

Векторные сетки

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

Векторные сетки в действии

Кроме того, векторные сетки облегчают работу с HTML: можно скопировать SVG код из внешнего источника и вставить его как векторный слой прямо в редактор. Или сохранить векторный объект из Figma как SVG код. Для этого кликните правой кнопкой мыши на элементе, выберите «Копировать как SVG» и вставьте код в HTML или другой веб-проект, с которым работаете.

Встроенное комментирование, редактирование и доступ

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

Совместное редактирование в Figma

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

Комментирование проектов в Figma

Контроль версий

В Figma можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Сервис автоматически сохраняет версии при закрытии вкладки проекта, или если пользователь не вносил изменения в последние 30 минут.

Чтобы просмотреть историю версий, выберите в выпадающем меню сверху опцию «История версий». Справа на странице появится панель с историей изменений. Версиям можно присваивать названия, восстанавливать, дублировать.

Просмотр истории версий документа в Figma

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Похожие записи:

Проверка инн Дивиденды 2021: начисление, выплата, отчетность в 1с:бухгалтерия Как подтвердить право на применение ставки ндс 0% при экспорте Обманчивая дешевизна абхазского жилья Что можно и нельзя рассказывать о себе на собеседовании Жизненная энергия: где взять силы для успеха?