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 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