Title: tools – Make WordPress Design

---

#  Tag Archives: tools

 [  ](https://profiles.wordpress.org/melchoyce/) [Mel Choyce-Dwan](https://profiles.wordpress.org/melchoyce/)
2:52 pm _on_ September 11, 2019     
Tags: [figma ( 5 )](https://make.wordpress.org/design/tag/figma/),
sketch, tools   

# 󠀁[Figma for Sketch users](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/)󠁿

_This article was [originally written](https://automattic.design/2019/05/15/figma-for-sketch-users/)
by [@joen](https://profiles.wordpress.org/joen/). He has graciously given us permission
to repost this here for the community._

---

You may have heard of Figma recently. It’s a web-app (with a hybrid-native version)
that aims to solve the same problem Sketch solves: make it easy and fast to design
and prototype software.

When two apps solve the same problem, why would you want to learn to use the new
thing when you know how to use the old one? In this article I will go into why, 
and when, you should consider Figma, even if you already know how to use Sketch.

## Why you should think about Figma

The first question we have to tackle is: what does Figma do better than Sketch, 
and do those aspects matter to you? The answer is that both are solid applications
and they each have their pros and cons. So when you evaluate which one to use, we
have to look at the strengths and weaknesses of both, and judge them based on your
needs.

When it comes to Figma, the key reasons you need to think about boil down to just
these two aspects:

 1. **It’s free for personal use**, which means if you’re working with the open sourceOpen
    Source Open Source denotes software for which the original source code is made 
    freely available and may be redistributed and modified. Open Source **must be**
    delivered via a licensing model, see GPL. community, this removes a barrier to 
    collaboration.
 2. **It’s cross-platform and even works in the browser**, which further removes simplifies
    that collaboration.

There are additional niceties in this vein, such as the ability to share a file 
with only commenting privileges, or even just for viewing. Just the fact that you
don’t have to bounce files and worry about versioning removes a lot of friction.
As a result, if you’re working with the community Figma is unbeatable. In fact, **
if your design work involves anyone not on a Mac with a copy of Sketch, Figma is
an inclusive choice**.

## What you need to know, coming from Sketch

In most ways, Figma and Sketch are incredibly similar. The excellent UIUI UI is 
an acronym for User Interface - the layout of the page the user interacts with. 
Think ‘how are they doing that’ and less about what they are doing. Sketch pioneered
you’ll find mostly the same in Figma. There’s an infinite canvas, layers are on 
the left, contextual properties are on the right.

**The first thing you’ll want to do to give Figma a proper shake is to [install the desktop app](https://www.figma.com/downloads/)**.

While it’s not a “true” native app, for actual design work it’s still worlds better
than the browser version. In fact, despite the hybrid nature of the app, this mainly
manifests itself a different way of handling files and a slightly longer time to
start.

**Tip**: You can set your browser to automatically open Figma links in the app. 
If the browser doesn’t prompt you to do this, click the menu button, and click “
Open in desktop app”.

### Artboards & “Frames”

In Sketch, you’ll often use “Artboards” to create mini-canvases to export separately,
and with a background color of your choice.

In Figma there are no artboards, and you can customize background colors, and configure
options for exporting on any item, even groups. But the closest equivalent Figma
has to an artboard is the “Frame”. The frame is meant to act somewhat like a _viewport_
in the browser sense, which means if you resize the frame, **items inside will scale
themselves according to their constraint and scaling rules**.

Frames, by default, “clip” (mask) the content inside, and Figma supports a number
of preset dimensions you can set your frames to, to match various devices and screen
sizes. For that reason, using a frame will let you accomplish mostly the same that
you can with an artboard in Sketch.

If you want to convert a frame to a group, or vice versa, there’s a dropdown menu
in the top right corner.

![](https://automatticdesign.files.wordpress.com/2019/05/frame.png?w=776)

One nice aspect to frames is that you can click items inside a frame directly, whereas
you have to double-click a group to “open” it, before you can select items inside.

**Key tip:** If you want to resize a frame and not have it skew/distort the contents,
hold ⌘ while you’re resizing.

### Libraries & “Assets”

In Sketch, as soon as you create a symbol, the symbol itself is moved to a separate“
Symbols” page, and an instance is is created where you made it.

In Figma, _symbols_ are called “Master Components” and are denoted with an icon 
showing 4 small diamonds. Symbol instances are called “Components”, and are denoted
with a single big diamond shape.

When you create a new master component in Figma, it’s created _instantly_, and is
stored right where you created it. This takes a little getting used to, but it also
removes a great deal of friction, which may be good because components are so powerful
in Figma. We’ll get to that aspect later in the article.

It can get messy, though, because master components can’t be _nested inside other
components_. If you try and nest one, an instance will be created in its place, 
and the actual master component will be put _somewhere else_. One way to clean that
up is to store your symbols in one place, just like how Sketch does it, and **you
can emulate this behavior in Figma**:

 1. Create a new “Symbols” page (or call it “Components” to embrace the Figma way).
 2. Convert your item to a component (select it and press ⌥⌘K).
 3. Copy the new component, then paste it in place (⇧⌘V) — the copy is an instance 
    of the component.
 4. Select the master component, right click it, and choose “Move to Page” → Symbols(
    or “Components”, if you called it that).

Because Figma doesn’t have a standard location for storing all your symbols, it 
has an alternative tool to help you search for the right item, called “Assets”. 
This is a tab that sits at the top of the layers panel. This allows you to see a
searchable and organized grid view (you can choose a list-view for this too). Team
Libraries — “published” Figma files created just to be component libraries — will
show up here as well, and it’s a great way to use icon libraries.

**Tip:** Double-click the _icon_ part of a layer, to center that element in the 
screen.

### File Handling

While Figma has files (File → Save as .fig), the primary way of collaborating and
sharing Figma mockups is through links. Click the blue “Share” button in the top
right corner. You’ll find that it works almost exactly how it does in Google Docs:
set permissions on a per-user basis, or on a per-link basis.

As you go about your day to day, habits from Sketch might not work well here. If
you’re used to saving multiple versions of the same Sketch file for a project, incrementing
a version number in the file name each time, you _can_ do this in Figma as well:
in the file browser, click the ellipsis button for a project and use the “Duplicate”
option.

However there’s a better way: save a copy of the current state to version history.
Click the Figma menu in the top left corner (⌘/) and choose File → Save to Version
History (⌥⌘S). This stores the entire state of the Figma file at that point in history.
You can later browse through this history and restore older versions. An old version
that gets restored adds a new state to the version history, so you don’t actually
overwrite newer versions when restoring. If you just need to to copy an element 
from the old version, you can right-click the item you want, and choose Duplicate
to get a separate file version of that state, because sadly you can’t just select
and copy an element from the past version, you can only view/restore/duplicate them.

**Note: **the free version of Figma only stores 30 days of version history. If you
want unlimited version history, you need to be on a paid plan.

Other little things:

 * Figma handles Sketch file importing reasonably well.
 * You can, as of recent versions, copy and paste from Sketch directly into Figma.
 * You can copy and paste vectors directly from Illustrator into Figma.
 * You can drag SVGs or images directly into Figma, just as you could in Sketch.
 * You can copy PNGs directly from your browser (right-click, copy image) into Figma.
 * You can copy SVGs from your browser too, but these are converted to bitmaps. 
   If you want to import SVGs, save them to your desktop and drag them into Figma.
    - Or, you can copy the SVG markup directly, and paste it into Figma and it will
      become an SVG.
 * Animated GIFs don’t play in Figma 

### Symbols & “Component” Overrides

Symbols are called “Components” in Figma, and just like how you can create symbol
overrides in Sketch — aspects of a symbol that can be customized on a per-instance
basis — so can you in Figma components.

In Sketch there’s a dedicated “Overrides” panel of the properties sidebarSidebar
A sidebar in WordPress is referred to a widget-ready area used by WordPress themes
to display information that is not a part of the main content. It is not always 
a vertical column on the side. It can be a horizontal rectangle below or above the
content area, footer, header, or any where in the theme.. This allows you to create
a very friendly and inviting way to change properties of a symbol, such as the icon
used or the text label of a button.

Figma has a very different interface to overrides, which can be confusing if you’re
coming from Sketch looking for an overrides panel. You won’t find it, because instead
of having a dedicated panel, **the way you override properties of a component is
to simply edit them directly**. Where in Sketch, a symbol instance is “locked in
place”, Figma lets you explore all the layers of a component directly, just as if
it was a simple group:

 * Hide or “delete” a layer to override the visibility of that layer in the component
   instance.
 * Inversely, you can unhide any layer that is hidden in the master component. For
   example you might have neutral, hover, and focused states inside a single Button
   component and hide or unhide each layer in the instance to show the desired state.
 * Double-click a text field to change the text.
 * Change any color of a component. You can even change strokes and effects. You
   can remove them, hide them, modify them. Want a shadow on your button instance
   but not in the master component? Add it directly to the instance. Or, add it 
   to the master component and hide it by default, then unhide the effect in the
   instance.
 * You can change the instance to be that of a different symbol. By default, components
   of the same dimensions as the instance show up as “Related Components”. This 
   is a great way to swap out icons.

There’s also a button to reset any overrides you created, it’s a little diamond 
with an arrow in it:

![](https://automatticdesign.files.wordpress.com/2019/05/reset-overrides-1.png?w
=776)

Delicious mystery meat!

Because you can add or remove any compenent style, hide or unhide any layer, in 
actual practice this makes Figma overrides significantly more powerful than they
are in Sketch, where you’re limited to features that are surfaced in the Overrides
panel.

The primary limitation of Figma component overrides, though, is that **you can’t
change the dimensions or position of a nested element**. For example if you have
a button component nested inside a headerHeader The header of your site is typically
the first thing people will experience. The masthead or header art located across
the top of your page is part of the look and feel of your website. It can influence
a visitor’s opinion about your content and you/ your organization’s brand. It may
also look different on different screen sizes. component, you can’t change the size
or position of the button, it is locked in place and acts according to the scaling
constraints that are applied to it. The only exception is that a textfield _will_
expand if you write longer text, unless that conflicts with its constraints.

Those scaling constraints are very powerful, though, and act as a mix of classic
responsive design rules, and the constraints you might be used to from iOSiOS The
operating system used on iPhones and iPads. app development. A key aspect of making
highly reusable Figma components is mastering these constraints.

One use case is creating an icon that sits at the end of left-aligned text. By applying
the right constraints, you can make that text editable, and still be able to make
sure the icon sits where it needs to:

![](https://automatticdesign.files.wordpress.com/2019/05/constraints.gif?w=776)

Constraints apply to every layer in the hierarchy, and when you combine them right,
you can create some incredibly versatile components.

**Tip: Right-click a component instance and choose “Go to master component”**. This
is useful if you need to change an aspect of a reused component and have it apply
to all instances, or if you need to adjust the scaling constraints.

## Aspects where Figma is still lacking

As you ponder whether the switch from Sketch to Figma will work for you, there are
a few aspects of Figma that are still lacking compared to Sketch. Being mindful 
of these downsides is important for your considerations.

**1. There is no official pluginPlugin A plugin is a piece of software containing
a group of functions that can be added to a WordPress website. They can extend functionality
or add new features to your WordPress websites. WordPress plugins are written in
the PHP programming language and integrate seamlessly with WordPress. These can 
be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. support in Figma**. While [a third party project exists](https://figmaplus.com/),
you are essentially installing a non-official copy of Figma. As a result, there 
aren’t that many plugins available.

[Figma is responding with a Web API](https://www.figma.com/blog/introducing-figmas-platform/)
that can hopefully one day accomplish what plugins can in Sketch, but it’s still
limited, there’s only a _read_ APIAPI An API or Application Programming Interface
is a software intermediary that allows programs to interact with each other and 
share data in limited, clearly defined ways.. So if extensibility is your jam, this
is a space to watch.

**2. Offline support just works in Sketch because of the local files**. To be able
to work with files offline in Figma, you have to use the native app, and you have
to _open the file first, before you go offline_. Definitely something you can work
around, but it’s also not smooth.

**3. The Figma file browser doesn’t support folders**. It’s a flat hierarchy, and
you have to search to find files that aren’t in the “Recent” section. All files 
that aren’t _published_ land in the “Drafts” section. It’s something you can get
used to, and not that different from how Google Docs works, but it’s also a different
way of thinking if you have an existing pattern for organizing your files.

**4. You can’t resize nested elements of a component.** As mentioned in the overrides
section, while you can create very reusable components using nesting and smart constraints,
you can’t resize nested elements. This very often bites you when you need to resize
a button inside a component to make the text fit. The workaround is to detach the
parent instance, which is not the end of the world, but it does make some components
slightly less reusable. [This is being discussed here](https://spectrum.chat/figma/feature-requests/objects-that-respect-padding-with-a-fluid-width-text-layer~ba6736cd-40ac-40ea-a3bd-6581a29c103c).

## Other miscellany

 * **Zooming**:
    - Hold z and click to zoom.
    - Hold z and drag to zoom an area.
    - Hold z and ⌥ to zoom out.
    - Hold space to pan.
 * **Color Picker**: Click the color swatch then use the arrow keys ↑ and ↓ to brighten
   or darken the color.
 * **Properties Panel:** You can select a fill, stroke or effect by clicking the
   space around it. Then you can copy it (⌘C) and paste it on any other symbol or
   shape (⌘V) to paste the copied property.
 * **Groups:** If you delete elements in a group, the group disappears. Similarly,
   if you create a text area and don’t write anything, it’s gone. No empty groups!
 * **Images:** When you add a bitmap image, it acts as a _fill inside a rectangle_(
   think background-image in CSSCSS CSS is an acronym for cascading style sheets.
   This is what controls the design or look and feel of a site.). This makes it 
   easy to tile or mask the image by simply resizing the rectangle. Fewer masks!
 * There are basic prototyping tools built in. Click the “Prototype” tab in the 
   Properties panel to get started.
 * Drawing vector graphics in Figma creates “networks”, where a single point can
   have multiple connections, as opposed to just the two you know from Sketch or
   Illustrator. It takes a little getting used to, but in practice it works quite
   well, certainly better than Sketch ever did.
 * You can copy the code for the appearance of any element, by picking the “Code”
   tab in the properties panel. It’s provides syntax for CSS, iOS and Android, admittedly
   in a somewhat rudimentary way, but definitely a cool little aspect.

There are quite a few more golden features in Figma, such as tools to help you with**
layout grids**, the ability to add **actual color swatches** that can be applied
to components instead of fills. But I will leave those as an exercise to explore
once you’re more comfortable with the basics.

## Should you switch?

At the time of writing, one can’t really suggest that Figma is better than Sketch,
but also not the inverse. Both have their strengths, both have weaknesses, and the
fact that they coexist means there’s healthy competition in the market which will
benefit both. In fact, some of the key reasons to use Figma (works in the browser,
great for collaboration) are in some shape or form [heading to Sketch as well in 2019](https://blog.sketchapp.com/sketch-raises-20m-in-series-a-funding-from-benchmark-ea298764d7d1).
Knowing that, should you switch?

**You should consider switching to Figma** if the strengths (inclusive of communities
and non-designers) outweigh the downsides (learning a new tool, lack of plugin support).

**You should not switch to Figma** if those coreCore Core is the set of software
required to run WordPress. The Core Development Team builds WordPress. strengths
aren’t important to you or your team, or if you rely on a specific plugin or an 
established workflow.

Sketch is a wonderful app, and if it’s working well for you, stay with it. If you
do mean to switch to Figma, maybe don’t do it if you need it for a project on a 
tight deadline, because although the learning curve from Sketch is small, it’s still
there. Consider instead some practice projects, or complete a tutorial or two when
you have the time. Then, jump in when you’re ready. I hope this write-up was helpful
in your choice of design tools!

[#figma](https://make.wordpress.org/design/tag/figma/), [#sketch](https://make.wordpress.org/design/tag/sketch/),
[#tools](https://make.wordpress.org/design/tag/tools/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2019/09/11/figma-for-sketch-users/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/tools/?subject=%5BShared%20Post%5D%20Figma%20for%20Sketch%20users&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F09%2F11%2Ffigma-for-sketch-users%2F&share=email)

 [  ](https://profiles.wordpress.org/alexislloyd/) [Alexis Lloyd](https://profiles.wordpress.org/alexislloyd/)
6:42 pm _on_ November 19, 2018     
Tags: [design ( 217 )](https://make.wordpress.org/design/tag/design/),
[figma ( 5 )](https://make.wordpress.org/design/tag/figma/), tools   

# 󠀁[Figma for WordPress](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/)󠁿

I’m excited to share that [Figma](https://www.figma.com), a robust design tool, 
is donating an organizational membership to the WordPress community! This is an 
incredibly exciting addition to the design tools we have available for building 
WordPress. 

Figma is:

 * **Built for collaboration**: From real-time collaboration to shared component
   libraries to versioning, Figma prioritizes [collaboration](https://help.figma.com/collaborating),
   like a “google docs for design”.
 * **Made to translate design to code**: Developers can inspect, copy, and export
   CSSCSS CSS is an acronym for cascading style sheets. This is what controls the
   design or look and feel of a site. and design assets directly from Figma design
   files, removing guesswork and making handoffs seamless. [More on developer tools](https://help.figma.com/collaborating/developer-handoff).
 * **The first design tool built completely in the browser**, which makes it fully
   accessible to users across all platforms. (There’s also a desktop version for
   those who prefer!)
 * **Prototyping and screen design all in one tool: **Figma has native tools for
   [prototyping](https://help.figma.com/prototyping) without having to export to
   other services.
 * **Inline commenting and feedback**: One of the challenges of discussing designs
   in GitHubGitHub GitHub is a website that offers online implementation of git 
   repositories that can easily be shared, copied and modified by other developers.
   Public repositories are free to host, private repositories require a paid subscription.
   GitHub introduced the concept of the ‘pull request’ where code changes done in
   branches by contributors can be reviewed and discussed before being merged by
   the repository owner. [https://github.com/](https://github.com/) issues is the
   difficulty of “pointing to” something via text. [Inline feedback tools](https://help.figma.com/collaborating/comments)
   can allow for a clearer, more direct conversation about design concepts.

These are just the highlights. In short, where we may have used multiple tools in
order to support all the parts of the design process, Figma incorporates many of
the coreCore Core is the set of software required to run WordPress. The Core Development
Team builds WordPress. features of other tools all in one product for a more efficient
and powerful workflow. For those of you who have been using Sketch, you can also**
import Sketch files directly into Figma**, so no need to worry about recreating 
your Sketch files from scratch. I’m excited about the possibilities for how Figma
can make the WordPress design process more collaborative, robust, and efficient.

## How to get access

To join the WordPress.orgWordPress.org The community site where WordPress code is
created and shared by the users. This is where you can download the source code 
for WordPress core, plugins and themes as well as the central location for community
conversations and organization. [https://wordpress.org/](https://wordpress.org/)
Figma team, pingPing The act of sending a very small amount of data to an end point.
Ping is used in computer science to illicit a response from a target server to test
it’s connection. Ping is also a term used by Slack users to @ someone or send them
a direct message (DM). Users might say something along the lines of “Ping me when
the meeting starts.” in [#design](https://make.wordpress.org/design/tag/design/)
on chat.wordpress.org and let us know whether you need view-only or edit access.
A Figma admin will contact you for your email address to set up your account.

[@jarahsames](https://profiles.wordpress.org/jarahsames/) has volunteered to convert
the SketchPress library into a shared team library for Figma, so when that is ready
it will be automatically available when you sign in to Figma. Thank you Sarah!

## Learning Figma

Once you’re signed in, you can check out the [Figma Help Center](https://help.figma.com/)
for getting started tutorials and more. Here are some specific links to learn more:

 * [Getting Started](https://help.figma.com/getting-started)
 * [Top Online Tutorials to Learn Figma for UI/UX Design](https://medium.com/quick-design/top-online-tutorials-to-learn-figma-for-ui-ux-design-4e9c6721a72d)
 * [Take a Tour around Figma!](https://help.figma.com/getting-started/get-familiar-with-figma/take-a-tour-around-figma)

If you already use Figma and know of other good learning resources, please post 
in the comments!

## Go deeper

 * I listened to a fantastic episode of the Track Changes podcast where Dylan Field,
   the founder of Figma, was the guest. He talks about their development process
   and also touches on the role of design in open-source projects. Listen here: 
   [Can Design Be Open Source?: A conversation with Dylan Field about Figma and collaborating on design](https://player.fm/series/track-changes/can-design-be-open-source-a-conversation-with-dylan-field-about-figma-and-collaborating-on-design)
 * [Here’s a post that goes into more detail about Figma’s features](https://blog.prototypr.io/why-we-should-be-using-figma-1510d0923be)
   and why it’s a compelling tool for any project.

 [#figma](https://make.wordpress.org/design/tag/figma/), [#tools](https://make.wordpress.org/design/tag/tools/)

### Share this:

 * [  Threads ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=facebook)
 * [  X ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=x)
 * [  Reddit ](https://make.wordpress.org/design/2018/11/19/figma-for-wordpress/?share=reddit)
 * [  Email ](https://make.wordpress.org/design/tag/tools/?subject=%5BShared%20Post%5D%20Figma%20for%20WordPress&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2018%2F11%2F19%2Ffigma-for-wordpress%2F&share=email)