Figma is Awesome!

Figma is an awesome little web based application for collaborative designing and it does it very well. The tooling is relatively straightforward within a short time [using it roughly a week now] I was able to design reusable components and design out some of the starting pages.

Figma Mobile

Above is a rough mockup I'm working on for the mobile view. The desktop mockup is shown below also in a very early work in progress. Using these more as light ideas, so alignment issues are from my laziness.

Figma Desktop

Vector Tools

Impressive vector tools, really hard to explain without a video or trying them. They are some of the best I've ever used and I hope others copy them.

Collaboration

I mainly work by myself on designs, but the idea others can jump in and make slight text changes and modifications on the colors is pretty nice.

Performance

I work with all vector assets no images, and I've found the performance really good overall (on a Surface Pro 4 w/ i7). We'll see how this does as I expand the designs.

Snapping objects even with hundreds of objects on the screen was smooth, especially dragging between various artboard frames.

For an application built on web technology you would be hard pressed to tell while it's in the desktop client.

Future

AdobeXD is the future for my workflow, but until they get further along, which will probably several months, Figma is filling the void nicely. Figma's collaboration might be enough for me to stick to it for all my open source projects.

If you're a Sketch user you probably won't make a switch, but the collaboration is worth a try.

Preview: Website Desktop Website Mobile

Getting found with GitHub Topics

GitHub topics was introduced January 31st and allows a quick way for maintainers to tag their repository for others to find.

GitHub Topics

In the repository list the descriptions for an repository become much more important. As more projects add topics a small change can be made to stand out like prepending an emoji.

Any emoji's can be used along with arrows to bring attention to the applications.

Examples: πŸŽπŸ“¦πŸ•ΆπŸ‘“πŸ’ŽπŸŽ€βœπŸ–ŠπŸ–‹βœ’πŸ–ŒπŸ’ΌπŸ“πŸ“‚πŸ—‚

Hopefully this doesn't get abused, but for now it's a nice way to stand out a little more.

MDI - Social Media Icon Ideas

There are many ways to style Material Design Icons for your site or app. The write-up below will go over a few ideas for social media.

See the Pen MDI - Round Social Icons by Austin Andrews (@templarian) on CodePen.

Above are some basic ideas for round and box social icons. It is also useful to bring attention to the various icons.

See the Pen MDI - Social Media Examples 2 by Austin Andrews (@templarian) on CodePen.

This article will expand over time as more ideas come along.

Be sure to checkout the MDI Collection of other helpful CodePens.

Material Design Icons v1.8.36

For latest v1.8.36 Material Design Icons release we've added 114 new icons. A few icons got fixed, replaced, and renamed. But general functionality is the same as the previous release and there should be very little impact upgrading.

As the new site is being worked on there will be more releases slowly leading up to the new site's debut.

New CSS Features.

Along with the 90, 180, 270, there are now degrees for every 45 angle using mdi-rotate-* classes.

Icons will not inherit their container's line-height allowing for quicker formatting in various frameworks.