Designer Hallway Hangout – 8/20/2020

Below is a recording from today’s Hallway Hangout with some awesome folks from the community, hosted by Joen Asmussen and Noah Shrader. This was a casual, remote meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. where we shared ideas and demos of some current design efforts in flight.

The topics of discussion were around the new WordPress Design Library, and some of the color refresh work being done to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. If you’re a contributor, or want to be a contributor to the design of WordPress, you might find the content helpful!

Links referenced in the video:

You will need permission to view/edit the new Figma WordPress Design Library. To request access, 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.” the #design channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and someone will get you added in Figma.

#colors, #figma, #hallwayhangout

Improvements to the Figma Libraries

The Design Team is in the process of updating our WordPress Figma libraries. For those that aren’t aware, these design files provide community designers and developers creative resources to help build their projects using the latest WordPress design patterns and elements.

While there have been past efforts to keep these maintained, we’ve been iterating and adding new features faster than we can update them. Also, these haven’t been given a consistent priority and focus. As a result, these files have lost alignment and in many cases, relevance.

Below is a summary of where we are currently, and where we’re looking to go. I’d like for us to consider what would be most helpful for us in terms of how they’re organized, as well as how we contribute to them. I’ve included some starter discussion with topics from previous discussions (here’s a post from last year).

Keep in mind: the goal for this initial phase of work is to establish direction and make meaningful progress without overthinking the process. We want to be able to start addressing concerns now, but also keep our sights set on the longer-term goal. A

Problems

Lack of Discoverability & Structure

It’s hard to find what you’re looking for and lacks accommodation for varying use cases.

Lack of Consistency & Trust

Due to the velocity of iteration and exploration by both designers and developers, without a workflow in place to regularly fact-check, these files can very quickly grow out of date.

Lack of Standardization

While we want to stay flexible to accommodate the fluid nature of designing and exploring, we’d like to have a standardized structure for our components to assist with intuitive and rapid iteration.

Solution

Create a flexible and well-structured Figma library that fully mirrors our code base components; is consistently, meticulously and collectively maintained; and is scalable with the increasing velocity of iteration and explorations by both designers and developers.

Objectives

  • Establish a mutually shared and understood structure for the Figma library.
  • Establish and maintain appropriate workflows for tagging and managing Figma changes.
    • Determine how proposals are handled in Figma.
    • Determine process and cadence for tagging and tracking changes in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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 be the repository owner. https://github.com/, and aligning those changes with Figma.
    • Determine process and cadence for transferring design decisions from other Figma files.

Let’s look quickly at how we’re currently structuring our libraries.

Libraries

The goal of these libraries is to provide contributors an easy and effective way to build prototypes and explore new ideas, using the latest WordPress design patterns and standards. This means making sure things are easy to find (good library structure), understand (proper documentation) and use (building the Figma components that make it easy to explore ideas).

Current Structure

Our libraries are available as 3 separate Figma files:

  • Styles – The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. qualities of elements (i.e: color palette, typography).
  • Components – The smaller elements/building blocks (i.e: buttons, tabs, the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. toolbar)
  • Patterns – Groups of components (i.e: block inserter, side panels, navigation)

Each Figma file uses pages to help with organization. In addition to the page(s) containing the main elements of that file, we’ve included other pages that help with more process-related functions:

  1. Getting Started – Documentation around the use of the elements
  2. Proposals – Ideas/changes that can be shared with and considered by the Design Team
  3. Deprecated – Elements that are no longer in use

The current structure seems to work okay for the most part. However, it’s possible that co-locating these elements into a single library; a single source of truth could help improve discoverability (everything is together so you don’t miss anything) and overall usability (having to jump back and forth between files can be tedious and unnecessary).

Move to a Single File?

It’s a good question, and worth the consideration. There are a few benefits to a single file approach:

  • Elements live together in one file. No need to share several links to multiple files, or risk the visibility of those links by stuffing them in the Getting Started documentation.
  • The library can become the one source of truth without the risk of an element in a related library going rouge.
  • Visually, a single file gives a holistic view of the patterns and elements.
  • In terms of the published library, the structure of components are handled similarly, making both approaches equally usable.

Another case for moving to a single file is that two of our three libraries are pretty sparse. For example, the Patterns library only has a single page in the library where the elements live (the Getting Started page can be ignored as it’s a duplicate of what’s in the Components library). Since the elements here are just grouped components, it would make sense for them to live alongside their other parts.

In terms of other aspects of a single file experience:

  • Documentation from the Getting Started pages would be brought together into a single read.
  • All of the Proposals pages would become a single location where contributors can propose changes.
  • The Deprecated pages would be removed entirely, or elements therein relocated to another file. It’s important that we only keep the relevant elements here, as we work towards a source of truth.

Here’s what that would look like:

Here, the Patterns library becomes its own page. The Styles library breaks out into its own pages (or possible into a single page). And with a better build-out of patterns, it’s possible to create an additional page called Views where patterns are put together to form some of the more common views within WordPress (like the editor view, dashboard, etc.).

Altogether, we’d have four types of elements living in a single location:

Circling back to our objectives, achieving good structure get us half the way there. The other part is making sure library elements are updated and managed sufficiently.

Workflows

Maintaining a design library is never a one-and-done effort. It takes consistent effort and prioritization. To avoid repeating past frustrations, we need implement practices that are clear, easy to follow and involve everyone. We all need to champion Regardless of , our focus should be on two things:

  • Keeping these libraries aligned with components in GitHub.
  • Keeping these libraries up-to-date with approved proposals, as well as design decisions made within other Figma files.

All of these processes need to be a part of a collective undertaking. Each designer working on a given project involving visual updates/additions to components should find responsibility for updating these libraries, or at the very least communicating the request. Without a unified effort, much like past attempts, this too will falter.

GitHub Updates

The designer working on a given feature/component should update the Figma library accordingly, or address the commits with the label “Needs Figma Update” added by others on their respective projects.

Adding/changing components:
  1. Contributor makes a visual change to a GitHub component.
  2. Contributor tags the commit with label “Needs Figma Update”
  3. Designer closest to the effort/project updates Figma library.

As a backup initiative, the team could/should tackle this label via a weekly triage.

Explorations & Proposals

Contributors have the ability to propose changes to components and design patterns, or suggest new ones from within the library.

Making a proposal:
  1. Create or revise a component and add it to the Proposals page for discussion (via Figma comments). During this phase, feel free to work on the component until the component is finalized in the GitHub repo.
  2. Iterate on the component until it matches the coded component.
  3. Once the coded component has been finalized, it’s time to review the Figma component and prepare it for publishing. The Design Team will review the component to ensure it meets standards, requesting edits where necessary.
  4. Once approved, and after the code component has been released to wordpress/components, the Design Team will merge the component into the master Components page.

Share Your Thoughts

If you’ve been using the WordPress Figma libraries and would like to contribute to the current direction, please share your thoughts below. Specifically, we’d like feedback on:

  • Do you like the current approach of having separate files for each library, or should we pursue a more unified approach with better workflow and organization?
  • Any other ideas you feel would help improve the way we organize and maintain our design library?

A big thanks to @mapk and @ibdz for their assistance with the content and formatting of this post!

#figma, #wordpress-components

Figma for Sketch users

This article was originally written by @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.

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.

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:

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:

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/ or can be cost-based plugin from a third-party support in Figma. While a third party project exists, 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 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.

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. 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, #sketch, #tools

Discussion: How do we organise Figma libraries?

During Wednesday’s design meeting, the design team started discussing how to better organise Figma libraries.

The problem

Because the WordPress Components (aka “WordPress for Figma/WP5.0_Library”) file has been expanding on an as-needed basis, the file is beginning to get a wee bit messy. It’s turned into something of a grab-bag of different elements: logos, colours, GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 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., wp-admin UI, icons, type styles…

There isn’t a consistent structure to the components and several different naming conventions are in place. As the library grows and expands, it’s likely this problem will get worse.

The solution

By establishing shared guidelines for how the design team organises, builds, and adds new library components and resources, it will be simpler and more straightforward for all design contributors to find what they’re looking for or contribute new patterns.

This breaks down into three different improvements:

  1. Splitting one library into a few smaller libraries.
  2. Establishing naming conventions for components.
  3. Establishing an organisational structure for components.

Once an approach is determined, the design team will document these guidelines in the Figma files themselves as well as in the handbook, so they’re easily findable.

Let’s dive into the details!

#figma, #wordpress-components

Figma for WordPress

I’m excited to share that Figma, 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, 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.
  • 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 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 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 be the repository owner. https://github.com/ issues is the difficulty of “pointing to” something via text. Inline feedback tools 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/ 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 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 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 for getting started tutorials and more. Here are some specific links to learn more:

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

Go deeper

#figma, #tools