• Stars
    star
    160
  • Rank 229,791 (Top 5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 9 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A template/example Sketch plugin with a UI built in Interface Builder and connected to CocoaScript through black magic

No Maintenance Intended

Sketch Nib UI Template Plugin

This repository contains a template/example Sketch plugin whose UI is built in Interface Builder (and output as a .nib file, hence the name). The .nib is then loaded in through CocoaScript using some pretty brittle hackery, so beware.

Updated library version for skpm users

If you're using the fantastic skpm build tool for your plugin, there's a new, far-simplified way to do this:

Get started with sketch-nibui

Updated version from aparajita

There's an updated version of sketch-nibui.js in aparajita's sketch-style-master project; check it out!

Screenshots

Interface builder

Running plugin

Instructions

  1. Clone the repository.
  2. Open up SketchNibUITemplate.xcodeproj in XCode and in Interface Builder, modify SketchNibUITemplate.xib to the UI you want for your plugin.
  3. Add some view property definitions in DummyNibOwner.m so you could reference views in your UI from CocoaScript.
  4. In Interface Builder, open up the File's Owner object and in the Connections inspector, connect the outlet for the properties you just defined to the actual views in the UI you made.
  5. In Interface Builder, click File > Export and change the File Format to Interface Builder Cocoa NIB.
  6. Save the .nib as your.sketchplugin/Contents/Resources/UIBundle/Contents/Resources/MyNibUI.nib.
  7. Update your CocoaScript file to load in the extra view properties (such as exampleButton).

Also don't forget to update the plugin manifest to give your plugin a unique name, ID, etc.

More Repositories

1

AndroidAssetStudio

A set of web-based tools for generating graphics and other assets that would eventually be in an Android application's res/ directory.
JavaScript
6,453
star
2

MaterialColorsApp

A handy little Mac app that gives you quick access to the standard material design color palette.
JavaScript
1,762
star
3

LayerVisualizer

A simple web-based 3D layer visualizer (useful for visualizing material UIs and other things involving depth/shadows)
HTML
1,362
star
4

Android-SwipeToDismiss

Android swipe-to-dismiss mini-library and sample code
Java
1,284
star
5

Android-WizardPager

Android pager-style wizard flow sample code
Java
1,161
star
6

Android-MonthCalendarWidget

A simple example of a responsive Month Calendar app widget for Android
Java
1,091
star
7

SlidesCodeHighlighter

A little web app that helps you copy+paste syntax-highlighted code into slide decks.
JavaScript
1,057
star
8

AndroidIconAnimator

Android vector icon animation tool
JavaScript
814
star
9

AndroidDesignPreview

Android Design Preview is a tool that lets you mirror a portion of your desktop to your device. Useful for visual designers as well as developers, this tool can help streamline your high-fidelity mockup workflow.
Java
512
star
10

dashclock

DEPRECATED. Home screen widget for Android 4.2+
Java
482
star
11

AndroidSDKSearchExtension

A Chrome extension that adds an 'ad' omnibox command and view source links for the Android SDK.
JavaScript
458
star
12

Sketch-ArtboardTricks

A variety of artboard-related utilities for Sketch, primarily rearranging them into a grid, numbering them, etc.
JavaScript
321
star
13

FORMWatchFace

A watch face for Android Wear based on the FORM event typeface.
Java
252
star
14

Sketch-Stickers

A Sketch plugin that lets you browse and quickly drag+drop stickers (specially tagged layers) in your Sketch Libraries.
JavaScript
193
star
15

Sketch-FlowExporter

A Sketch prototype HTML exporter
JavaScript
169
star
16

portfolio

A YAML+Gulp-based template for creating design portfolios.
CSS
131
star
17

FORMTypeMaker

Type generator and in-conference intermission screensaver for #FORMSF14
JavaScript
126
star
18

env

My local environment
Shell
86
star
19

roman.nurik.net

My personal site.
SCSS
66
star
20

Sketch-Contrast

A Sketch plugin to show a pass/fail type contrast report.
JavaScript
50
star
21

SPANRotator

Web-based slide rotator for SPAN 2015 NYC/LON and 2016 TOK/LA conferences
JavaScript
46
star
22

ProjectToto

An experiment in inclusive mobile prototyping
JavaScript
41
star
23

sketch-nibui

A library for Sketch plugins that lets you load UI views from NIB files built with Interface Builder. Designed for use with skpm.
JavaScript
25
star
24

webpiano

A no-frills, simple virtual piano web app
JavaScript
24
star
25

rtcfire

A simple WebRTC + Firebase Realtime Database library for multi-user video chat
TypeScript
22
star
26

figpack

A simple build tool for Figma plugins based on webpack
JavaScript
19
star
27

Figma-Contrast

Contrast checker plugin... checks all text across all selected arboards
TypeScript
16
star
28

figma-plugin-webpack-template

A template repository for creating Figma plugins built with webpack
JavaScript
14
star
29

dataurl.app

Repo for dataurl.app
JavaScript
10
star
30

Figma-ArtboardTricks

A Figma plugin with artboard/top-level frame utilities
TypeScript
8
star
31

gulp-nucleus

An opinionated approach to generating static HTML using gulp and Nunjucks templates.
JavaScript
7
star
32

automessage

Automatic protorpc message types for ndb.Model subclasses (Google App Engine only)
Python
6
star
33

Sketch-RomanMisc

Sketch plugin with miscellaneous utilities (intended primarily for my own use, but feel free to use it!)
JavaScript
6
star
34

css-esm

CSS modules in the browser, with lightweight preprocessing
JavaScript
5
star
35

try-firebase

A little experiment in trying out Firebase locally
JavaScript
4
star
36

express-firebase-auth-gate

Protect access to Express apps using Firebase Auth
TypeScript
4
star
37

funbox

Created with StackBlitz ⚡️
JavaScript
3
star
38

form-type-element

A Polymer element that renders static or animated FORM type.
JavaScript
3
star
39

romannurik

2
star
40

figui-loader

A webpack loader for bundling Figma plugin UIs into your main plugin bundle
JavaScript
2
star
41

Figma-MadLib-Widget

A Figma widget that lets teams fill in the blanks, together!
TypeScript
2
star
42

Figma-Teams-Widget

A Figma widget for organizing people into teams
TypeScript
2
star
43

figma-node-serializer

Experimental test plugin to serialize/deserialize nodes
TypeScript
2
star
44

DataTreeDemo

JavaScript
1
star